信頼性の高いウェブアプリを構築するには、Service Worker とキャッシュ ストレージの 2 つの API が重要な役割を果たします。しかし、微妙なバグを発生させたり、エッジケースにぶつかったりすることなく、それらを効果的に使用するのは簡単ではありません。たとえば、Service Worker コードのエラーにより、キャッシュの問題が発生する可能性があります。古いコンテンツや無効なリンクがユーザーに表示される可能性があります。
Workbox は、Service Worker API と Cache Storage API の上に構築された高レベルの Service Worker ツールキットです。ウェブアプリにオフライン サポートを追加するための、本番環境に対応したライブラリのセットが用意されています。このツールキットは、Service Worker 内で実行されるコードの管理に役立つツールと、ビルドプロセスと統合されるツールの 2 つのコレクションで構成されています。
ランタイム コード
これは、Service Worker スクリプト内で実行され、送信リクエストをインターセプトする方法と Cache Storage API とやり取りする方法を制御するコードです。Workbox には合計で 10 個ほどのライブラリ モジュールがあり、それぞれがさまざまな特殊なユースケースを処理します。最も重要なモジュールにより、Service Worker の応答（ルーティング）と応答方法（キャッシュ戦略）が決まります。
インテグレーションの構築
Workbox には、コマンドライン、Node.js モジュール、webpack プラグイン ツールが用意されており、次の 2 つの処理を別の方法で実現できます。
- 一連の構成オプションに基づいて Service Worker スクリプトを作成します。生成された Service Worker は、Workbox のランタイム ライブラリを「内部で」使用して、構成したキャッシュ戦略を実行します。
- ビルドプロセス中に生成されたファイルを含めたり除外したりするための構成可能なパターンに基づいて、「事前キャッシュ」する必要がある URL のリストを生成します。
Workbox を使用する理由
Service Worker の構築時に Workbox を使用するかどうかは任意です。Service Worker の「標準」の視点から見た一般的なキャッシュ戦略について、さまざまなガイドが用意されています。Workbox を使用すると 次のようなメリットがあります
キャッシュ管理
Workbox がキャッシュの更新を処理します。事前キャッシュを使用する場合はビルドプロセスに関連付けられますが、ランタイム キャッシュを使用する場合は構成可能なサイズ/期間ポリシーを使用します。基盤となる Cache Storage API は強力ですが、キャッシュの有効期限に対するサポートが組み込まれていません。Workbox などのツールを使ってこのギャップを埋めることができます。
豊富なロギングとエラーレポート
Service Worker を使い始める際に、何かがキャッシュに保存される理由（または、キャッシュに保存されない理由）を理解することは困難です。Workbox は、localhost でウェブサイトの開発バージョンを実行していることを自動的に検出し、ブラウザの JavaScript コンソールでデバッグ ロギングを有効にします。
ログメッセージを確認することで、単独で行う場合よりも、構成や無効化の問題の根本原因をはるかに迅速に特定できます。
テスト済みのクロスブラウザ コードベース
Workbox はクロスブラウザ テストスイート用に開発されており、可能であれば、特定のブラウザに実装されていない機能の代替実装に自動的にフォールバックします。
workbox-broadcast-cache-update moduleは、使用可能な場合は Broadcast Channel API を使用し、サポートされていないブラウザではpostMessage()ベースの実装にフォールバックします。- workbox-background-sync モジュールは、可能であれば Background Sync API を使用します。使用できない場合は、Service Worker が起動するたびにキュー内のイベントの再試行にフォールバックします。
Workbox の使い方
フレームワークの統合
新しいプロジェクトをゼロから開始する場合は、多くの一般的なスターター キットとアドオン プラグインにある Workbox 統合を利用できます。
Workbox を既存のビルドプロセスに追加する
サイトのビルドプロセスがすでに存在する場合は、適切なコマンドライン、Node.js モジュール、または webpack プラグイン ツールにドロップするだけで Workbox の使用を開始することができます。
特に Workbox コマンドライン インターフェースは、ローカル開発環境をチェックし、今後使用できる合理的なデフォルト構成を提案する wizard モードを備えており、簡単に起動して実行できます。
workbox wizard
? What is the root of your web app (i.e. which directory do you deploy)? src/
? Which file types would you like to precache? css, js, html
? Where would you like your service worker file to be saved? build/sw.js
? Where would you like to save these configuration options? workbox-config.js
Service Worker をビルドするには、ビルドプロセスの一環として workbox generateSW workbox-config.js を実行します。詳細については、generateSW のドキュメントをご覧ください。Service Worker をさらにカスタマイズするには、workbox-config.js に変更を加えます。詳しくは、オプションのドキュメントをご覧ください。
既存の Service Worker で実行時に Workbox を使用する
既存の Service Worker があり、Workbox のランタイム ライブラリを試す場合は、Workbox を公式の CDN からインポートして、ランタイム キャッシュでの使用を開始します。このユースケースでは、事前キャッシュを利用することはできません（ビルド時の統合が必要ですが、さまざまなキャッシュ戦略をプロトタイピングしてその場で試す場合に適しています）。
// Replace 3.6.3 with the current version number of Workbox.
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js');
workbox.routing.registerRoute(
new RegExp('\.png$'),
workbox.strategies.cacheFirst({
cacheName: 'images-cache',
})
);