我如何使用服務工作者或緩存對象通過 javascript 設置緩存過期時間

Question

我可以使用 delete 方法刪除緩存數據。 但我想使用過期時間自動刪除緩存數據。 例如它應該在 6 小時內被刪除。

caches.delete(cacheName).then(function(boolean) {
  // your cache is now deleted
});

Answer 1

在將緩存文件發送到客戶端之前，您可以檢查文件何時被獲取，如果它太舊，則獲取一個新文件：

const url = request.url;
caches.open(cacheName).then(cache => {
  cache.match(url).then(response => {
    if(!response) {
      return fetch(url);
    }

    const date = new Date(response.headers.get('date'))
    // if cached file is older than 6 hours
    if(Date.now() > date.getTime() + 1000 * 60 * 60 * 6){
      return fetch(url);
    }

    // else return cached version
    return response;
  })
})

Answer 2

我們在緩存對象中沒有內置方法來在一段時間后刪除緩存，但我們可以使用 setTimeout() 方法，該方法用於在等待指定的毫秒數后執行一次函數。 因此，通過設置時間，您可以調用此刪除方法並刷新數據。

https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker

以上是緩存的谷歌文檔。 希望這會幫助你。