在 Workbox 中注册非导航路由

Question

有没有办法在Workbox中只匹配非导航请求？例如，我有一个包含多个 AMP 页面的应用程序，我想在我的应用程序 shell 中注入这些页面，因此我拦截了对这些页面的所有导航并使用 shell 进行响应，如下所示：

workboxSW.router.registerNavigationRoute('shell.html', {
  whitelist: [/./]
});

我还想拦截所有其他请求并使用缓存优先策略处理它们，如下所示：

workboxSW.router.registerRoute('/*',
  workboxSW.strategies.cacheFirst()
);

但是这条路线与第一条路线重叠。我可以用以下代码替换这两条路线以获得我正在寻找的行为：

workboxSW.router.registerRoute('/*', args => {
  if (args.event.request.mode !== 'navigate') {
    return workboxSW.strategies.cacheFirst().handle(args);
  }
  return caches.match('/shell.html', {ignoreSearch: true});
});

但是 request.mode 是 not supported by several mobile browsers（甚至一些支持 Service Worker 的）并且有一些失败的极端情况。

是否有一种方便、最佳实践的方式来匹配非导航请求？

Answer 1

首先，您使用如此宽泛的正则表达式是在自找麻烦。

一个简单的步骤是首先为您知道的请求添加一个路由，可以首先缓存而不是导航路由（即具有 js 等扩展名的路径，css, png, jpg).

然后 - 使用您对构建的了解来匹配其他请求（即所有网络请求的页面都以 html 结尾，或者您是否有漂亮的 url 以斜杠结尾？）。

您实际上可能只想添加一个默认路由，这样如果没有匹配的路由，则回退到默认值并让它服务于 shell。

在 Workbox 中注册非导航路由

Register non-navigation routes in Workbox

workbox