我几乎完全设置为具有应用程序外壳架构的 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