信頼性の高いウェブアプリを構築するうえで、Service Worker と Cache Storage の 2 つの API が重要な役割を果たします。しかし、微妙なバグを発生させたり、エッジケースに遭遇したりすることなく、効果的に使用することは困難です。たとえば、Service Worker コードのエラーが原因でキャッシュに問題が発生し、ユーザーに古いコンテンツや無効なリンクが表示されることがあります。
Workbox は、Service Worker API と Cache Storage API を基盤として構築された、高レベルの Service Worker ツールキットです。ウェブアプリにオフライン サポートを追加するための、プロダクション レディなライブラリ セットが用意されています。このツールキットは、サービス ワーカー内で実行されるコードの管理に役立つツールと、ビルドプロセスと統合するツールの 2 つのコレクションで構成されています。
ランタイム コード
これは、サービス ワーカー スクリプト内で実行され、送信リクエストをインターセプトして Cache Storage API とやり取りする方法を制御するコードです。Workbox には、合計 12 個ほどのライブラリ モジュールがあり、それぞれがさまざまな特殊なユースケースに対応しています。最も重要なモジュールは、Service Worker が応答するかどうか（ルーティング）と、どのように応答するか（キャッシュ戦略）を決定します。
統合を構築する
Workbox には、コマンドライン、Node.js モジュール、webpack プラグインのツールが用意されており、次の 2 つのことを実現するための代替手段を提供します。
- 一連の構成オプションに基づいてサービス ワーカー スクリプトを作成します。生成された Service Worker は、Workbox のランタイム ライブラリを「内部」で使用して、構成したキャッシュ戦略を実行します。
- ビルドプロセス中に生成されたファイルを含めるか除外するかを構成可能なパターンに基づいて、「事前キャッシュ」する必要がある URL のリストを生成します。
Workbox を使用する理由
サービス ワーカーの構築時に Workbox を使用することは任意です。一般的なキャッシュ戦略を「バニラ」サービス ワーカーの観点から説明するガイドは多数あります。Workbox を使用することにした場合、次のようなメリットがあります。
キャッシュ管理
Workbox は、プリキャッシュを使用する場合はビルドプロセスに関連付け、ランタイム キャッシュを使用する場合は構成可能なサイズ / 経過時間ポリシーを使用して、キャッシュの更新を処理します。基盤となる Cache Storage API は強力ですが、キャッシュの有効期限のサポートは組み込まれていません。Workbox などのツールは、そのギャップを埋めます。
広範なロギングと Error Reporting
Service Worker を使い始めるときに、何かがキャッシュに保存されている理由（または、同様にイライラする理由、キャッシュに保存されていない理由）を把握することは困難です。Workbox は、localhost でウェブサイトの開発版を実行していることを自動的に検出し、ブラウザの JavaScript コンソールでデバッグ ロギングを有効にします。
ログ メッセージを追跡することで、構成や無効化の問題の根本原因を、単独で行うよりもはるかに迅速に特定できます。
テスト済みのクロスブラウザ コードベース
Workbox はクロスブラウザ テストスイートに対して開発されており、可能な場合は、特定のブラウザにない機能の代替実装に自動的にフォールバックします。
workbox-broadcast-cache-update moduleは、利用可能な場合は Broadcast Channel API を使用し、サポートされていないブラウザではpostMessage()ベースの実装にフォールバックします。- workbox-background-sync モジュールは、可能であれば Background Sync API を使用します。そうでない場合は、サービス ワーカーが起動するたびにキューに格納されたイベントを再試行します。
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
サービス ワーカーをビルドするには、ビルドプロセスの一環として workbox generateSW workbox-config.js を実行します。詳しくは、generateSW ドキュメントをご覧ください。workbox-config.js に変更を加えることで、サービス ワーカーをさらにカスタマイズできます。詳しくは、オプションのドキュメントをご覧ください。
既存の Service Worker で実行時に Workbox を使用する
既存の Service Worker があり、Workbox のランタイム ライブラリを試したい場合は、公式 CDN から Workbox をインポートして、すぐにランタイム キャッシュに使用を開始します。このユースケースでは、プリキャッシュ（ビルド時の統合が必要）を利用できませんが、プロトタイピングや、さまざまなキャッシュ戦略をその場で試すのに最適です。
// 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',
})
);