HTMLからのService Worker登録

Service Workerは、ページとは独立してバックグラウンドで実行され、スコープ内のネットワークリクエストを横取りするJavaScriptファイルです。オフライン対応、プッシュ通知、バックグラウンド同期、キャッシュによる再訪時の高速読み込みを実現します。

ページのスクリプトからワーカーを登録します。navigator.serviceWorker.register("/sw.js")を実行すると、ブラウザーは/sw.jsを取得して解析し、installイベントを実行した後、登録のスコープ内のリクエストの横取りを開始します。

古いブラウザーはService Workerをサポートしていません。registerを呼び出す前に、必ず"serviceWorker" in navigatorで機能を検出してください。Service Workerに対応していないブラウザーでは呼び出し時に例外が発生します。ポリフィルは現実的ではありません。Service Workerにはブラウザーレベルの統合が必要なため、ポリフィルで実装できないからです。

スコープは、ワーカーが制御するパスの接頭辞です。デフォルトではワーカーファイルが置かれたディレクトリがスコープになります。/sw.jsは/以下のすべてのURLを制御します。別の場所にあるファイルからより深いスコープのワーカーを登録するには、scopeオプションを設定し、Service-Worker-Allowedヘッダーも提供する必要があります。

デフォルトのスコープでサイト全体を対象にできるよう、アプリケーションのルート（/sw.js）にsw.jsを配置します。より深いパス（/app/sw.js）に配置すると、スコープは/app/以下に限定されます。これは、通常は望ましくありません。

重要な描画中の帯域幅競合を避けるため、ページの読み込み後にワーカーを登録します。window.addEventListener("load", () => navigator.serviceWorker.register("/sw.js"))のように指定します。PWAの機能は次回以降の訪問時に有効になるため、初回訪問を遅延させません。

ブラウザーは更新されたsw.jsを自動的に確認します（通常は24時間ごと、およびほとんどのページ読み込み時）。ファイルの内容が変更されていると、新しいワーカーがダウンロードされてインストールされます。その後、既存のタブがすべて閉じるまで「waiting」状態で待機し、閉じられると有効化されます。

registration.update()を使うと、更新確認を手動で実行できます。新しいsw.js内でself.skipWaiting()を使うと、タブが閉じるのを待たずに直ちに新しいワーカーを有効化できます。これらを組み合わせると「常に最新のワーカーを実行する」動作になりますが、セッション中に再取得が発生するという代償があります。

registration.unregister()はワーカーを削除します。問題のあるワーカーがサイトに悪影響を与えている場合、開発中に役立ちます。Chrome DevToolsでは、Application → Service Workersに同じ目的で使用できる「Unregister」ボタンがあります。

HTTP（HTTPSなし）でワーカーを登録すると、静かに失敗します。Service Workerには安全なオリジン（HTTPS、または開発時のlocalhost）が必要です。登録が有効にならない場合は、コンソールに「An SSL certificate error occurred」というメッセージがないか確認してください。

ワーカーからDOMにアクセスすることはできません。メッセージを渡すには、ページ側でnavigator.serviceWorker.controller.postMessage()を使用し、ワーカー側でself.addEventListener("message", handler)を使用します（逆方向も同様です）。キャッシュの無効化、バージョン確認、カスタムイベントなどに役立ちます。

初回訪問では、ワーカーはインストールされますが、ページを再読み込みするまでページの制御を開始しません。最初のナビゲーションから直ちに制御するには、activateイベントでself.clients.claim()を呼び出します。オフラインファーストのアプリに役立ちます。

機能検出の後、ページのJavaScriptからnavigator.serviceWorker.register("/sw.js")でService Workerを登録します。完全なスコープを適用するには、sw.jsをアプリケーションのルートに配置します。重要な描画と競合しないよう、読み込み時に登録してください。更新は定期的に自動確認され、registration.updateまたはskipWaitingで強制できます。悪意のあるワーカーの注入を防ぐため、HTTPSが必要です。