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

フォールバックレスポンスの管理

状況によっては、ユーザーがオフラインの場合に備えて、フォールバックレスポンスをキャッシュに保存することをおすすめします。ネットワークファーストやステイル更新中再検証などの戦略で提供されるキャッシュ動作の代わりに、フォールバックを実装できます。

フォールバックとは、リクエストに失敗したときにブラウザがデフォルトで提供するものよりも優れたプレースホルダである、画一的な汎用レスポンスです。たとえば次のようなものがあります。

「画像が表示されない」プレースホルダの代わりに表示されます。
標準の「ネットワークに接続できません」というページの代わりとなる HTML リンクです。

オフラインページのみ

カスタムのオフライン HTML ページを用意し、それ以外何もしない場合は、以下の基本的な方法を使用できます。

import {offlineFallback} from 'workbox-recipes';
import {setDefaultHandler} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

setDefaultHandler(new NetworkOnly());

offlineFallback();

上記のコードは、setDefaultHandler を使用して、すべてのルートのデフォルトとしてネットワークのみの戦略を使用します。次に、offlineFallback レシピを実行して、エラーが発生した場合にオフラインフォールバックを提供します。レシピでは、オフラインの代替 HTML ファイルの名前が offline.html で、ウェブサーバーのルートから提供されることを前提としています。

包括的なフォールバック

ネットワーク障害やキャッシュミスが発生すると、workbox-strategies が提供するキャッシュ戦略によって一貫して拒否されます。これにより、1 つのハンドラ関数で発生したすべての障害に対処するようにグローバルな「キャッチ」ハンドラを設定するパターンが促進され、request.destination 値ごとに異なるフォールバックを提供できるようになります。

次の例では、workbox-recipes の warmStrategyCache レシピを使用し、ランタイムキャッシュに事前にキャッシュされたアイテムを提供するキャッチハンドラを設定しています。ただし、アプリケーションによっては、フォールバックをプレキャッシュしたほうがよい場合があります。

import {warmStrategyCache} from 'workbox-recipes';
import {setDefaultHandler, setCatchHandler} from 'workbox-routing';
import {CacheFirst, StaleWhileRevalidate} from 'workbox-strategies';

// Fallback assets to cache
const FALLBACK_HTML_URL = '/offline.html';
const FALLBACK_IMAGE_URL = '/images/image-not-found.jpg';
const FALLBACK_STRATEGY = new CacheFirst();

// Warm the runtime cache with a list of asset URLs
warmStrategyCache({
  urls: [FALLBACK_HTML_URL, FALLBACK_IMAGE_URL],
  strategy: FALLBACK_STRATEGY,
});

// Use a stale-while-revalidate strategy to handle requests by default.
setDefaultHandler(new StaleWhileRevalidate());

// This "catch" handler is triggered when any of the other routes fail to
// generate a response.
setCatchHandler(async ({request}) => {
  // The warmStrategyCache recipe is used to add the fallback assets ahead of
  // time to the runtime cache, and are served in the event of an error below.
  // Use `event`, `request`, and `url` to figure out how to respond, or
  // use request.destination to match requests for specific resource types.
  switch (request.destination) {
    case 'document':
      return FALLBACK_STRATEGY.handle({event, request: FALLBACK_HTML_URL});

    case 'image':
      return FALLBACK_STRATEGY.handle({event, request: FALLBACK_IMAGE_URL});

    default:
      // If we don't have a fallback, return an error response.
      return Response.error();
  }
});

次に、Workbox のビルドツールで injectManifest を使用してフォールバックレスポンスが事前キャッシュに保存され、matchPrecache メソッドでエラーが発生した場合のフォールバックとして機能します。

import {matchPrecache, precacheAndRoute} from 'workbox-precaching';
import {setDefaultHandler, setCatchHandler} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';

// Optional: use the injectManifest mode of one of the Workbox
// build tools to precache a list of URLs, including fallbacks.
precacheAndRoute(self.__WB_MANIFEST);

// Use a stale-while-revalidate strategy to handle requests by default.
setDefaultHandler(new StaleWhileRevalidate());

// This "catch" handler is triggered when any of the other routes fail to
// generate a response.
setCatchHandler(async ({request}) => {
  // Fallback assets are precached when the service worker is installed, and are
  // served in the event of an error below. Use `event`, `request`, and `url` to
  // figure out how to respond, or use request.destination to match requests for
  // specific resource types.
  switch (request.destination) {
    case 'document':
      // FALLBACK_HTML_URL must be defined as a precached URL for this to work:
      return matchPrecache(FALLBACK_HTML_URL);

    case 'image':
      // FALLBACK_IMAGE_URL must be defined as a precached URL for this to work:
      return matchPrecache(FALLBACK_IMAGE_URL);

    default:
      // If we don't have a fallback, return an error response.
      return Response.error();
  }
});

2 つ目の代替設定の使用例として、ページが事前にキャッシュされているものの、ページからリクエストされた画像（または他のアセット）はキャッシュされていない場合です。ユーザーがオフラインの場合でも、キャッシュからページを読み取ることはできますが、ネットワークエラーが発生した場合は、フォールバックプレースホルダまたは代替機能を提供できます。

ランタイムキャッシュのウォーム

Workbox は、プレキャッシュ用とランタイムキャッシュ用に別々のキャッシュを保持します。プリキャッシュに依存せずに事前にキャッシュしたい状況があります。これは、プレキャッシュマニフェストを更新すると、更新された Service Worker をデプロイする必要があるためです。

ランタイムキャッシュにアセットを事前に準備するには、workbox-recipes の warmStrategyCache レシピを使用します。内部的には、この戦略は Service Worker の install イベントで Cache.addAll を呼び出します。

import {warmStrategyCache} from 'workbox-recipes';
import {CacheFirst} from 'workbox-strategies';

// This can be any strategy, CacheFirst used as an example.
const strategy = new CacheFirst();
const urls = [
  '/offline.html',
];

warmStrategyCache({urls, strategy});

まとめ

リクエストの失敗に対するフォールバックレスポンスの管理には多少の手間がかかりますが、あらかじめ計画を立てておくと、ユーザーがオフラインのときにもある程度のコンテンツや機能を提供するようにウェブアプリを設定できます。

フォールバック レスポンスの管理

オフライン ページのみ

包括的なフォールバック

ランタイム キャッシュのウォーム

まとめ

フォールバックレスポンスの管理

オフラインページのみ

ランタイムキャッシュのウォーム