サービスワーカーとは？ブラウザ内部のプロキシ

サービスワーカーは、ブラウザがバックグラウンドで実行するスクリプトで、アプリとネットワークの間に位置し、リクエストをインターセプトしてキャッシュされたレスポンスを提供できます。

サービスワーカーは、最新の Web アプリにおけるオフラインサポートと高度なキャッシュの原動力です。登録されると、どのページからも独立して実行され、アプリが行うすべてのネットワークリクエストをインターセプトできます。その力によって PWA の中核となりますが、同時にバージョン管理と更新を build 時の慎重な関心事にします。

リクエストをインターセプトする仕組み

登録とアクティベーションの後、サービスワーカーはそのスコープ内の fetch イベントを処理します。キャッシュされたレスポンスを返す、ネットワークから取得する、あるいは cache-first や network-first といった戦略で両方を組み合わせることができます。

ライフサイクル

サービスワーカーはインストールし、アクティベートし、その後ページを制御します。新しいバージョンはバックグラウンドでインストールし、既存のページが閉じるまで待ってから引き継ぎます。これにより 2 つのバージョンが同時に実行されるのを防ぎますが、更新が即時でないことを意味します。

何を可能にするか

キャッシュされた asset を提供することによるオフラインアクセス。
ローカルキャッシュからの、より高速な再読み込み。
サポートされている場合の background sync と push notification。

古いキャッシュのリスク

設定を誤ったサービスワーカーは、ユーザーを古い asset に固定し、deploy した後でも古いアプリを提供し続けることがあります。worker が新しいバージョンを取得すべきだと分かるよう、キャッシュ名と precache manifest は build ごとに変わる必要があります。

CI/CD におけるサービスワーカー

build ステップは、このリリースのハッシュ付き asset ファイルを列挙した service worker と precache manifest を生成します。manifest はコンテンツハッシュに紐づいているため、すべての CI build は、どのファイルが変わったかを正確に把握する worker を生成します。そのため、ユーザーは古いコードに固定されるのではなく、クリーンに更新できます。

重要なポイント

サービスワーカーは、ネットワークリクエストをインターセプトしてオフラインサポートとキャッシュを可能にします。
そのライフサイクルは古いページが閉じるのを待つため、更新は即時ではありません。
CI は、ユーザーがクリーンに更新できるよう、コンテンツハッシュに紐づく precache manifest を生成します。