PWA: Workbox Routing 和訳 (その２)

Workbox Routing

参照元ページ: https://developers.google.com/web/tools/workbox/modules/workbox-routing

Navigation Routeの書き方

あなたのサイトがSPA(シングルページアプリケーション)なら、navigation requestsに対するすべてのレスポンスにはNavigationRouteが使えます。

補足: navigation requestsの詳しい説明はこちら。ざっくり言うと「ナビゲーションリクエストとは、『document』を宛先とするリクエストである」とのことです。

workbox.routing.registerNavigationRoute(
  // 事前に'/single-page-app.html'がプリキャッシュされているとします
  // 一致するキャッシューキーを取得します
  workbox.precaching.getCacheKeyForURL('single-page-app.html')
)

*参考: getCacheKeyForURLはurlを引数にとりキャッシュキー(string型)を返します。もしurlが/index.htmlの様にバージョニングされていなければ、キャッシュキーは（searchパラメータ付きの）url自身になります。

ユーザーがブラウザからあなたのサイトにアクセスするたび、ページへのリクエストはnavigation request扱いになり、キャッシュされた/single-page-app.htmlがレスポンスとしてサーブされます。(注: workbox-cachingもしくはご自身のインストールステップ経由でページを事前にキャッシュしている場合)

デフォルトではすべてのnavigation requestsに適用されます。もしURLのサブセットのみに適用を制限知る場合は、whitelistとblacklistでルーティングとマッチしたページをターゲットとすることが可能です。

workbox.routing.registerNavigationRoute(
  // 事前に'/single-pafe-app.html'がプリキャッシュされているとします
  // 一致するキャッシューキーを取得します
  workbox.precaching.getCacheKeyForURL('single-page-app.html', {
  whitelist: [
    new RegExp('/blog/')
  ],
  blacklist: [
    new RegExp('/blog/restricted/'),
  ]
  })
)

whitelistとblacklistに同じURLが指定されている場合はblacklistの指定が生かされます。

Default Handlerの設定

ルートとマッチしていないリクエストに対して「ハンドラー」を設定したい場合、default handlerを使うことができます。

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

Catch Handlerの設定

リクエストを捌いている時、ルートの設定がエラーとなってしまう場合は、catch handlerでレスポンスを設定
できます。

workbox.routing.setCatchHandler(({event}) => {
  if (event.request.mode === 'navigate') {
    return caches.match('/error-page.html');
  }
  return Response.error();
})

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

デフォルトでは全てのルートはGETリクエストを想定しています。

POSTなど他のリクエストのルートを設定したい場合、リクエストを登録する際にメソッドを定義する必要があります。

workbox.routing.registerRoute(
  matchCb,
  handlerCb,
  'POST'
)

workbox.routing.regiterRoute(
  new RegExp('/api/.*\.json'),
  handlerCb,
  'POST'
)

ルーターのログ

workbox-routingはWorkboxで処理されるURLをハイライト表示してログを返してくれます。

ログを詳細に表示させるにはログレベルをdebugに設定します。詳細はこちら

補足:

workbox.core.setLogLevel(workbox.core.LOG_LEVELS.debug);

　応用編

handleRequest()メソッドを使用すればルーティングの細かな設定が可能です。

const router = new DefaultRouter();
self.addEventListener('fetch', (evebt => {}
  const responsePromise = router.handleRequest(event);
  if (responsePromise) {
  // 指定したリクエストを捌くルートが見つかったとき
   event.respondWith(responsePromise)
  } else {
    リクエストを捌くルートが見つからないとき
  }
))

Routerを直接使ってルートを設定する場合、Routeクラスもしくはextendされたクラスを使う必要があります。

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