1

我几乎完全设置为具有应用程序外壳架构的 pwa,使用类似前端的反应(但使用秘银作为渲染引擎)和 express node.js 后端和 ssr,但在最后一个问题上很难通过。

更新:我们也快速使用缓存和我们的 CDN。它在开发上都被禁用了,但也许有些标题正在偷偷摸摸并搞砸了?

我正在使用 registerNavigationRoute 注册我的 html 文件,该文件也通过 precache 和 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 文件的链接https://gist.github.com/nikse/11c531382f136e703bf20648f9421948

4

1 回答 1

1

(将其从评论移至答案。)

你的电话registerNavigationRoute()看起来像:

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

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

于 2017-08-17T18:44:35.247 回答