Workbox.js registerNavigationRoute 不是 finding/loading html 文件

Question

我几乎完全设置为具有应用程序 shell 架构的 pwa，使用类似前端的反应（但使用 mithril 作为渲染引擎）和快速 node.js 后端和 ssr ，但在最后一期上努力通过。

更新：我们也在快速使用缓存和作为我们的 cdn。它在开发人员中全部禁用，但也许有些 headers 偷偷摸摸地搞砸了？

我正在使用 registerNavigationRoute 注册我的 html 文件，该文件也通过预缓存和 workbox-build 缓存。我的服务工作者在第一次加载或硬刷新时注册正常，但是当我尝试进行定期刷新时，我收到此错误消息

The FetchEvent for "http://localhost:8000/article/35474-a-fear-of-heights-
doesn-t-stop-this-dad-from-seeing-a-thrilling-view" resulted in a network 
error response: an object that was not a Response was passed to 
respondWith().
Promise resolved (async)
self.addEventListener @ router.js:140

在 router.js 文件的第 140 行附近，我看到了这条消息

message: 'The router is managing a route with a response.',

所以我猜我的节点路由搞砸了？不过我不太确定，如有任何帮助，我们将不胜感激！

这是我的构建设置

gulp.task "serviceworker", ->
  options =
    globDirectory: "./dist/app/"
    swSrc: "./dist/app/workbox.js"
    swDest: "./dist/app/service-worker.js"
    globPatterns: [
      "shell.html"
      "head.js"
      "client.js"
      "ads.client.js"
      "css\/inline.css"
      "css\/main.css"
      "icons\/*.png"
      "favicons\/*.png"
      "fonts\/{oswald,pt-sans,icomoon}*.woff2"
    ]

   options.dontCacheBustUrlsMatching = /icomoon\.woff2$/

   unless debug
     options.dontCacheBustUrlsMatching = /(icomoon\.woff2|\.(js|css))$/

   workboxbuild.injectManifest(options).then () ->
     console.log "Service workers generated."
   .catch (err) ->
     console.log "[ERROR] This happened: #{err}"

这是我的导航路线

 workboxSW.router.registerNavigationRoute("shell.html", {
     cacheName: "inverse-shell",
     whitelist: [
         /^\/$/,
         /^\/(article|channel)/,
         /^\/(science|mind-and-body|culture|innovation|entertainment)$/
     ],
     blacklist: [
        /^\/(sitemap|feed|amp|inews)/,
        /^\/(user|about|archive|browse|search)/,
        /^\/(newsletter|privacy-policy|terms-of-service|dmca)$/
    ]
});

更新：这是我完全生成的 sw.js 文件的 link https://gist.github.com/nikse/11c531382f136e703bf20648f9421948

Answer 1

（将此从评论移至答案。）

您对 registerNavigationRoute() 的调用如下所示：

workboxSW.router.registerNavigationRoute("shell.html", {
  cacheName: "inverse-shell",
  whitelist: [...],
  blacklist: [...]
});

您可以尝试删除 registerNavigationRoute() 的 cacheName: 'inverse-shell' 设置吗？您的 shell.html 不在具有该名称的缓存中 — 它在用于传递给 precache() 的内容的缓存中，并且这已经是 registerNavigationRoute() 看起来的默认位置。

Workbox.js registerNavigationRoute 不是 finding/loading html 文件

Workbox.js registerNavigationRoute not finding/loading html file

service-worker

progressive-web-apps

server-side-rendering

workbox