このページは Cloud Translation API によって翻訳されました。

Workbox: 高レベルの Service Worker ツールキット

Jeff Posnick

信頼性の高いウェブアプリを構築するうえで重要な役割を果たす API は、Service Worker と Cache Storage の 2 つです。ただし、微妙なバグを導入したり、エッジケースにぶつかったりすることなく、それらを効果的に使用するのは難しい場合があります。たとえば、サービスワーカーコードのエラーにより、キャッシュに問題が生じ、古いコンテンツやリンク切れが表示されることがあります。

Workbox は、Service Worker API と Cache Storage API 上に構築された高レベルのサービスワーカーツールキットです。ウェブアプリにオフラインサポートを追加するための本番環境対応のライブラリセットを提供します。このツールキットは、サービスワーカー内で実行されるコードの管理に役立つツールと、ビルドプロセスと統合するツールの 2 つのコレクションで構成されています。

ランタイムコード

これは、サービスワーカースクリプト内で実行されるコードで、送信リクエストをインターセプトして Cache Storage API とやり取りする方法を制御します。Workbox には、合計で 10 個ほどのライブラリモジュールがあり、それぞれがさまざまな特殊なユースケースを処理します。最も重要なモジュールは、サービスワーカーが応答するかどうか（ルーティング）と、応答する方法（キャッシュ戦略）を決定します。

統合を構築する

Workbox には、コマンドライン、Node.js モジュール、webpack プラグインのツールがあり、次の 2 つの目的を達成するための代替手段を提供します。

一連の構成オプションに基づいてサービスワーカースクリプトを作成します。生成されたサービスワーカーは、Workbox のランタイムライブラリを「内部」で使用して、構成したキャッシュ戦略を実行します。
ビルドプロセス中に生成されたファイルを含めるか除外するかを構成可能なパターンに基づいて、「プリキャッシュ」する必要がある URL のリストを生成します。

Workbox を使用する理由

Service Worker のビルド時に Workbox を使用することは任意です。Service Worker の「標準」の観点から一般的なキャッシュ戦略を説明するガイドが多数あります。Workbox を使用する場合は、次のメリットがあります。

キャッシュ管理

Workbox は、プリキャッシュを使用する場合はビルドプロセスに関連付け、ランタイムキャッシュを使用する場合は構成可能なサイズ/有効期間ポリシーを介して、キャッシュの更新を処理します。基盤となる Cache Storage API は強力ですが、キャッシュの有効期限のサポートは組み込まれていません。Workbox などのツールは、そのギャップを埋めることができます。

広範なロギングとエラー報告

サービスワーカーの使用を開始する際、キャッシュに保存される理由（または、キャッシュに保存されない理由）を把握するのは難しい場合があります。Workbox は、localhost でウェブサイトの開発版を実行しているときに自動的に検出し、ブラウザの JavaScript コンソールでデバッグロギングをオンにします。

DevTools コンソールに Workbox のロギングを表示する

ログメッセージを追跡することで、単独で行う場合よりもはるかに迅速に、構成や無効化の問題の根本原因を特定できます。

テスト済みのクロスブラウザコードベース

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

Service Worker をビルドするには、ビルドプロセスの一部として workbox generateSW workbox-config.js を実行します。詳しくは、generateSW のドキュメントをご覧ください。workbox-config.js を変更することで、Service Worker をさらにカスタマイズできます。詳細については、オプションのドキュメントをご覧ください。

既存のサービスワーカーで実行時に Workbox を使用する

既存のサービスワーカーがあり、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',
  })
);