信頼性の高いウェブアプリの構築において、次の 2 つの API が重要な役割を果たします。 Service Worker キャッシュ ストレージ。しかし、 細かいバグが発生したり、エッジにぶつかったりすることなく、効果的に使用できます。 簡単ではありませんたとえば、Service Worker コードのエラーは キャッシュの問題を引き起こす。ユーザーに古いコンテンツを表示したり リンクをご覧ください。
ワークボックスは、 Service Worker とキャッシュ ストレージ上に構築された Service Worker ツールキット APIオフライン サポートを追加するための本番環境対応のライブラリ セットが備わっています。 サポートします。このツールキットは、 コンテナ内で実行するコードと、統合ツールを ビルドプロセスです。
ランタイム コード
これは Service Worker スクリプト内で実行され、 送信リクエストをインターセプトし、Cache Storage API とやり取りします。 ワークボックスには 合計数十のライブラリ モジュール それぞれが特殊なユースケースに対応しています。最も重要なモジュール Service Worker が応答するかどうかを ルーティング）、 その方法（ キャッシュ戦略）。
ビルド統合
ワークボックスの特典 コマンドライン Node.js モジュール、 および webpack プラグイン 次の 2 つを別の方法で実現できます。
- 一連の構成に基づいて Service Worker スクリプトを作成する 。生成された Service Worker は Workbox のランタイム ライブラリを使用する "仕組み"構成したキャッシュ戦略を実行に移します。
- 一致させるべき URL のリストを生成する 「事前キャッシュ済み」 生成されたファイルを含めたり除外したりするための構成可能なパターンに基づいて おすすめします。
Workbox を使うべき理由は何ですか。
Service Worker のビルド時にワークボックスを使用するかどうかは任意です。 Chronicle のさまざまな機能を 一般的なキャッシュ戦略 「バニラ」からService Worker の視点から見てみましょう。Workbox を使用する場合は いくつかメリットをご紹介します
キャッシュ管理
Workbox では、キャッシュの更新が処理されます。これは、ビルドプロセスに プレキャッシュを使用するか、ランタイム使用時には構成可能なサイズ/年齢ポリシーを使用する キャッシュ保存について説明します。基盤となる Cache Storage API は強力ですが、 キャッシュ有効期限の組み込みサポートが 組み込まれていますWorkbox のようなツールが、そのギャップを埋めます。
広範なロギングとエラーレポート
Service Worker を使い始めるときに、なぜ何かを考えたとき
キャッシュされているのか（同様に、なぜキャッシュされないのか）も問題です。
ワークボックスは、プロジェクトの開発版を実行していることを
localhost でウェブサイトを開き、ブラウザの JavaScript でデバッグ ロギングを有効にします
できます。
ログ メッセージを確認しながら進むことで、ログで検出されたログの より迅速に構成または無効化の問題を 考えてみましょう
テスト済みのクロスブラウザ コードベース
Workbox はクロスブラウザ テストスイートに対して開発されており、可能な限り、 代替実装が自動的にフォールバックされます。 一部のブラウザでは表示されません。
- 「
workbox-broadcast-cache-update module使用 Broadcast Channel API 使用可能な場合は自動的にpostMessage()ベース サポートしていないブラウザには実装できません。 - 「 workbox-background-sync モジュール 使用 バックグラウンド同期 API 可能で、そうでない場合は、待機状態になるたびに、キュー内のイベントを再試行します。 Service Worker が起動します。
Workbox の用途
フレームワークの統合
新しいプロジェクトをゼロから始める場合は、 ワークボックス インテグレーションは、多くの一般的なスターター キットとアドオン プラグインで使用されています。
- create-react-app
- vue-cli
- preact-cli
- Gatsby
- Next.js
既存のビルドプロセスに 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 をさらにカスタマイズできます。
詳しくは、オプションのドキュメントをご覧ください。
既存の 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',
})
);