如何將 PWA 重定向到新服務器

Question

我有一個應用程序可以注冊服務人員以使該應用程序可以離線使用。 現在我需要將應用程序移動到新服務器，因此我為根頁面設置了 301 重定向。 但是現有的緩存似乎忽略了這一點，總是在舊 URL 上提供舊應用程序。 如何強制他們更新？

Answer 1

另一種簡單的方法是使用 workbox-window。 您可以檢測到新的 Service Worker 安裝並提示用戶重新加載頁面或在未經用戶許可的情況下重新加載。 有關更多詳細信息，請閱讀此內容。

我希望這可以幫助你。

Answer 2

發現這個： https ://github.com/NekR/self-destroying-sw

刷新並重新打開頁面后，它終於拿起了重定向。

Answer 3

您可以使用以下命令更新服務工作人員代碼：

ServiceWorkerRegistration.update();

這里有一個例子： example

注意：更新代碼在瀏覽器中安裝的服務工作者存在差異時運行，在這種情況下，新的服務工作者運行更新，但新代碼在網站關閉並再次打開之前不可用。

Answer 4

值得慶幸的是，一旦您關閉瀏覽器，這就會自動完成。

否則，您將不得不為您的 PWA 應用程序添加更新。 更新必須包含一個新的軟件（按照通常的 PWA 更新）。 並且在任何腳本中只需使用location.href執行 JS 重定向。

看起來你不能通過 HTTP 重定向來做到這一點。

Answer 5

如果您不想永遠等待某人清除緩存或殺死他們的服務人員，您可以檢測到重定向。

我在這里描述了細節： https ://enux.pl/article/en/2022-05-26/pwa-detecting-redirects-service-workers

簡而言之：不可能獲得重定向的 URL。 哎呀，如果新 URL 會阻止 CORS，您甚至都不會獲得狀態編號。 所以你需要做的是使用redirect選項：

var urlForTestingRedirs = '/something/local.css';
fetch(urlForTestingRedirs, {
    // this is crucial
    redirect: 'manual',
    // use head to be lite
    method: 'HEAD',
    // make sure HTTP cache is skipped
    cache: 'no-cache',
}).then(function(response) {
    if (response.type == 'opaqueredirect') {
        clearAllForPwa()
    }   
});

您可以在標准script標簽中執行此操作。 所以不需要在你的 sw.js 或類似的東西中做這個提取。

請注意， clearAllForPwa函數在很大程度上取決於您使用的緩存。 那么你使用什么 Web 存儲 API（如果有的話）或者你可能使用 IndexDB 和 localforage ......無論如何，你自己清理一下是很好的😉

同樣，請參閱我上面提到的文章中的更多信息。