在 Angular 渐进式 Web 应用程序中强制重新加载远程 index.html答案

【问题标题】：Enforcing reload of remote index.html in an Angular progressive web app在 Angular 渐进式 Web 应用程序中强制重新加载远程 index.html
【发布时间】：2020-12-11 18:13:11
【问题描述】：

我有一个使用 Angular PWA 和 service worker 的 Angular 8 Web 应用程序。

客户希望在系统中添加维护模式，以便能够切断用户并显示带有停机信息的简单 HTML 页面。

在服务器端，它只需返回 503 和维护模式 HTML 页面即可工作。虽然该页面基于模板，但我无法将其包含在我的 SPA webapp 中，因为客户的管理员可能希望根据情况对其进行调整（例如，解释维护将持续多长时间）。

问题归结为： 如何强制 Web 浏览器显示带有维护文本的远程 index.html 而不是缓存的 index.html？ 在使用 Visual Studio 创建的典型 Angular SPA 应用程序中通常如何完成Angular SPA 模板？

更长的解释：

问题出在客户端。由于这是一个主要通过 API 与后端通信的 PWA，因此用户可能会收到 503 响应的三个潜在点：

第一次加载网站时。这不是问题，用户立即得到维护页面。
当网站已经加载并且用户正在进行正常的页面刷新（不是完全重新加载）时。这是一个问题，因为缓存的 SPA 根 index.html 是由 service worker 返回的，而不是服务器上修改后的 index.html。幸运的是，我的 SPA 在启动后立即执行一些 Web 请求，所以我可以在那里捕获 503，因此这一切都归结为第三点：
当用户正在处理某些任务并且应用程序调用我的服务器 API 时，最常见的 503 状态将被捕获。我在 Angular 代码中的 HTTP 服务调用中添加了一个全局错误处理程序（基于 ErrorHandler），因此我可以捕获 503 响应。但是接下来我该怎么办？ 如何强制完全重新加载网站，忽略服务工作者缓存以强制重新加载远程 index.html 页面？

我已经尝试过什么：

作为一种快速而简单的解决方法，我在错误处理程序中添加了以下代码：

    if (error.status === 503) {
        // the server should have offline page. If not, the request will lead to 404.
        document.location.href = "offline.html?_=" + Math.floor(Math.random() * 1000000000);
    }

这假设远程服务器有offline.html 文件而不是新修改的index.html。这种方法的问题在于，用户将无法简单地继续刷新页面，因为在服务器从维护模式恢复后，他们将获得 offline.html，最后是 404 而不是恢复的 index.html。在同一个 index.html 中强制维护文本会更好，但不幸的是，浏览器会一直显示缓存的 SPA index.html。

【问题讨论】：

标签： javascript html angular service-worker http-status-code-503

【解决方案1】：

如果其他人偶然发现了同样的问题：我最终得到了一个有点丑陋的解决方案：

    else if (error.status === 503) {
        // we assume the server has sent us entire offline html page contents
        // and we rewrite current page with it entirely
        document.open();
        // error is the response body
        document.write(error.error);
        document.close();
    }

这边：

如果用户第一次加载网站，他们会立即收到服务器的503响应
如果用户从浏览器的缓存中加载网站，网站将在稍后的某个时间收到 503，但很可能因为一些即时 API 请求而很快收到，然后我们来到最后：
如果用户在调用 API 时收到 503 状态，则整个可见文档将被替换为来自服务器的文本。

【讨论】：