时间戳

首页 > 解决方案 > 在 Angular 渐进式 Web 应用程序中强制重新加载远程 index.html

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

问题描述

我有一个使用 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 响应的三个潜在点：

我已经尝试过什么：

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

    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。

标签： javascripthtmlangularservice-workerhttp-status-code-503

解决方案

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

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

推荐阅读