kin*_*rds 5 jhipster webpack service-worker progressive-web-apps angular
使用 jhipster-6.2 生成的项目,我在将 Spring + Angular 应用程序转换为渐进式 Web 应用程序 (PWA) 时遇到了问题。我的 service-worker 成功注册,但一旦我的应用程序部署到生产环境就不会提供离线功能。在我的控制台中,我得到一个bad-precaching-response
, 似乎至少是一个 CSS 文件。对于本地部署,缓存工作。
为了成功注册我的 service-worker,我取消了 serviceWorker 相关代码的注释,index.html
以便我有这个:
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js')
.then(function () {
console.log('Service Worker Registered');
});
});
}
</script>
Run Code Online (Sandbox Code Playgroud)
我通过 Workbox 插件成功生成了我的 service worker:
new WorkboxPlugin.GenerateSW({
clientsClaim: true,
skipWaiting: true
})
Run Code Online (Sandbox Code Playgroud)
manifest.webapp
我的 webapp 目录中有我的:
{
"name": "<truncated>",
"short_name": "<truncated>",
"icons": [
<truncated>
],
"theme_color": "#000000",
"background_color": "#e0e0e0",
"start_url": ".",
"display": "standalone",
"orientation": "portrait"
}
Run Code Online (Sandbox Code Playgroud)
对于本地部署,Workbox 会按预期进行缓存。但是,它在生产中失败了。
当我通过 Heroku 部署时,我强制https
. 在完成上述步骤后首次部署后,我必须更新我的内容安全策略以包含worker-src 'self' https://storage.googleapis.com/* blob:
. 虽然这解决了我最初的安全问题,但现在我的控制台中出现了这个错误,并进行了实时生产部署:
Uncaught (in promise) bad-precaching-response:
bad-precaching-response :: [{"url":"https://<truncated>/swagger-ui/dist/css/typography.css?__WB_REVISION__=d41d8cd98f00b204e9800998ecf8427e",
"status":404}]
Run Code Online (Sandbox Code Playgroud)
当我点击该链接时,我进入了一个由于违反 CSP 而返回 404 的页面:
Refused to load the script 'https://linkhelp.clients.google.com/tbproxy/lh/wm?sourceid=wm&url=https%3A%2F%<truncated>.herokuapp.com%2Fswagger-ui%2Fdist%2Fcss%2Ftypography.css%3F&hl=en&site=<truncated>.herokuapp.com&error=http404&js=true'
because it violates the following Content Security Policy directive:
"script-src 'self' 'unsafe-inline' 'unsafe-eval' https://storage.googleapis.com https://linkhelp.clients.google.com/* https://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js blob:".
Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
Run Code Online (Sandbox Code Playgroud)
我相信如果400
来自 url 的任何 <响应,service-worker 不会缓存任何东西(有充分的理由),这意味着我的 service-worker 在生产中根本不工作。但是,尽管将linkhelp
资源列入白名单,错误仍然发生。我担心我在调整安全设置方面走错了路,可能会遗漏一些关于服务工作者的基本知识,这是我的新手。
我已经通过谷歌搜索找到了许多指南,jhipster pwa
但最终都在同一个地方。这些指南包括:
预期结果:生产部署允许像本地部署一样的离线功能。灯塔审计成功。
实际结果:产品部署不允许离线功能。灯塔审计失败。
通过添加到in调用中的swagger-ui
配置,从工作箱预缓存清单中排除。大多数用户不会访问该页面,因此最好将其从预缓存中排除。exclude: [/swagger-ui/]
WorkboxPlugin.GenerateSW
webpack/webpack.prod.js
new WorkboxPlugin.GenerateSW({
clientsClaim: true,
skipWaiting: true,
exclude: [/swagger-ui/]
})
Run Code Online (Sandbox Code Playgroud)
这样一来,满分唯一缺少的就是apple-touch-icon
归档时间: |
|
查看次数: |
7798 次 |
最近记录: |