プログレッシブウェブアプリ（PWA）の概要：サービスワーカーとマニフェスト

投稿日: 2022-04-20 2022-10-09
タグ: javascript

Service Workers などのテクノロジーのおかげで、WebサイトとWebアプリは、それをサポートするブラウザー上のネイティブアプリのように動作できるようになりました。これをプログレッシブウェブアプリ（PWA）と呼びます。

プログレッシブウェブアプリを使用すると、ホーム画面にインストールしたり、オフライン時にアプリにアクセスできるようにしたりできます。 ChromeまたはFirefoxを使用している場合は、Wi-Fiをオフにして、このページをリロードしてみてください。ページはキャッシュされており、キャッシュされたバージョンはService Workerから提供されるため、ページが正常に読み込まれることがわかります。

WebアプリをプログレッシブWebアプリと見なすには、いくつかの準備が必要です。

プログレッシブウェブアプリのチェックリスト

次の3つは、基本的なプログレッシブWebアプリを機能させるために最も重要です。

ウェブサイトはhttpsで提供する必要があります
アプリにはWebアプリマニフェストファイルが必要です
アプリにはServiceWorkerが機能している必要があります

これらの3つのことをカバーすると、オフラインで利用でき、キャッシュから静的アセットをロードできる基本的なプログレッシブWebアプリができあがります。 Lighthouse Chrome拡張機能を使用して監査を実行し、アプリがスペクトルのどこにあるかを確認できます。

Webアプリマニフェスト

Webアプリマニフェストは、アプリに関するメタデータを含むJsonファイルです。マニフェストのコンテンツは、AndroidフォンのChromeなどのブラウザーが、訪問者を繰り返してホーム画面にWebアプリをインストールするオプションを提示できるようにするために特に重要です。

このWebアプリマニフェストジェネレーターを使用すると、manifest.jsonファイルを簡単に生成できます。 1つの512×512アイコンからすべての異なるアイコンサイズを生成することもできます。

マニフェスト.jsonファイルを取得したら、次のようにアプリのヘッドセクションに含めます。

<link rel="manifest" href="/path/to/manifest.json">

たとえば、このWebサイトのWebアプリマニフェストのコンテンツは次のとおりです。

{
  "name": "Alligator.io",
  "short_name": "Alligator",
  "theme_color": "#138e69",
  "background_color": "#f8ea48",
  "display": "browser",
  "Scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

サービスワーカー

Service Workersは、一部の最新のブラウザで利用できる新しいテクノロジーであり、ネットワーク要求を制御できます。 Service Workerを使用すると、アセットをキャッシュして、ネットワークにアクセスできない場合やアクセスが非常に遅い場合に何が起こるかを制御できます。 Webアプリの場合、アプリのシェルのアセットをキャッシュして、オフラインまたは接続性の低いときにいつでも利用できます。

サービスワーカーの登録

サービスワーカーを配置するための最初のステップは、サービスワーカーを登録することです。

これは、ServiceWorkerの登録に使用できるサンプルスクリプトです。 ServiceWorkerがサポートされているかどうかを最初にチェックする方法に注意してください。

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
    console.log('ServiceWorker registration successful!');
  }).catch(function(err) {
    console.log('ServiceWorker registration failed: ', err);
  });
}

ServiceWorkerがルートフォルダーにあることに注意してください。これは、Webアプリ全体にスクロッピングされることを意味します。サブフォルダー内にあった場合、デフォルトではそのサブフォルダーのみにスコープが設定されます。

サービスワーカー

現在、サービスワーカー自体にとっては非常に複雑になる可能性があり、 SW-Toolbox のようなツールは、サービスワーカーのセットアップに必要なボイラープレートコードの削減に非常に役立ちます。 Service Workerを手動でコーディングするには、 install 、 activate 、 fetch イベントのイベントリスナーを設定する必要がありますが、SW-Toolboxはそれをバックグラウンドで処理します。

次のように、npmからSW-Toolboxをインストールできます。

$ npm install --save sw-toolbox

次に、登録したService Worker（ service-worker.js など）で、 self.importScripts（）を使用してSW-Toolboxをインポートします。

self.importScripts('node_modules/sw-toolbox/sw-toolbox.js');

このWebサイトでは、SW-Toolboxのインポート以外に必要なのは次のとおりです。

self.toolbox.precache(['/images/logo-small.svg', '/images/web-icons/webicon-twitter.svg', '/images/web-icons/webicon-facebook.svg']);
self.toolbox.router.get('/*', toolbox.networkFirst);

これにより、いくつかのアセットがプリキャッシュされてからすべてがキャッシュされますが、ネットワークが利用できない場合は、デフォルトでキャッシュされたバージョンになる前に、まずネットワークから新しいデータを取得しようとします。

これは、このような静的Webサイトではうまく機能しますが、すべてをキャッシュしても、動的データを持つ実際のWebアプリでは機能しません。この使用ガイドとこのブログ投稿を使用して、SW-Toolboxで何ができるかを詳しく知ることができます。

サービスワーカーを詳しく調べたい場合は、Mozillaがサービスワーカークックブックとサービスワーカーが実行できるさまざまなことのサンプルコードをまとめました。

テスト

すべての準備が整ったら、ChromeDevToolsの[アプリケーション]タブからWebアプリマニフェストとServiceWorkerを検査できます。

オフラインチェックボックスを試して、オフライン時にアプリがどのように反応するかをテストできます。さまざまなServiceWorker構成を試してみる場合は、現在のService Workerの登録を解除して、代わりに新しいバージョンのServiceWorkerが登録されるようにすることも役立ちます。

詳細はこちら

これは簡単な紹介でしたので、プログレッシブWebアプリをさらに深く掘り下げたいと思うかもしれません。ここにいくつかの良いリソースがあります：

getdocs

13036