ワークボックス ルーティング

Service Worker はページのネットワーク リクエストをインターセプトできます。次のような音声に反応することがあります。 キャッシュされたコンテンツ、ネットワークのコンテンツ、または生成されたコンテンツがあるブラウザ 必要があります。

workbox-routing は、簡単に「ルーティング」できるようにするモジュールです。これらのリクエストを さまざまな関数が用意されています。

ルーティングの実行方法

ネットワーク リクエストが原因で Service Worker のフェッチ イベントが発生すると、workbox-routing 指定されたルートとハンドラを使用してリクエストへの応答を試みます。

上記からの主な注目点は次のとおりです。

• リクエストのメソッドが重要です。デフォルトでは、Routes は GET リクエスト。他のタイプのリクエストをインターセプトする場合は、 メソッドを指定します。

• ルート登録の順序は重要です。複数のルートが に登録済みのルート（最初に登録されたルートが を使用してリクエストに応答します。

経路を登録する方法はいくつかあります。コールバック、通常の Route インスタンスのみが含まれています。

ルートでの照合と処理

「ルート」「照合」という 2 つの関数に過ぎません。関数 ルートがリクエストと「処理」に一致するかどうかを判断します。関数 リクエストが処理され、レスポンスが返されます。

Workbox には、いくつかのヘルパーが用意されており、 ただし、別の動作が必要になった場合は、 カスタムマッチとハンドラ関数が最適です

match コールバック関数 渡される ExtendableEvent、 Request、 実行できる URL オブジェクト 真の値を返します。簡単な例として、2 つの単語を 次のような特定の URL を指定します。

const matchCb = ({url, request, event}) => {
  return url.pathname === '/special/url';
};

ほとんどのユースケースは、url または request。

ハンドラ コールバック関数 同じ Pod が ExtendableEvent、 Request、 URL オブジェクトと params 値。これは「match」使用します。

const handlerCb = async ({url, request, event, params}) => {
  const response = await fetch(request);
  const responseBody = await response.text();
  return new Response(`${responseBody} <!-- Look Ma. Added Content. -->`, {
    headers: response.headers,
  });
};

ハンドラは、Response に解決される Promise を返す必要があります。この この例では async と await。 内部で、戻り値 Response は Promise にラップされます。

これらのコールバックは次のように登録できます。

import {registerRoute} from 'workbox-routing';

registerRoute(matchCb, handlerCb);

唯一の制限は、「一致」フィールドがコールバックは同期的に truthy を返す必要があります。 非同期処理を実行することはできませんその理由は、 Router がフェッチ イベントに同期的に応答するか、 他の取得イベントに渡します

通常、「handler」はコールバックは、指定されたいずれかの方法で workbox-strategies で確認できます。

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';

registerRoute(matchCb, new StaleWhileRevalidate());

このページでは workbox-routing を中心に説明しますが、 ワークボックス戦略に関するこれらの戦略の詳細

正規表現ルートを登録する方法

一般的には、「match」ではなく正規表現を呼び出すことができます。 Workbox では次のように簡単に実装できます。

import {registerRoute} from 'workbox-routing';

registerRoute(new RegExp('/styles/.*\\.css'), handlerCb);

リクエストの送信元が 同じオリジン、 この正規表現は、リクエストの URL が 使用します。

• https://example.com/styles/main.css
• https://example.com/styles/nested/file.css
• https://example.com/nested/styles/directory.css

ただし、クロスオリジン リクエストの場合、 URL の先頭と一致する必要があります。その理由は、 正規表現 new RegExp('/styles/.*\\.css') に該当する可能性は低い 第三者 CSS ファイルと一致するように意図されたコード。

• https://cdn.third-party-site.com/styles/main.css
• https://cdn.third-party-site.com/styles/nested/file.css
• https://cdn.third-party-site.com/nested/styles/directory.css

この動作が望ましい場合は、通常の動作を URL の先頭を照合します。一致させたい場合、 https://cdn.third-party-site.com のリクエストの場合、通常の 式 new RegExp('https://cdn\\.third-party-site\\.com.*/styles/.*\\.css')。

• https://cdn.third-party-site.com/styles/main.css
• https://cdn.third-party-site.com/styles/nested/file.css
• https://cdn.third-party-site.com/nested/styles/directory.css

ローカルとサードパーティの両方を照合する場合は、ワイルドカード 最初の名前になりますが、これは慎重に行う必要があります ウェブアプリで予期しない動作が発生しないようにしてください。

ナビゲーション ルートの登録方法

サイトがシングルページ アプリの場合、 NavigationRoute～ すべてのユーザーに対して特定のレスポンスを返す ナビゲーション リクエスト。

import {createHandlerBoundToURL} from 'workbox-precaching';
import {NavigationRoute, registerRoute} from 'workbox-routing';

// This assumes /app-shell.html has been precached.
const handler = createHandlerBoundToURL('/app-shell.html');
const navigationRoute = new NavigationRoute(handler);
registerRoute(navigationRoute);

ユーザーがブラウザでサイトにアクセスするたびに、ページのリクエストが ナビゲーション リクエストであり、キャッシュされたページ /app-shell.html が配信されます。 （注: ページは workbox-precaching または 独自のインストール手順を使用します）。

デフォルトでは、これはすべてのナビゲーション リクエストに応答します。目標 応答を一部の URL のみに制限する場合は、allowlist denylist オプションを使用すると、このルートと一致するページを制限できます。

import {createHandlerBoundToURL} from 'workbox-precaching';
import {NavigationRoute, registerRoute} from 'workbox-routing';

// This assumes /app-shell.html has been precached.
const handler = createHandlerBoundToURL('/app-shell.html');
const navigationRoute = new NavigationRoute(handler, {
  allowlist: [new RegExp('/blog/')],
  denylist: [new RegExp('/blog/restricted/')],
});
registerRoute(navigationRoute);

注意すべき点は、URL が両方に含まれる場合、denylist が優先されることです。 allowlist と denylist。

デフォルト ハンドラの設定

「handler」を一致するルートがない場合、 デフォルト ハンドラを設定できます。

import {setDefaultHandler} from 'workbox-routing';

setDefaultHandler(({url, event, params}) => {
  // ...
});

Catch ハンドラを設定する

いずれかのルートでエラーがスローされた場合は、 catch ハンドラを設定してグレースフル デグラデーションを行います。

import {setCatchHandler} from 'workbox-routing';

setCatchHandler(({url, event, params}) => {
  ...
});

GET 以外のリクエストのルートの定義

デフォルトでは、すべてのルートが GET リクエスト用とみなされます。

POST リクエストなど、他のリクエストをルーティングする場合は、以下が必要です。 次のようにして、ルートの登録時にメソッドを定義します。

import {registerRoute} from 'workbox-routing';

registerRoute(matchCb, handlerCb, 'POST');
registerRoute(new RegExp('/api/.*\\.json'), handlerCb, 'POST');

ルーターのロギング

リクエストのフローは、 workbox-routing: 処理中の URL がハイライト表示されます ワークボックスから作成できます。

さらに詳細な情報が必要な場合は、ログレベルを debug に設定して、 Router で処理されないリクエストのログを表示する詳しくは、 デバッグガイド ログレベルの設定です。

高度な使用方法

ワークボックス ルーターを付与するタイミングをより細かく制御したい場合 作成することもでき、 Router インスタンスと呼び出し handleRequest() です メソッドを使用する必要があります。

import {Router} from 'workbox-routing';

const router = new Router();

self.addEventListener('fetch', event => {
  const {request} = event;
  const responsePromise = router.handleRequest({
    event,
    request,
  });
  if (responsePromise) {
    // Router found a route to handle the request.
    event.respondWith(responsePromise);
  } else {
    // No route was found to handle the request.
  }
});

Router を直接使用する場合は、Route クラスも使用する必要があります。 または拡張クラスを使用してルートを登録します。

import {Route, RegExpRoute, NavigationRoute, Router} from 'workbox-routing';

const router = new Router();
router.registerRoute(new Route(matchCb, handlerCb));
router.registerRoute(new RegExpRoute(new RegExp(...), handlerCb));
router.registerRoute(new NavigationRoute(handlerCb));

workbox-routing.registerRoute(
  capture: string | RegExp | RouteMatchCallback | Route,
  handler?: RouteHandler,
  method?: HTTPMethod,
)

workbox-routing.setCatchHandler(
  handler: RouteHandler,
)

workbox-routing.setDefaultHandler(
  handler: RouteHandler,
)