在 PWA 中清除緩存

Question

我想開發一個能夠離線的漸進式 web 應用程序。

查看此類應用程序的示例 - airhorner，我發現它使用特定版本的應用程序來確保加載正確的版本。

https://github.com/GoogleChromeLabs/airhorn/blob/main/app/sw.js#L21

但是舊版本會發生什么？ 我需要清理它嗎？ 我的應用程序相當大，因為它包含大量數據（html+js ~1.5MB），並且根據我在 iOS 上閱讀的內容，每個應用程序的緩存限制為 50MB。

所以我想知道我是否需要確保刪除舊版本的緩存，或者我可以假設它是緩存並且它會因為太舊而被刪除？

如果我確實需要刪除舊版本，調用它的正確位置在哪里？

我在https://stackoverflow.com/a/45468998/66522中看到它被稱為activate事件。 除了這個之外，我可以在這個事件上添加另一個事件監聽器嗎？ https://github.com/GoogleChromeLabs/airhorn/blob/main/app/sw.js#L40

Answer 1

緩存是易失的。 瀏覽器可以選擇在任何給定時間刪除所有內容或不刪除任何內容。 （參考： 刪除緩存）

話雖如此，通常的做法是自己清理。 當您對 50Mb 有限制時，這一點變得尤為重要； 您不希望瀏覽器自動清除有效緩存。

您應該在activate事件中進行任何類型的清理，以便任何舊的和活動的 ServiceWorker 仍然能夠 function 直到新的 ServiceWorker 聲明所有客戶端（變為活動狀態）。

這是一個如何在 ServiceWorker 中管理緩存的示例。