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

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

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

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

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

一方、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 が提供するオプションではカバーされない複雑な要件がある場合に適しています。

まとめ

特にバンドラによってコンパイルされたバージョニングされたアセットが関係する場合は、独自にプリキャッシュを管理する場合よりも、ワークボックスでのプレキャッシュの方がはるかにシンプルです。しかし、Service Worker で行うのはプレキャッシュだけではありません。その過程で、ランタイム キャッシュなど、他の手法も学習します。