- 服务工作者不能缓存作为背景图像使用的资源图像
- 模拟网络断开后,服务工作者最初从缓存中获取文件(除了之前提到的未缓存文件),但在第二次刷新时会出现错误。
以下是我问题的更详细报告。您可以通过克隆我制作的用于突出显示此问题的库(在此处)来跟随。
我使用提供的--service-worker标签创建了应用程序。然后,我确保遵循了Angular文档(此处)上列出的5个步骤,即:
- 添加服务工作者包。
- 将angular-cli.json设置为true。
- 在app.module.ts中导入并注册服务工作者。
- 生成并按照文档中描述的方式配置了ngsw-config.json。
- 运行ng build --prod以在我的应用程序dist文件夹中生成捆绑包。
我使用node/express和server.js文档来提供我的应用程序。当我在隐身窗口中打开应用程序(如文档中所建议的)时,我看到我的服务工作者被注册,并且缓存存储了我的捆绑包和索引文件。它还将用于img标记的图像缓存,但不会缓存在我的css background-image中指定的图像。当我通过在服务工作者上勾选离线框,然后刷新页面来模拟网络问题时,页面正确显示除了需要背景图像的部分。
但最终/主要问题发生在我第二次刷新应用程序或打开另一个标签页(在同一隐身窗口中,因此服务工作者仍然被注册并且缓存仍然处于活动状态)。此时,我没有看到任何显示。控制台给出了三个错误:
- GET http://localhost:3000/favicon.ico net::ERR_INTERNET_DISCONNECTED
- An unknown error occurred when fetching the script.
- Failed to load resource: net::ERR_INTERNET_DISCONNECTED
最后一个错误来自ngsw-worker.js。我不太确定这些错误的含义。我认为可能是尝试注册新的服务工作者,但我不确定为什么会发生这种情况...
这是我请求的ng-config.json文件:
{
"index": "/index.html",
"assetGroups": [{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html"
],
"versionedFiles": [
"/*.bundle.css",
"/*.bundle.js",
"/*.chunk.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
}]
}
任何关于此事的帮助都将不胜感激!谢谢大家。
更新
我注意到当我在没有运行服务器的情况下访问localhost:3000时,会出现以下错误:
Uncaught (in promise) Error: Response not Ok (fetchAndCacheOnce): request for http://localhost:3000/assets/images/background-silver-grainy.jpg returned response 504 Gateway Timeout
我也遇到了错误:
Failed to load resource: the server responded with a status of 504 (Gateway Timeout)
来自我的所有资源
更新2
我一直在使用node测试这个项目,使用express应用程序来处理所有请求并将其指向位于dist文件夹中的angular应用程序(在运行ng build --prod后生成)。我决定在一个简单的http服务器上进行测试。我还发现,直接重新加载会破坏我的服务工作者,但如果我导航到另一个页面,然后返回到我的原始页面,服务工作者就可以工作(奇怪但与此问题无关)。
不过,我仍然无法让服务工作者与express一起工作...
ng build --prod
生成的dist文件夹中)。 - Stephen Agwu