workbox路由请求（译）

路由器将请求与路由匹配，然后处理该请求（即提供响应）的过程。

开发人员可以通过三种方式将请求与Workbox路由相匹配。

字符串
正则表达式
回调函数

我们首先看看如何使用这三种方法进行匹配，然后再讨论请求的处理，handler变量将在这里作为占位符。

用字符串匹配路由

将请求URL与路由字符串进行比较，如果它们相等，则请求将使用该路由handler。

我们定义一个路由'/logo.png'，如下：

workbox.routing.registerRoute(
  '/logo.png',
  handler
);

唯一需要注意的是，这只会与源站上的请求匹配。如果有一个单独的站点的URL是https://some-other-origin.com/logo.png，那么这个路由就不匹配了，因为在大多数情况下，这不是预期的。所以，您需要定义整个URL来匹配：

workbox.routing.registerRoute(
  'https://some-other-origin.com/logo.png',
  handler
);

用正则表达式匹配路由

正则表达式是根据网站的完整的URL匹配的，如果有匹配，handler会被触发；

下面提供了一些灵活使用的例子，如匹配文件扩展名：

workbox.routing.registerRoute(
  new RegExp('\\.js$'),
  jsHandler
);

workbox.routing.registerRoute(
  new RegExp('\\.css$'),
  cssHandler
);

或者可以编写特定URL格式的正则表达式：例如，遵循格式/blog/<year>/<month>/<post title slug>的博客

workbox.routing.registerRoute(
  new RegExp('/blog/\\d{4}/\\d{2}/.+'),
  handler
);

就像字符串匹配一样，不同来源的请求也会得到不同的处理。正则表达式必须从URL的开头匹配，而不是与URL的任何部分匹配，防止在跨源请求时触发handler.

例如，前一个正则表达式new regexp（“/blog/\d/\4/\d 2/.+”）与https://some other origin.com/blog/<year>/<month>/<post title slug>的请求不匹配。如果我们想要这个路由与拥有相同路径模式的跨源请求相匹配，那么可以使用带有通配符（.+）的正则表达式：

workbox.routing.registerRoute(
  new RegExp('.+/blog/\\d{4}/\\d{2}/.+'),
  handler
);

用回调函数匹配路由

为了让开发人员随心所欲的匹配请求，我们提供了一个函数，该函数可以任意定义。
回调将接收一个函数对象。

const matchFunction = ({url, event}) => {
  // Return true if the route should match
  return false;
};

workbox.routing.registerRoute(
  matchFunction,
  handler
);

怎么为与路由匹配的请求提供响应呢？

这里提供了两种方法：

使用Workbox.Strategies提供的缓存策略。
提供回调函数，该函数返回一个处理响应的promise

使用缓存策略处理请求

大多数路由都可以通过一种内置的缓存策略来处理

Stale While Revalidate

此策略优先使用缓存获取数据，于此同时，使用网络响应在后台更新缓存。（如果没有缓存，则会等待网络响应）。这是一个相当安全的策略，因为这意味着用户定期更新缓存。这种策略的缺点是，它总是从网络请求资源，消耗用户带宽。

Network First

优先从网络请求获取数据，并将其保存在缓存中，如果请求是失败的，则从上次缓存中获取数据。

Cache First

优先从缓存中获取数据，如果请求不存在缓存中，则使用网络请求，并在传递到浏览器之前将任何有效响应添加到缓存中。

Network Only

强制所有的数据都通过网络请求获取

Cache Only

强制所有的数据都通过缓存获取

简单使用示例：

workbox.routing.registerRoute(
  match,
  new workbox.strategies.StaleWhileRevalidate()
);

workbox.routing.registerRoute(
  match,
  new workbox.strategies.NetworkFirst()
);

workbox.routing.registerRoute(
  match,
  new workbox.strategies.CacheFirst()
);

workbox.routing.registerRoute(
  match,
  new workbox.strategies.NetworkOnly()
);

workbox.routing.registerRoute(
  match,
  new workbox.strategies.CacheOnly()
);

针对每个缓存策略，您都可以通过添加插件的形式自定义缓存某些选项，以便确保其更安全（例如限制缓存的时间或大小）。

new workbox.strategies.StaleWhileRevalidate({
   // Use a custom cache for this route.
  cacheName: 'my-cache-name',

  // Add an array of custom plugins ...
    plugins: [
    ...
  ]
});

使用自定义的回调函数处理请求

在某些情况下，您可能希望使用自己定义的策略来响应请求，或者只是使用模板在servicer worker中生成请求。为此，您可以提供一个async函数，它返回一个响应对象。入参有URL和事件（fetchvent）。

const handler = async ({url, event}) => {
  return new Response(`Custom handler response.`);
};

workbox.routing.registerRoute(match, handler);

如果在match回调中返回一个值，它将作为params参数传递到handler回调中。

const match = ({url, event}) => {
  return {
    name: 'Workbox',
    type: 'guide',
  };
};

const handler = async ({url, event, params}) => {
   // Response will be "A guide to Workbox"
  return new Response(
    `A ${params.type} to ${params.name}`
  );
};
workbox.routing.registerRoute(match, handler);

以上为workbox 官网route-requests章节的搬运，如理解有误，请指正，感谢；

原文： route-requests