登录后注册路由 - google workbox sw

Question

我有一个用 vanilla js 编写的 SPA，它处理前缀为 - /mail 的路由，我想在此处缓存应用 shell 并将其用于所有子路由，例如 /mail/settings， /mail/inbox...等等，登录后，此 SPA 由 app.html 提供服务。所以我用这个 -

//this has to be precached for the below  createHandlerBoundToURL
workbox.precaching.precacheAndRoute([{
  url:"/mail"
}
])

var pagesRouteHandler = workbox.precaching.createHandlerBoundToURL('/mail');
//I need this for dynamic url caching,
var navigationRoutes = new workbox.routing.NavigationRoute(pagesRouteHandler, {
  allowlist: [
    new RegExp('/mail/*'),
  ],
});
workbox.routing.registerRoute(navigationRoutes);

我在登录后注册 Service Worker 时效果很好。(navigator.serviceWorker.register('/sw.js');)

但是现在，我还想缓存 login/signup 屏幕，它们是单独的 html 文件，即在 SPA 之外。当我在这些 html 文件中注册 service worker 时，上面的代码尝试通过发出 get 请求来预缓存 /mail 路由。但是在没有服务器会话的情况下，响应将是服务器重定向到登录页面，因此相同的 login.html 将被预缓存为 /mail 路由，而不是实际的 SPA shell( html).

所以，我想在登录后或正确注册/mail 路由后注册上面的/mail 和动态路由（就像在注册/mail 路由的回调中）。我该怎么做？

注意：在没有用户会话的情况下，我无法从服务器将 app.html 发送到 /mail（作为应用程序 shell），因为它是使用用户值呈现的模板。

Answer 1

我通过以下方法解决了这个问题，我没有预先缓存根路径，而是将其缓存为普通路由，

workbox.routing.registerRoute("/mail",new workbox.strategies.StaleWhileRevalidate({
  cacheName: "appShell",
}));

对于所有子路由（因为它们由前端本身处理并且需要相同的“/mail”应用程序shell），我正在注册一个要从缓存中处理的 RegExp 路由。

workbox.routing.registerRoute(({ url, event }) => {
    return new RegExp(/(\/mail\/.*)/).test(url.pathname);
  }, ({ url, event, params }) => {
      if (event.request.mode === "navigate") {
        // Always respond to navigations with the cached /mail, regardless of the underlying event.request.url value.
        event.respondWith(caches.match("/mail"));//cache.match(...) is a promise
      } 

  };);

虽然这对我有用，但我想要一个更明智、更好的解决方案，可能是一些库内置功能。

还有一个问题是，如果由于某种原因删除了缓存“/mail”，那么即使网络连接打开，页面也会显示离线。

登录后注册路由 - google workbox sw

registerRoutes after login - google workbox sw

javascript

service-worker

workbox