ワークボックスを使用した事前キャッシュ

プレキャッシュは、Service Worker で最も一般的な作業の一つです。Workbox では、どの Workbox のビルドツールを選択しても、この重要なタスクを柔軟に実行できます。このガイドでは、generateSW と injectManifest の両方を使用してアセットを事前キャッシュに保存する方法と、プロジェクトに最適な方法について説明します。

generateSW を使用したプレキャッシュ

generateSW は、Workbox でアセットを事前キャッシュする最も簡単な方法です。generateSW について覚えておくべき重要な点は、独自の Service Worker を作成しているのではなく、Workbox に Service Worker を生成するように指示している点です。ただし、さまざまな構成オプションを通じて動作に影響を与えることができます。

generateSW が行うデフォルトの動作は、使用するビルドツールによって異なります。workbox-webpack-plugin を使用する場合は、構成オプションを指定する必要はありません。デフォルトでは、このプラグインは Webpack の依存関係グラフに含まれているすべてのものを事前キャッシュし、output.path で指定されたディレクトリに service-worker.js という名前の Service Worker を書き込みます。

一方、workbox-build または workbox-cli を使用する場合は、ローカル ファイル システムから読み取られた HTML、CSS、JavaScript アセットのみが、デフォルトで事前キャッシュされます。構成の面では、事前キャッシュを機能させるには、generateSW 構成で swDest と globDirectory オプションを指定する必要があります。Service Worker の動作に影響する追加のオプションを構成したいと思うかもしれません。以下のドキュメントをご覧ください。

injectManifest を使用したプレキャッシュ

injectManifest の使用は generateSW を使用するほど簡単ではありませんが、柔軟性を高めるために使いやすさと引き換えに失敗します。generateSW が Service Worker の生成全体を自動で処理しますが、injectManifest は、ユーザーが作成した Service Worker をソースとして取得し、URL のリストを注入してプリキャッシュします。残りの Service Worker はそのままにします。

injectManifest を使用する場合は、プリキャッシュ ロジックを配線する必要があります。injectManifest は入力 Service Worker を調べる際に、特別な self.__WB_MANIFEST 変数を探してプリキャッシュ マニフェストに置き換えます。この変数が存在しない場合、injectManifest はエラーをスローします。

プリキャッシュ マニフェスト内のエントリのリストは、追加の構成オプションを使用して調整できます。

横並びでの比較

以下の各タブをクリックして、generateSW メソッドと injectManifest メソッドの使用方法を比較してください。

generateSW は Service Worker を生成するため、設定を指定するだけで済みます。workbox-build を使用した例を以下に示します。

// build-sw.js
import {generateSW} from 'workbox-build';

generateSW({
  swDest: './dist/sw.js',
  globDirectory: './dist',
  globPatterns: [
    '**/*.js',
    '**/*.css',
    '**/*.svg'
  ]
});

そうすると、Node を使用してコマンドラインで Service Worker をビルドできます。

node build-sw.js

injectManifest にはソース Service Worker が必要であるため、最低限の実行可能なサンプルでは、ソース Service Worker ファイルが必要です。必要なのがプレキャッシュだけであれば、入力 Service Worker は次のようになります。

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

self.__WB_MANIFEST という文字列をメモします。これは、Workbox がプリキャッシュ マニフェストに置き換えるプレースホルダです。このユースケースで有効な構成は次のとおりです。

// build-sw.js
import {injectManifest} from 'workbox-build';

injectManifest({
  swSrc: './src/sw.js',
  swDest: './dist/sw.js',
  globDirectory: './dist',
  globPatterns: [
    '**/*.js',
    '**/*.css',
    '**/*.svg'
  ]
});

injectManifest は、高度なルーティングやカスタム キャッシュ戦略など、generateSW のオプションでは対応できない複雑な要件がある場合に適しています。

まとめ

Workbox でのプレキャッシュは、自分でプレキャッシュを管理するよりもはるかにシンプルです。特にバンドラによってコンパイルされた、バージョニングされたアセットが問題となる場合はなおさらです。ただし、Service Worker でできることはプレキャッシュだけではありません。さらに、ランタイム キャッシュなどの他の手法についても学習します。