Angular Service Worker：特定页面出现 404 错误，504 离线（本地主机工作正常）

Question

我在部署 Angular 应用程序的服务工作线程时遇到问题。以下是问题的细分：

1. 特定页面出现 404 错误：

当我尝试加载某些页面（例如“/jobs”或类似页面）时，我在浏览器控制台中收到 404 Forbidden 错误。 奇怪的是，响应仍然包含实际的 HTML 内容，即使它是 404。 2. 504网关超时离线：

当我尝试在离线状态下加载应用程序时，我收到 504 Gateway Timeout 错误（来自 Service Worker）。 本地主机工作：

需要注意的是，在本地开发服务器（localhost）上运行应用程序时，一切都会按预期运行。

问题：

我不明白为什么会发生这些错误。任何有关如何解决这些问题的见解或建议将不胜感激。以下是我需要帮助的一些具体要点：

即使响应包含 HTML 内容，什么可能导致特定页面上出现 404 错误？ 如何确保 Service Worker 在应用程序离线时不会触发 504 错误（假设缓存了必要的资源）？

这是截图

尝试了不同的缓存配置，尝试缓存特定的 url /jobs、/auth、/messages， 在 localhost prod 构建上尝试过，一切正常。

Answer 1

经过彻底调查，我已经确定并解决了尝试离线加载应用程序时导致 504 Gateway Timeout 错误的问题。

问题的根源是缓存机制的差异，特别是 env.json 文件。该文件对于运行时操作至关重要，被缓存为静态文件而不是在适当的数据组中。因此，在离线模式下，由于哈希不匹配，缓存的 env.json 文件与预期状态不匹配。这种差异导致 Service Worker 触发 504 错误。

为了解决这个问题，我调整了缓存配置，以确保 env.json 文件正确缓存在适当的数据组中，从而确保其在离线使用期间的完整性。进行此调整后，应用程序现在无论在线还是离线都可以顺利运行，不会遇到 504 错误。