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

プログレッシブウェブアプリ: Workbox の使用

1. ようこそ

このラボでは、既存の Service Worker を使用しているウェブサイトを Workbox を使用するように変換します。これは、プログレッシブウェブアプリワークショップのコンパニオン Codelab シリーズの 2 番目です。前回の Codelab は「オフラインにする」でした。このシリーズには、他に 6 つの Codelab があります。

学習内容

既存の Service Worker を変換して Workbox を使用する
PWA にオフラインフォールバックを追加する

必要な予備知識

基本的な HTML と JavaScript

必要なもの

Service Worker をサポートしているブラウザ

2. 準備

まず、この Codelab を完了するために必要なスターターコードをクローンするかダウンロードします。

リポジトリのクローンを作成する場合は、pwa03--workbox ブランチにいることを確認してください。zip ファイルには、そのブランチのコードも含まれています。

このコードベースには Node.js 14 以降が必要です。コードが用意できたら、コードのフォルダのコマンドラインから npm ci を実行して、必要なすべての依存関係をインストールします。次に、npm start を実行して、Codelab の開発用サーバーを起動します。

ソースコードの README.md ファイルには、すべての配布ファイルの説明が記載されています。また、この Codelab 全体を通して使用する主な既存のファイルは次のとおりです。

キーファイル

service-worker.js - アプリケーションのサービスワーカーファイル
offline.html - ページが利用できないときに使用するオフライン HTML

3. Workbox への移行

既存のサービスワーカーを見ると、プリキャッシュは次の 2 つのステップに分割できるようです。

Service Worker のインストール中に関連ファイルをキャッシュに保存する
Cache Only 戦略でこれらのファイルを再度提供する

index.html ファイルと / ルートは、このウェブアプリの HTML はあまり変更されないため、プリキャッシュする意味があります。しかし、CSS や JavaScript などの他のファイルは変更される可能性があり、変更されるたびにサービスワーカーのライフサイクル全体を通過する必要があるのは望ましくありません。また、現在のサービスワーカーは CSS と JavaScript のサブセットのみを考慮しているため、すべてをカバーする必要があります。これらのアイテムを Stale While Revalidate 戦略でキャッシュに保存する方が理にかなっています。必要に応じてバックグラウンドで更新できる迅速なレスポンスです。

再訪したプリキャッシュ

Workbox に移行するにあたり、既存のコードは一切保持する必要がないため、service-worker.js の内容をすべて削除します。前のラボで、この Service Worker がコンパイルされるように設定したので、ここでは ESModule インポートを使用して、NPM モジュールから Workbox を取り込むことができます。まず、プリキャッシュについて復習しましょう。service-worker.js に次のコードを追加します。

import { warmStrategyCache } from 'workbox-recipes';
import { CacheFirst } from 'workbox-strategies';
import { registerRoute } from 'workbox-routing';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { ExpirationPlugin } from 'workbox-expiration';

// Set up page cache
const pageCache = new CacheFirst({
  cacheName: 'page-cache',
  plugins: [
    new CacheableResponsePlugin({
      statuses: [0, 200],
    }),
    new ExpirationPlugin({
      maxAgeSeconds: 30 * 24 * 60 * 60,
    }),
  ],
});

warmStrategyCache({
  urls: ['/index.html', '/'],
  strategy: pageCache,
});

registerRoute(({ request }) => request.mode === 'navigate', pageCache);

説明

/index.html と / のプリキャッシュを設定するには、5 つのモジュールからプルします。このコードは、以前に記述したコードよりもはるかに強力です。

まず、新しい Cache First キャッシュ保存戦略を設定します。これは、必要に応じて他のページをキャッシュに追加できるように、Cache Only 戦略の代わりに選択されます。名前 page-cache が付けられます。Workbox 戦略では、キャッシュからのコンテンツの保存と取得のライフサイクルに影響を与える可能性のある複数のプラグインを使用できます。ここでは、Cacheable Response プラグインと Expiration プラグインの 2 つのプラグインを使用して、適切なサーバーレスポンスのみがキャッシュに保存され、キャッシュ内の各アイテムが 30 日後にフラッシュされるようにしています。

次に、ウォーム戦略キャッシュ Workbox レシピを使用して、/index.html と / で戦略のキャッシュがウォームアップされます。これにより、サービスワーカーのインストールイベント中にこれらのアイテムがキャッシュに追加されます。

最後に、新しいルートが登録されます。ページナビゲーションのリクエストは、このキャッシュファースト戦略によって管理されます。キャッシュまたはネットワークから取得して、レスポンスをキャッシュに保存します。

アセットのキャッシュ保存

ルートのプリキャッシュが完了したら、サイトのアセット（CSS と JavaScript）のキャッシュ保存を再実装します。そのためには、まず StaleWhileRevalidate を workbox-strategies インポートに追加し、次のコードを Service Worker の末尾に追加します。

// Set up asset cache
registerRoute(
  ({ request }) => ['style', 'script', 'worker'].includes(request.destination),
  new StaleWhileRevalidate({
    cacheName: 'asset-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  }),
);

説明

このルートは、リクエストのタイプが CSS、JavaScript、Web Worker に対応するスタイル、スクリプト、ワーカーのいずれであるかを判断することから始まります。その場合は、Stale While Revalidate 戦略を使用して、まずキャッシュから提供を試み、利用できない場合はネットワークにフォールバックし、可能であればネットワークからキャッシュ内のバージョンを更新しようとします。ページ戦略と同様に、この戦略では有効なレスポンスのみがキャッシュに保存されます。

4. オフラインフォールバックを追加

元の Service Worker を Workbox に移行したら、オフライン時に PWA がクラッシュしないように、オフラインフォールバックを追加する必要があります。

オフライン時に利用できない可能性があるもの（ページ、フォント、CSS、JavaScript、画像など）に対してオフラインフォールバックを設定できます。すべての PWA でページフォールバックを設定して、ユーザーがキャッシュにないページに移動した場合でも、アプリのコンテキスト内に留まるようにする必要があります。

Workbox レシピには、まさにこの処理を行うために使用できるオフラインフォールバックレシピが用意されています。これを使用するには、まず offlineFallback を workbox-recipes インポートに追加し、次のコードを Service Worker の末尾に追加します。

// Set up offline fallback
offlineFallback({
  pageFallback: '/offline.html',
});

説明

オフラインフォールバックレシピは、指定されたフォールバックでウォームアップされるキャッシュのみの戦略を設定します。次に、Workbox のデフォルトのキャッチハンドラを設定し、ルーティングリクエストの失敗（キャッシュに何もなく、ネットワークで何かにアクセスできない場合）をキャッチし、リクエストが失敗し続ける限り、関連ファイルのコンテンツをキャッシュから取得してコンテンツとして返します。

5. 完了

Workbox を使用してルートのキャッシュ保存戦略を設定し、PWA のオフラインフォールバックを提供する方法を学びました。

このシリーズの次の Codelab は IndexedDB です。