第一次使用 Angular Service Worker 获取 index.html 失败答案

【问题标题】：Failed to get index.html with Angular service worker first time第一次使用 Angular Service Worker 获取 index.html 失败
【发布时间】：2022-10-08 05:44:43
【问题描述】：

我使用服务人员继承了一个 Angular 应用程序。

有时当我刷新页面一小会儿时，我会看到一个 Chrome 错误页面：

并且就在显示真实页面之后。

当我签入网络选项卡时，我有这些：

因此，由于网络问题，第一个页面加载失败，然后服务工作者提供完全相同的页面。

我能够在本地服务器上重现它，所以我怀疑这是一个真正的网络错误（并且所有其他文件都可以毫无问题地加载）。

在服务人员日志中，我得到：

Console: {"lineNumber":0,"message":"The FetchEvent for "https://..." resulted in a network error response: the promise was rejected.","message_level":2,"sourceIdentifier":1,"sourceURL":""}
Console: {"lineNumber":0,"message":"Uncaught (in promise) UnknownError: Unexpected internal error.","message_level":3,"sourceIdentifier":1,"sourceURL":"https://.../ngsw-worker.js"}

在 Angular 中，我们的配置看起来很简单，根模块中的导入：

ServiceWorkerModule.register('./ngsw-worker.js', {
  enabled: true,
}),

对于我的测试，“true”是硬编码的，但它在配置文件中。在某些环境中它被禁用然后我们不再有这个问题......

ngsw 配置：

{
"index": "/index.html",
"assetGroups": [
{
  "name": "app",
  "installMode": "prefetch",
  "resources": {
    "files": [
      "/favicon.ico",
      "/manifest.json",
      "/index.html",
      "/*.css",
      "/*.js"
    ]
  }
}
]
}

@角/核心：~13.2.3 @角/服务工作者：^13.2.3

欢迎任何帮助/提示！

更新。

我从我的 ngsw-config.json 文件中删除了 index.html 以防止它被服务工作者缓存：

“指数”： ””， “资产组”：[ { “名称”：“应用程序”， "installMode": "预取", “资源”： { “文件”：[ "/favicon.ico", "/manifest.json", "/.css", "/.js" ] } }]

它确实不再是缓存，但它仍然被服务工作者拦截，有时它仍然出错：

【问题讨论】：

你可以参观吗localhost:xxxxx/ngsw-worker.js?那你看到了什么？

标签： angular service-worker

【解决方案1】：

你可以试试：

在文件 index.html 中，添加这一行
<base href="/">
1. 还有文件ngsw-config.json，不需要缓存文件index.html"index": "",。有时无需缓存索引文件即可始终正确运行最新代码。
希望这有帮助！

【讨论】：