Service Worker 更新延遲

Question

我有一個正在運行的網絡應用程序，它依靠服務工作者來檢查所有緩存的文件並確保用戶使用正確版本的應用程序。

我們的客戶目前希望設備在特定時間點（重新打開應用程序時）等檢查更新，因為目前當您打開應用程序時，設備可能需要長達 5 分鍾的時間才能實現其過時的版本。

我是否可以強制設備檢查 Service Worker 是否有任何新更改，而不是等待應用程序檢查我？

謝謝！

Answer 1

為了即時更新您的軟件，您應該改進兩個要點。

不久

1. 也可以從比您的應用程序的索引頁面更常訪問的頁面調用您的sw.js
2. 利用skipWaiting()方法立即激活您的軟件。

詳細

1) navigator.serviceWorker.register方法調用

您應該注意，更新版本的軟件只能通過navigator.serviceWorker.register()調用進行檢查。

通常register()方法只會在您的頁面之一中調用。 如果是這種情況，您應該將該命令添加到您的所有頁面。 因為如果用戶只是在沒有關閉 PWA 的情況下打開另一個應用程序，然后在 2 小時后返回到您的應用程序，他們將避開您的register()調用可能所在的應用程序的索引頁面。

所以，我的建議是把它放在很多頁上，如果不是每頁的話。 缺點是客戶會更多地調用sw.js 。 好處是客戶端可以在不浪費時間的情況下檢索最新版本的軟件。

2) 激活 service worker

當 SW 不再有任何活動客戶端時，將調用 Service Worker 的activate事件。 因此，只有在應用程序的每個實例關閉后才會激活新版本，並且刷新剩余的選項卡/重新打開一個選項卡。 請參閱MDN關於此事的引用：

..新版本已在后台安裝，但尚未激活。 它僅在不再加載任何仍在使用舊服務工作者的頁面時激活。 一旦不再加載此類頁面，新的 Service Worker 就會激活。

解決這個問題的方法是將skipWaiting()方法與Clients.claim()結合使用

取自 MDN 的用法示例。 單擊以在該頁面上查看有關它的更多信息：

self.addEventListener('install', function(event) {
  event.waitUntil(self.skipWaiting());
});
self.addEventListener('activate', function(event) {
  event.waitUntil(self.clients.claim());
});

Answer 2

資產服務器上.htaccess到期指令

確保由資產服務器上的.htaccess文件設置的瀏覽器緩存到期指令設置為非常短的持續時間，甚至設置為無，如此處所述。 如果不這樣做，將導致瀏覽器在一段時間內看不到manifest.json和service-worker.js中的任何更改。