在 Angular 漸進式 web 應用程序中強制重新加載遠程索引。

Question

我有一個使用 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);
    }

這里假設遠程服務器有離線的.html文件而不是新修改的index.html。 這種方法的問題在於，用戶將無法簡單地繼續刷新頁面，因為他們將在服務器從維護模式恢復后獲得離線。html 最后是 404 而不是恢復的索引。html。 最好在同一索引中強制維護文本。html，但不幸的是，瀏覽器一直顯示緩存的 SPA 索引。html。

Answer 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 狀態，則整個可見文檔將被來自服務器的文本替換。