1、什么是Workbox Routing？

service worker可以拦截网页的网络请求，它可以把从网络请求中缓存的或在Serv worker中请求获取的内容，返回给浏览器。也就是说浏览器不会再直接与服务器交互，转而全权由service worker代理。

workbox-routing是一个模块，可以很容易地将这些请求“路由”映射到不同的响应，并提供设置相应策略的方法。

2、如何执行routing

当一个网络请求触发了service worker的fetch事件时，workbox-routing将尝试使用提供的路由和处理程序响应请求。

从上图中，我们可以知道以下几件重要的事情：

请求的类型很重要。默认情况下，路由已注册了“GET”请求的事件监听。如果开发者希望拦截其他类型的请求，则需要指定额外的方法。
路由注册的顺序很重要。如果注册了多个可以处理请求的路由，则首先注册的路由将优先响应请求。

有几种方法可以注册路由，开发者可以使用回调，正则表达式或路由实例，我们将在下面介绍每个实例。

3、路由的匹配和处理

workbox 的“路由传入了两个函数：一个“匹配”函数，用于确定路由是否应该与请求匹配，一个“处理”函数，它应该处理请求并响应。

Workbox提供了一些构造器，它们将执行匹配和处理，但如果想要不同的行为或响应，那么开发者可以编写自定义匹配和处理函数。

匹配函数将被赋予FetchEvent和URL对象，开发者可以通过返回truthy值来匹配请求。举一个简单的例子，匹配特定的URL，如下所示：

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

通过来检查/测试url或event.request匹配的请求，可以涵盖大多数情况。

“处理程序”也将被赋予URL和事件，可以确定如何响应，无论是来自网络，还是来自缓存，还是生成在service worker中。

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

handler必须返回一个处理response的promise方法，使用如下方法可以注册这些回调

workbox.routing.registerRoute(matchCb, handlerCb);

唯一的限制是“匹配”必须同步返回一个truthy值，你不能执行任何异步工作。这样做的原因是Router 必须同步响应获取事件或允许下发到其他的获取事件。

“handler”回调应该返回一个解析为Response的Promise。响应的来源取决于开发者，网络缓存或service worker生成的响应。

通常，“处理程序”回调将使用workbox-strategy提供的策略之一，如下所示：

workbox.routing.registerRoute(
  matchCb,
  workbox.strategies.staleWhileRevalidate()
);

在此本文中，我们将重点关注workbox-routing，但你可以在workbox.strategies上了解有关这些策略的更多信息。

3、如何注册正则表达式路由

通常的做法是使用正则表达式而不是“匹配”回调。 Workbox使这很容易实现，如下所示：

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

对于同源的请求，只要请求的URL与正则表达式匹配，此正则表达式就会匹配。

上述三个路由都将被匹配

但是，对于跨域请求，正则表达式必须使用完整的URL开头匹配。这样做的原因是，使用正则表达式new RegExp（'/ styles /.* \ .css'）不太可能与第三方CSS文件完全匹配。

如果你想匹配本地和第三方，可以在正则表达式的开头使用通配符，但这应该谨慎进行，以确保它不会在Web应用程序中导致意外行为。

4、如何注册 Navigation Route

如果站点是单页面应用程序，则可以使用NavigationRoute返回所有导航请求的特定响应。

workbox.routing.registerNavigationRoute('/single-page-app.html');

每当用户在浏览器中访问你的网站时，该页面的请求将成为导航请求，并将在缓存页面“/single-page-app.html”中提供。（注意：你应该通过workbox-precaching或通过自己的安装步骤缓存页面）。

默认情况下，这将响应所有导航请求，如果您希望将其限制为响应URL的子集，则可以使用白名单和黑名单选项来限制哪些页面将匹配此路由。

workbox.routing.registerNavigationRoute('/single-page-app.html', {
  whitelist: [
    new RegExp('/blog/')
  ],
  blacklist: [
    new RegExp('/blog/restricted/'),
  ]
});

唯一需要注意的是，如果URL同时位于白名单和黑名单中，黑名单优先。

5、设置默认的处理函数

如果要为与路径不匹配的请求提供“处理程序”，则可以设置默认处理程序。

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

6、设置catch handler

如果您的任何路由抛出错误，您可以通过设置catch处理程序来优雅地捕获和下发。

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

7、定义非GET请求的路由

默认情况下，所有路由都假定为“GET”请求。

如果您想路由其他请求，例如“POST”请求，则需要在注册请求时定义方法，如下所示：

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

8、Router 日志

您应该能够使用来自workbox-routing的日志确定请求的流程，该日志将突出显示通过Workbox处理的URL。

9、高级用法

如果您希望更好地控制何时向Workbox Router发出请求，您可以创建自己的路由器实例，并在需要使用路由器响应请求时调用它的handleRequest（）方法。

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

直接使用路由器时，您还需要使用Route类或任何扩展类来注册路由。

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

笔者个人订阅号~欢迎小伙伴们关注

微信公众号-感谢关注

若有疑问可以QQ联系笔者，虽然不一定100%解决你的问题，但是可以交流探讨一波：2276604211

顺便打个广告：如果有想入职中国银联上海技术开发的童鞋，也可以加上面的QQ资讯，笔者可以帮你回答一些相关问题~~

【前-workbox-模块4】workbox.routing