關於緩存更新的服務工作者重新加載頁面

我正在使用React +服務工作者+ offline-plugin爲該網站創建一個具有持久緩存的服務工作者。關於緩存更新的服務工作者重新加載頁面

我想告訴用戶何時將新版本存儲在cach中並建議刷新頁面，但我不知道如何引用Service Workerand我應該聽什麼事件（Service Workeris由npm自動創建「離線插件「）。

標準流程今天：

網站管理員發佈網站（V1）
用戶訪問該網站
他看到的網站（V1），而在持續高速緩存
站長網服務工作者商店頁面發佈新版本（V2）
用戶在後臺（V2）中加載新版本時，重新訪問從持久緩存中看到舊版本的站點。
當用戶將刷新頁面，他會看到的網站版本2

新流程應該是：

V2在後臺載入

一個完成彈出消息指示用戶刷新頁面以獲取新版本。

來源

2017-01-06 Avi Zloof

沒有足夠的細節。順便說一下，你可以使用onmessage事件，當你有webworker的結果，你可以顯示警報點擊警報重新加載頁面 –

您好，我已經更新了描述。 –

服務人員是webworker的一種特殊形式。
當您在註冊表中使用sw時，例如在serviceWorkerRegistry.js中，您將可以訪問多個事件。
例如

serviceWorkerRegistry.js: 

if (!navigator.serviceWorker) return; 

navigator.serviceWorker.register('/sw.js').then(function(reg) { 
    if (!navigator.serviceWorker.controller) { 
     return; 
    } 

    if (reg.waiting) { 
     console.log("inside reg.waiting"); 
     return; 
    } 

    if (reg.installing) { 
     console.log("inside reg.installing"); 
     return; 
    } 

    reg.addEventListener('updatefound', function() { 
     console.log("inside updatefound"); 
     let worker = reg.installing; 
     worker.addEventListener('statechange', function() { 

     if (worker.state == 'installed') { 
      console.log('Is installed'); 
      // Here you can notify the user, that a new version exist. 
       // Show a toast view, asking the user to upgrade. 
       // The user accepts. 
       // Send a message to the sw, to skip wating. 
       worker.postMessage({action: 'skipWaiting'}); 

     } 
     }); 
    }); 
    }); 

sw.js: 
// You need to listen for a messages 
self.addEventListener('message', function(event) { 
    if (event.data.action === 'skipWaiting') { 
    self.skipWaiting(); 
    } 
});

現在還有離線插件的問題，是它創造了SW你，並以這種方式是很難明白什麼SW在做什麼。
我會說，最好是創建自己的sw，這樣你可以更好地理解功能。 this插件可以幫助您緩存。

來源

2017-01-07 22:02:14 Hosar

你應該看看下面的鏈接： Service Worker life cycle - updates

您也可以手動更新您的服務人員通過運行這樣：

navigator.serviceWorker.register('/sw.js').then((reg) => { 
    // sometime later…  
    reg.update(); 
});

你可以告訴你已經準備好了新的版本（和尚未激活）服務工作人員的install事件。
您知道，您已在服務人員的事件處理程序中加載了新版本。

來源

2017-09-25 18:52:35 Rubinsh

關於緩存更新的服務工作者重新加載頁面

回答

相關問題