我可以同时拥有Workbox寄存器路由和Service Worker获取事件处理程序吗？

Question

我正在构建一个PWA应用程序，我已经为一些apiendpoint使用了workbox registerroute，以及一个显式的服务工作者获取事件侦听器。在调试一些缓存问题时，我注意到这两个问题似乎相互干扰。具体来说，有时不会触发fetch处理程序—这会给调试带来麻烦—我假设这是由于我通过workbox设置的registerroute缓存策略造成的。

我的问题是，我可以只选择其中一个，而不是同时使用fetch处理程序和registerroute吗？在我的例子中，我需要FetchHandler来处理一些与POST请求相关的高级缓存。因此，我认为如果我只能选择一个，我将不得不坚持使用fetch处理程序。

Answer 1

首先，这里有一些关于active service worker中有多个fetch事件处理程序时会发生什么的背景信息。

考虑到这些背景信息，有几种方法可以实现您所描述的内容。

只要您先注册自己的fetch处理程序，然后再调用Workbox的registerRoute（），就可以保证在响应传入的fetch事件时有“第一枪”。

需要记住的是，您自己的fetch处理程序需要同步决定是否html" target="_blank">调用事件。respondWith（），以及何时调用事件。respondWith（），则Workbox的路由将不用于响应给定的请求。

因此，您可以执行以下操作：

self.addEventListener('fetch', (event) => {
  // Alternatively, check event.request.headers,
  // or some other synchronous criteria.
  if (event.request.url.endsWith('.json')) {
    event.respondWith(customResponseLogic(event));
  }
});

// Then, include any Workbox-specific routes you want.
registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst()
);

// The default handler will only apply if your own
// fetch handler didn't respond.
registerDefaultHandler(new StaleWhileRevalidate());

这类似于1a，但主要的事情是确保您没有一个“包罗万象”的路由来匹配所有的请求，并且您不使用寄存器DefaultHandler（）。

假设你的Workbox路由只匹配一组特定的定义良好的标准，而不匹配你想要在你自己的处理程序中响应的任何请求，那么你如何排序就不重要了：

// Because this will only match image requests, it doesn't
// matter if it's listed first.
registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst()
);

self.addEventListener('fetch', (event) => {
  // Alternatively, check event.request.headers,
  // or some other synchronous criteria.
  if (event.request.url.endsWith('.json')) {
    event.respondWith(customResponseLogic(event));
  }
});

（在“引擎盖下”发生的事情是，如果没有一个路由的同步匹配处理程序返回真实值，Workbox的路由将不会调用事件。respondWith（））

使用Workbox处理所有路由应该是可行的，并在handlerCallback（更简单）或Strategy基类的自定义子类中运行自定义响应生成代码（更可重用，但简单使用会过头案例）。

需要记住的一点是，如果您处理POST请求，您需要明确地告诉registerRoute（）响应它们，方法是将'POST'作为（可选）第三个参数传入。

下面是一个示例，说明了如何执行此操作，假设您的自定义逻辑是在customResponseLogic（）函数中定义的：

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst()
);

registerRoute(
  // Swap this out for whatever criteria you need.
  ({url}) => url.pathname.endsWith('.json'),

  // As before, this assumes that customResponseLogic()
  // takes a FetchEvent and returns a Promise for a Response.
  ({event}) => customResponseLogic(event),

  // Make sure you include 'POST' here!
  'POST'
);