在 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 中管理缓存的示例。