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

问题描述

我有一个使用Angular PWA和服务工作者的Angular 8 Web应用程序。

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

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

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

更长的解释：

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

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

• 网站已经加载并且用户正在进行正常的页面刷新（不是完全重新加载）时。这是一个问题，因为服务工作者返回了缓存的SPA根目录index.html，而不是服务器上已修改的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。

解决方法

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

    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状态，则整个可见文档将被服务器中的文本替换。