2017-08-02 48 views
8

所以,我有一個服務工作者的HTML頁面, 服務工作者緩存index.html和我的JS文件。如何清除服務人員的緩存?

問題是當我更改JS時,更改不會直接顯示在客戶端瀏覽器上。當然,在Chrome開發工具中,我可以禁用緩存。但在Chrome移動中,我該怎麼做?

我試圖訪問網站設置並點擊CLEAR%RESET按鈕。 但它仍然從緩存加載舊的頁面/加載。 我嘗試使用其他瀏覽器或Chrome隱身模式,並加載新頁面。

然後,我嘗試清除我的瀏覽數據(只是緩存),它的工作原理。

我想這不是應該如何工作的權利?我的用戶不會知道頁面是否更新,而無需清除Chrome瀏覽器緩存。

回答

10

使用此功能可以刪除過時的緩存:

self.addEventListener('activate', function(event) { 
    event.waitUntil(
    caches.keys().then(function(cacheNames) { 
     return Promise.all(
     cacheNames.filter(function(cacheName) { 
      // Return true if you want to remove this cache, 
      // but remember that caches are shared across 
      // the whole origin 
     }).map(function(cacheName) { 
      return caches.delete(cacheName); 
     }) 
    ); 
    }) 
); 
}); 
+2

什麼是'這裏self'?窗口對象或服務人員? – loopmode

+2

堆棧溢出是一個很好的做法,爲解決問題的原因添加解釋。有關更多信息,請閱讀[如何回答](// stackoverflow.com/help/how-to-answer)。 –

13

other answer有點冗長,確實比的問題需要更大量的,並賦予其完全缺乏解釋它需要一點解析代表的用戶爲他們改變它爲他們工作的東西。所以這裏更簡單。

如果您知道緩存名稱,你可以簡單地調用從任何地方caches.delete()您在工人喜歡:

caches.delete(/*name*/); 

如果你要消滅所有的緩存(而不是等着他們,說這是一個後臺任務),你只需要add this

caches.keys().then(function(names) { 
    for (let name of names) 
     caches.delete(name); 
}); 
+1

感謝您的支持。這更簡單得多。我只是寫了我的迅速回答問題 –

+1

Nah沒有後顧之憂。如果有人想要在'activate'監聽器中刪除一組特定的緩存,那麼這將是完美的;我只是做了這個以防萬一有人只想轉儲一個/所有東西 – Hashbrown

+0

最緊湊的代碼可能是 'caches.keys()。then(cs => cs.forEach(c => caches.delete(c)))'' 或異步函數 '(等待caches.keys())。forEach(c => caches.delete(c))' –