Javascript 在角度渐进式web应用程序中强制重新加载remote index.html

我有一个Angular 8 web应用程序，它使用Angular PWA和service worker

客户希望向系统添加维护模式，以便能够切断用户连接，并显示一个简单的HTML页面，其中包含停机信息

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

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

较长的解释是：

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

• 第一次加载站点时。这不是问题，用户可以立即获得维护页面

• 当站点已经加载并且用户正在进行正常页面刷新（不是完全重新加载）时。这是一个问题，因为缓存的SPA root index.html是由服务人员返回的，而不是服务器上修改的index.html。 幸运的是，我的SPA在启动后立即执行了一些web请求，因此我可以在那里捕获503，因此可以归结为第三点：

• 最常见的503状态将在用户执行某些任务时被捕获，并且应用程序调用my server API。我在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。

万一其他人遇到同样的问题：我最终得到了一个有点难看的解决方案：

    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请求，很快就会收到503，然后我们进入最后一步：
• 如果用户在调用API时收到503状态，则整个可见文档将替换为来自服务器的文本