プログレッシブウェブアプリとDrupal9での実装に関するすべて

公開: 2020-10-20

インターネットは、1960年代に軍隊と科学者のより良いコミュニケーションを目的として最初に構築されました。間もなく、Webは1990年代頃に革命的な現象に変化し、それ以来止められなくなりました。ウェブの目的は変わり続けましたが、変わらない目的の1つは利便性でした。

利便性の必要性は、インターネットにアクセスするための多くの革新的な方法をもたらしました。ネイティブモバイルアプリとWebアプリは、インターネットブラウジングを簡単かつ便利にする2つのテクノロジーです。この記事では、プログレッシブWebアプリと、DrupalプログレッシブWebアプリモジュールを使用してDrupalで実装する方法について説明します。しかし、そのすべてに飛び込む前に、ネイティブアプリとWebアプリの機能と、プログレッシブWebアプリがギャップを埋める方法を見てみましょう。

ネイティブモバイルアプリの機能

これらはプラットフォーム固有のアプリです。これは、新しいプラットフォーム（iOS、Android）ごとに再構築する必要があることも意味します。
ダウンロードする必要があります。
通常は超高速です。
豊富な機能と機能。
どのデバイスにもシームレスに溶け込み、その一部のように感じることができます。
オフラインで作業できます。
デバイスデータ、デバイスハードウェア、ローカルファイルシステムに簡単にアクセスできます。
開発、保守、およびアップグレードにはより費用がかかります。
セキュリティが事前に承認されており、AppStoreからダウンロードできます。
検索エンジンがクロールするのは難しい。

Webアプリの機能

プラットフォームに依存しません。必要なのは、それらにアクセスするためのブラウザだけです。最新のブラウザをサポートします。ダウンロードする必要はありません。
それらを開発するための特定のSDKはありません。フロントエンドは、HTML、CSS、JavaScript、およびバックエンド用のLAMPまたはMEANスタックのいずれかを使用して開発されます。
アップグレードする必要はありません。開発と保守のコストが削減されます。
認証が必要ですが、不正アクセスに対して脆弱である可能性があるため、セキュリティが問題になります。
これらはオフラインでは機能せず、ネイティブモバイルアプリよりも遅くなる可能性があります。
それらはAppStoreにリストされていないため、見つけるのが難しい場合があります。

プログレッシブウェブアプリとは何ですか？どのようにギャップを埋めますか？

つまり、ネイティブWebアプリは非常に機能が優れていますが、到達範囲が不足しています。一方、Webアプリはリーチが広いですが、機能が不足しています。そして、それがプログレッシブWebアプリがギャップを埋めるためにやってくるところです。

プログレッシブウェブアプリは、ネイティブアプリとウェブアプリのメリットを理想的に組み合わせたものです。プログレッシブウェブアプリ（PWA）は、最新のWeb機能を使用して、アプリのようなエクスペリエンスをユーザーに提供できます。これは、最新のブラウザーが提供する機能とモバイルエクスペリエンスの利点を組み合わせたものです。ネイティブアプリのような、非常に複雑でインストール可能なアプリを作成できます。現在、ほとんどのブラウザでWeb Assemblyがサポートされているため、PWAは開発者が選択した言語で構築できるため、提供できる機能の範囲と柔軟性が大幅に向上します。

プログレッシブウェブアプリの機能

これらはプラットフォームやデバイスに依存しません。どのブラウザでも美しく動作します。
それらは高速にロードされ、非常に信頼性があります（インターネット速度が遅い場合でも）。スクロールは非常にスムーズで滑らかです。
オフラインでも作業できます。
ネイティブアプリのようなプッシュ通知を有効にすることができます。
ネイティブアプリのようにデバイスのハードウェアとデータにアクセスできます。
ショートカットは（ダウンロードする代わりに）ユーザーのホーム画面に追加できます
複雑なインストールは必要ありません。 URLを簡単に共有できます。
すべてのデバイスでレスポンシブ。
それらは開発がより簡単でより速くなります。メンテナンスも簡単です。

DrupalのPWAモジュールについて話す前に、PWAを構築するための最小要件を見てみましょう-

HTTPS経由で実行する必要があります。
サービスワーカーを含める必要があります–サービスワーカーは、ブラウザーでhttpsを介して実行され、ブラウザーアクセスを提供するスクリプト（javascript）です。オフラインコンテンツ配信、プッシュ通知などのネイティブアプリのような機能を提供します。
Webアプリマニフェストが必要です。これは、名前、説明、作成者などのWebアプリに関する情報を含むメタデータを含むJSONファイルです。これは、検索エンジン最適化にも役立ちます。

PWA Drupalモジュール– Drupal 9（および8）を使用してプログレッシブWebアプリを作成する方法

Drupal PWAモジュールはインストールが簡単で、Service Worker（キャッシュやその他のオフラインアプリのような機能用）と構成可能なManifest.jsが付属しています。ただし、PWAのインストールプロセスを開始する前に、SSLがインストールされていることを確認する必要があります。要件が非常に具体的でカスタマイズが多い場合は、AngularやReactなどのフロントエンドフレームワークを使用してPWAを開発し、独自のServiceWorkerをカスタマイズできます。

PWA Drupal9モジュールのインストール

Drupal 7では、プログレッシブWebアプリのDrupalモジュールのインストールは、モジュールをダウンロードして有効にするのと同じくらい簡単でした。構成フォームを介してmanifest.jsファイルを生成し、検証することができます。ただし、Drupal 9では、PWAモジュールを有効にするだけでこの機能を直接統合することはできません。その理由は、manfest.jsファイルを構成するオプションが提供されていないためです。

PWA Drupalモジュールをダウンロードして有効にして、モジュールをインストールします。
Drupal 9の場合、このパッチを適用します
完了したら、 [構成]-> [プログレッシブウェブアプリ]-> [PWA設定]に移動し、必要な情報を追加します。

サービスワーカー

キャッシュするURL-これは、オフラインの場合でも利用可能にする必要があるページを指定できる場所です。ここに記載されているURLはキャッシュされます。ここで更新を行う場合は、必ずキャッシュをフラッシュしてください。
除外するURL–インターネットでのみ機能する必要があるページがある場合は、ここにそのことを記載してください。
オフラインページ–ユーザーがオフラインになり、ページがキャッシュされていないときに、パーソナライズされたページをユーザーに表示します。

Manifest.json

Drupalのmanifest.jsonファイルは、ユーザーがPWAをホーム画面に追加できるようにするものです。これには、名前、表示名、背景色、向きなど、PWAの動作を変更するために変更できる構成が含まれています。

ファイルはインデックスページのheadタグに追加されます。
<link rel = "manifest" href = "/manifest.json">

次の画像は、「ホーム画面に追加」オプションを示しています。そのオプションを選択すると、ホーム画面にアイコンが作成されます。