Service Worker の登録は、Progressive Web App (PWA) (プログレッシブウェブアプリ) が提供する主な機能を有効化する最初のステップです。
- オフラインで稼働する
- プッシュ通知をサポートする
- デバイスにインストールできる
詳細は、Service workers and the Cache Storage API (サービスワーカーと Cache Storage API) と題した記事をお読みください。
ブラウザの互換性
サービスワーカーは、Internet Explorer を除くすべての主要なブラウザーでサポートされています。Browser compatibility (ブラウザの互換性) を参照してください。
Lighthouse のサービスワーカー監査が失敗する原因
Lighthouse は、サービスワーカーを登録しないページをフラグします。
Lighthouse は、Chrome Remote Debugging Protocol (Chrome リモートデバッグプロトコル) がサービスワーカーのバージョンを返すかどうかを確認します。返されない場合に監査は失敗します。
In the Lighthouse report UI the full PWA badge is given when you pass all of the audits in all of the PWA subcategories (Fast and reliable, Installable, and PWA optimized).
サービスワーカーの登録方法
Workbox is the recommended approach for adding service workers to websites because it automates a lot of boilerplate, makes it easier to follow best practices, and prevents subtle bugs that are common when using the low-level ServiceWorker API directly.
サービスワーカーは、わずか数行のコードで登録できますが、サービスワーカーを使用する唯一の理由は、上述した PWA の機能の 1 つを実装できるようにするためです。実際にそうした機能を実装するには、さらに多くの作業が必要になります。
- ファイルをキャッシュしてオフラインで使用する方法は、What is network reliability and how do you measure it? (ネットワークの信頼性とは、またその評価方法とは？) と題した記事をお読みください。
- アプリをインストール可能にする方法については、コードラボ Make it installable (インストール可能にする) を参照してください。
- プッシュ通知を有効にする方法については、Google のAdding Push Notifications to a Web App (プッシュ通知のウェブアプリへの追加) を参照してください。
リソース
- Does not register a service worker that controls page and
start_url (ページとstart_urlを制御するサービスワーカーが登録されない)監査のソースコード - Service Workers: an Introduction (サービスワーカー: はじめに)
- Service workers and the Cache Storage API (サービスワーカーと Cache Storage API)
- What is network reliability and how do you measure it? (ネットワークの信頼性とは、またその評価方法とは？)
- Make it installable (インストール可能にする)
- Adding Push Notifications to a Web App (プッシュ通知のウェブアプリへの追加)
更新日 • 記事を改善する