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

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

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));

型

NavigationRoute

NavigationRoute を使用すると、Terraform からブラウザに一致する workbox-routing.Route [経路案内のリクエスト]https://developers.google.com/web/fundamentals/primers/service-workers/high-performance-loading#first_what_are_navigation_requests。

次の条件を満たす受信リクエストのみが https://fetch.spec.whatwg.org/#concept-request-mode|mode navigate に設定されている。

このルートは、ナビゲーションリクエストのサブセットにのみ適用することもできます denylist パラメータと allowlist パラメータのいずれかまたは両方を使用します。

プロパティ

コンストラクタ

void

denylist と allowlist の両方を指定すると、denylist は次のようになります。リクエストはこのルートに一致しません。

allowlist と denylist の正規表現結合されたベクトルと [pathname]https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/pathname および [search]https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search 部分に追加されます。

注: これらの正規表現は、評価期間中にすべてのリンク先 URL に対して評価されることがあります。ナビゲーションです。使用を避けるべき表現: 複雑な正規表現そうしないと、ユーザーがサイトを操作するときに遅延が発生することがあります。

constructor 関数は次のようになります。
```
(handler: RouteHandler, options?: NavigationRouteMatchOptions) => {...}
```
- handler
  
  RouteHandler
  
  コールバック Response の結果を返す Promise を返します。
- オプション
  
  NavigationRouteMatchOptions（省略可）
- 戻り値
  NavigationRoute
catchHandler

RouteHandlerObject 省略可
handler

RouteHandlerObject
一致

RouteMatchCallback
method

HTTPMethod
setCatchHandler

void

setCatchHandler 関数は次のようになります。
```
(handler: RouteHandler) => {...}
```
- handler
  
  RouteHandler
  
  コールバック Response に解決する Promise を返す関数

NavigationRouteMatchOptions

プロパティ

許可リストに掲載する

RegExp[] 省略可
拒否リスト

RegExp[] 省略可

RegExpRoute

RegExpRoute を使用すると、正規表現ベースの workbox-routing.Route。

同一オリジンのリクエストでは、RegExp は URL の一部とのみ一致すればよい。対象指定する場合は、次に一致する RegExp を定義する必要があります。付け足せます。

プロパティ

コンストラクタ

void

正規表現に [キャプチャグループ]https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#grouping-back-references、取得された値が workbox-routing~handlerCallback params 渡します。

constructor 関数は次のようになります。
```
(regExp: RegExp, handler: RouteHandler, method?: HTTPMethod) => {...}
```
- regExp
  
  RegExp
  
  URL に対して照合する正規表現。
- handler
  
  RouteHandler
  
  コールバック Response の結果を返す Promise を返します。
- method
  
  HTTPMethod（省略可）
- 戻り値
  RegExpRoute
catchHandler

RouteHandlerObject 省略可
handler

RouteHandlerObject
一致

RouteMatchCallback
method

HTTPMethod
setCatchHandler

void

setCatchHandler 関数は次のようになります。
```
(handler: RouteHandler) => {...}
```
- handler
  
  RouteHandler
  
  コールバック Response に解決する Promise を返す関数

Route

Route は、コールバック関数のペア「match」と、"handler" として指定します。「一致」ルートを「処理」に使用するかどうかが可能であれば、偽の値でない値を返すようにします。「handler」コールバック一致した場合に呼び出され、解決する Promise を返します。 Response にマッピング。

プロパティ

コンストラクタ

void

Route クラスのコンストラクタ。

constructor 関数は次のようになります。
```
(match: RouteMatchCallback, handler: RouteHandler, method?: HTTPMethod) => {...}
```
- 一致
  
  RouteMatchCallback
  
  ルートが特定のルールに一致するかどうかを判定するコールバック関数 fetch イベントを返します。
- handler
  
  RouteHandler
  
  コールバック Response に解決する Promise を返す関数です。
- method
  
  HTTPMethod（省略可）
- 戻り値
  ルート
catchHandler

RouteHandlerObject 省略可
handler

RouteHandlerObject
一致

RouteMatchCallback
method

HTTPMethod
setCatchHandler

void

setCatchHandler 関数は次のようになります。
```
(handler: RouteHandler) => {...}
```
- handler
  
  RouteHandler
  
  コールバック Response に解決する Promise を返す関数

Router

Router を使用すると、1 つ以上のリソースを使用して FetchEvent を処理できます。 workbox-routing.Route。次の場合に Response を返します。存在する必要があります。

指定されたリクエストに一致するルートがない場合、Router は「default」ハンドラを定義します。

一致する Route がエラーをスローした場合、Router は「catch」を使用して問題に適切に対処し、エラーメッセージで応答するように定義されている場合、リクエスト。

リクエストが複数のルートと一致する場合、登録された最も古いルートがリクエストへの応答に使用できます。

プロパティ

コンストラクタ

void

新しい Router を初期化します。

constructor 関数は次のようになります。
```
() => {...}
```
- 戻り値
  ルーター
ルート

Map<HTTPMethodRoute[]>
addCacheListener

void

ウィンドウからキャッシュに保存する URL のメッセージイベントリスナーを追加します。これは、ページが読み込まれる前にページに読み込まれたリソースをキャッシュに保存する場合に便利です。 Service Worker で制御が開始されました。

ウィンドウから送信されるメッセージデータの形式は、次のようになります。ここで、urlsToCache 配列は URL 文字列または URL 文字列 + requestInit オブジェクト（fetch() に渡すのと同じ）
```
{
  type: 'CACHE_URLS',
  payload: {
    urlsToCache: [
      './script1.js',
      './script2.js',
      ['./script3.js', {mode: 'no-cors'}],
    ],
  },
}
```
addCacheListener 関数は次のようになります。
```
() => {...}
```
addFetchListener

void

ルートが一致したときにイベントに応答する fetch イベントリスナーを追加します。返されます。

addFetchListener 関数は次のようになります。
```
() => {...}
```
findMatchingRoute

void

リクエストと URL（およびオプションでイベント）を、一致するものがあれば、対応する（一致によって生成されたすべてのパラメータを含む）

findMatchingRoute 関数は次のようになります。
```
(options: RouteMatchCallbackOptions) => {...}
```
- オプション
  
  RouteMatchCallbackOptions
- 戻り値
  オブジェクト
  
  route プロパティと params プロパティを持つオブジェクト。一致するルートが見つかったか、undefined した場合に入力されます。できません。
handleRequest

void

FetchEvent オブジェクトにルーティングルールを適用して、作成する必要があります。

handleRequest 関数は次のようになります。
```
(options: object) => {...}
```
- オプション
  
  オブジェクト
  - イベント
    
    ExtendableEvent
    
    イベントをトリガーしたイベントリクエストできます。
  - request
    
    リクエスト
    
    処理するリクエスト。
- 戻り値
  Promise<Response>
  
  Promise が返された時点で、登録されたルートでリクエストを処理できます。一致するものがない場合 defaultHandler がない場合、undefined が返されます。
registerRoute

void

ルーターにルートを登録します。

registerRoute 関数は次のようになります。
```
(route: Route) => {...}
```
- 経路
  
  ルート
  
  登録するルート。
setCatchHandler

void

リクエストの処理中に Route がエラーをスローした場合、この handler が呼び出され、レスポンスを返す機会が与えられます。

setCatchHandler 関数は次のようになります。
```
(handler: RouteHandler) => {...}
```
- handler
  
  RouteHandler
  
  コールバック Response の結果を返す Promise を返します。
setDefaultHandler

void

ルートが明示的に指定されていない場合に呼び出されるデフォルトの handler を定義する照合します。

各 HTTP メソッド（「GET」、「POST」など）は、それぞれ独自のデフォルトハンドラを取得します。

デフォルトハンドラがない場合、一致しないリクエストは Service Worker が存在しないものとみなします。

setDefaultHandler 関数は次のようになります。
```
(handler: RouteHandler, method?: HTTPMethod) => {...}
```
- handler
  
  RouteHandler
  
  コールバック Response の結果を返す Promise を返します。
- method
  
  HTTPMethod（省略可）
unregisterRoute

void

ルーターからルートの登録を解除します。

unregisterRoute 関数は次のようになります。
```
(route: Route) => {...}
```
- 経路
  
  ルート
  
  登録を解除するルート。

メソッド

registerRoute()

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

キャッシュ機能を使用して RegExp、文字列、関数を簡単に登録シングルトン Router インスタンスにデプロイします。

この方法では、必要に応じてルートが自動的に生成され、 workbox-routing.Router#registerRoute を呼び出します。

パラメータ

キャプチャ

string |正規表現 |RouteMatchCallback |ルート

キャプチャパラメータが Route の場合、他の引数はすべて無視されます。
handler

RouteHandler オプション
method

HTTPMethod（省略可）

戻り値

ルート

生成された Route。

setCatchHandler()

workbox-routing.setCatchHandler(
  handler: RouteHandler,
)

リクエストの処理中に Route がエラーをスローした場合、この handler が呼び出され、レスポンスを返す機会が与えられます。

パラメータ

handler

RouteHandler

コールバック Response の結果を返す Promise を返します。

setDefaultHandler()

workbox-routing.setDefaultHandler(
  handler: RouteHandler,
)

ルートが明示的に指定されていない場合に呼び出されるデフォルトの handler を定義する照合します。

デフォルトハンドラがない場合、一致しないリクエストは Service Worker が存在しないものとみなします。

パラメータ

handler

RouteHandler

コールバック Response の結果を返す Promise を返します。

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

ルーティングの実行方法

ルートでの照合と処理

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

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

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

Catch ハンドラを設定する

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

ルーターのロギング

高度な使用方法

型

NavigationRoute

プロパティ

NavigationRouteMatchOptions

プロパティ

RegExpRoute

プロパティ

Route

プロパティ

Router

プロパティ

メソッド

registerRoute()

パラメータ

戻り値

setCatchHandler()

パラメータ

setDefaultHandler()

パラメータ

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

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

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