Angular服务工作者 - 无法加载资源：服务器响应状态为504（网关超时）

Question

我正在使用 Angular-CLI 1.6.6, @angular/service-worker 5.2.5, 在我们的 Angular 5.2.5 应用程序中。在本地的lite-server上以及生产服务器上，一切工作正常，除了一个错误信息在我们的生产环境中弹出：

Failed to load resource: the server responded with a status of 504 (Gateway Timeout)

查看 ngsw-worker.js 脚本，我发现在之后的2466行生成了上述错误消息：

    async safeFetch(req) {
        try {
            return await this.scope.fetch(req);
        }
        catch (err) {
            this.debugger.log(err, `Driver.fetch(${req.url})`);
            return this.adapter.newResponse(null, {
                status: 504,
                statusText: 'Gateway Timeout',
            });
        }
    } 

在 catch 中记录错误(console logging err) 会输出以下错误：

    TypeError: Failed to execute 'fetch' on 'ServiceWorkerGlobalScope': 'only-if-cached' can be set only with 'same-origin' mode
        at Driver.safeFetch (ngsw-worker.js:2464)
        at Driver.handleFetch (ngsw-worker.js:1954)
        at <anonymous>

这个错误似乎和这个问题相关：什么原因导致了一个“Failed to execute 'fetch' on 'ServiceWorkerGlobalScope': 'only-if-cached' can be set only with 'same-origin' mode”错误？

产生此错误的请求是应用程序的任何首次访问：

https://example.com/test/#/connect
https://example.com/test/#/map?token=[accestoken]
...

在应用程序重新加载时，错误不会重复出现。请问有人可以帮忙吗？是不是safeFetch()中的一个错误（可能是为了支持HashLocationStrategy）？我需要更改我的配置吗？

- tobik

---

许多人似乎都面临这个问题。 https://github.com/angular/angular/issues/20756 https://github.com/angular/angular/issues/20970 等等。 虽然这没什么帮助，但根据 Angular Service Worker 项目的说法，它正在被关注：https://github.com/angular/angular/projects/13 - sje

请提供完整的源代码（最好是Stackblitz）:) - yomateo

你能提供一个网络选项卡的截图，显示出504吗？ - Daniel Habenicht

对 该问题 进行了一些工作。@tobik，这个问题还存在吗？ - Joniras

这是一个Chromium的bug：https://bugs.chromium.org/p/chromium/issues/detail?id=823392 - Fateh Mohamed

您的版本中服务工作存在问题，请尝试使用5.2.11版本。我曾遇到一个问题，即它错误地读取了版本，导致屏幕只能呈现空白。这个问题已在11版中得到修复。 - Robert Leeuwerink

Answer 1

暂时解决了这个问题，通过禁用后端的ETag标头。

- Tibin Thomas

---

请问您能否详细说明一下您的答案，我在 Angular 应用程序中该在哪里找到这个 ETag。 - vndpal

你必须在后端配置中完成它。 - Tibin Thomas

它对我不起作用。 - Tatyana Molchanova

“暂时性”意味着此修复程序与该问题无关，此步骤与该问题无关。问题中所述的错误与在浏览器上运行的“Service Worker”代码有关。简单来说，这是浏览器安装的服务工作者（来自网站）缓存配置问题。 - Dom

Answer 2

我将服务工作器配置文件ngsw-config.json配置错误了。我建议检查你的angular.json文件中的ngswConfigPath，并查看你得到了什么错误配置。

在我的端上，当我从ngsw-config.json中删除index.html的缓存设置后，它之后就像魅力一样工作了。我们可能会遇到类似的错误504网关超时（来自服务工作者），但我们的服务工作者配置文件肯定不会相同。

编辑：一旦您修复了服务工作者配置，如果此错误发生在您的本地开发环境中，则可能需要将已加载的服务工作者更新到浏览器中，方法如下：

• 打开开发者工具
• 进入应用程序
• 服务工作者
• 勾选“重新加载时更新”
• 刷新（您的应用程序应该正常工作，无需硬重载-在进行正常刷新时，您不应再次遇到问题）
• 恢复“重新加载时更新”

注意：关于此问题在这里给出的其他答案

• 我不明白为什么 SSL 证书错误会与 504 网关超时 (来自 Service Worker) 相关，因为它实际上没有到达服务器，完全发生在浏览器端，事实上，没有任何远程请求被生成。
• 我也不明白为什么在后端更改 ETAG，其中错误再次发生在浏览器上，根本没有后端/前端服务器受到影响! 它是由 Angular Service Worker 在浏览器端抛出的错误。

- Dom

---

你能详细说明一下你是如何修改你的ngsw-config.json文件的吗？改动前和改动后的具体内容是什么？ - undefined

Answer 3

因为 SSL 证书已过期，所以在 Chrome 浏览器中出现了此错误。将 SSL 证书替换为有效的证书是解决方法。

- Ghasem

---

除非您的服务工作者缓存了该SSL，否则这与缓存配置问题无关。服务工作者不应该缓存错误或失败。 - Dom