我从未让Angular Mobile Team的服务工作者正常工作,此时我想我忘了启用某些东西,因为它从最初的版本开始就没有用过。即使它在我离线时在谷歌浏览器(智能手机和桌面)上安装并运行它也不再起作用,它也会在更新后随机崩溃。
没有关于如何设置的文档。所以我就是这样做的:
ng new test-service-worker
npm install @angular/service-worker
.angular-cli.json
中,我添加了"serviceWorker": true
npm build --prod
,输出ngsw-manifest.json
sw-register.b73048fe3d9f8a1e7ae5.bundle.j
和worker-basic.min.js
。所以一切都好看failed to load
错误。 生成的dist
目录:
生成的ngsw-manifest.json
:
安装并运行的服务工作者: 可用的测试https://test-service-worker-97321.firebaseapp.com/
当我将chrome devtools选项设置为Offline
和Disable cache
时,服务工作人员不再加载内容。关于它应该如何工作的一个很好的例子是Twitter,他们的网络应用程序在Offline
和Disable cache
被检查时有效。
注意:我之前与服务工作者创建了一些应用程序,并且他们在Chrome上正常运行。我不知道我在这里做错了什么。
答案 0 :(得分:8)
您必须在离线模式下测试您的应用,并明确提及index.html
。我检查了https://test-service-worker-97321.firebaseapp.com/index.html - 它工作正常。
如果您希望您的应用在脱机状态下工作而未提及索引文档(以及所有其他路线),则必须设置route redirection
见the example。此自定义ngsw-manifest.json
将在构建期间与自动生成的自定义session_start()
合并。
答案 1 :(得分:1)
在Maxim的帮助下,我沿着与询问人相同的路径,设法将离线功能添加到现有静态网络并在Firebase上部署。根文件夹上的custom manifest应如下所示,它们最终将与自动生成的清单合并:
{
"routing": {
"index": "/index.html",
"routes": {
"/": {
"prefix": false
},
"/home": {
"prefix": false
},
"/work": { // any routes starting with '/work'
"prefix": true
}
}
},
"external": {
"urls": [
{
"url": "https://fonts.googleapis.com/css?family=Quicksand"
}
]
}
}