stale-while-revalidate 缓存策略是什么意思？

Question

我正在尝试使用 ServiceWorker 实现不同的缓存策略。对于以下策略，实现方式是完全明确的：

1. 缓存优先
2. 仅缓存
3. 网络优先
4. 仅限网络

例如，在尝试实现缓存优先策略时，在 service-worker 的 fetch 挂钩中，我将首先向 CacheStorage（或任何其他）询问请求的 URL，然后如果存在 respondWith 它，如果不是respondWith网络请求的结果。

但是对于根据thisworkbox定义的stale-while-revalidate策略，我有以下问题：

1. 首先是关于机制本身。 stale-while-revalidate 是否意味着在网络响应之前使用缓存，然后使用网络数据或仅使用网络响应来更新您的缓存数据以供下次使用？
2. 现在，如果网络被缓存以备下次使用，那么哪些场景包含它的真实用例？
3. 如果应该在应用程序中立即替换网络响应，那么如何在 service worker 中完成呢？因为钩子会被缓存的数据解析，然后网络数据无法解析（使用respondWith）。

Answer 1

1. 是的，就是这个意思。思路很简单：立即从缓存中响应，然后在后台刷新缓存以备下次。

2. 始终获取最新版本的页面/应用程序并不重要的所有场景 =) 我在两个不同的 Web 应用程序上使用 stale-while-revalidate 策略，一个用于公共交通服务，一个用于公共交通服务用于显示餐厅菜单信息。许多网站/应用程序都可以这样做，但当然不是全部。

在#2 中需要注意的一件非常重要的事情： 你可以例如。仅对静态资产使用 stale-while-revalidate。这样，您的 html、js、css、图像等将被缓存并快速提供给用户，但从 API 动态获取的数据仍然是新鲜的。对于某些应用程序来说，这很有效，而对于其他一些应用程序来说则不太好。完全取决于应用程序。当然，如果用户正在运行应用程序的早期版本等，您必须记住不要更改 API 的语义。

1. 不可能以任何自动方式。但是，您可以做的是使用 window.postMessage API 在 Service Worker 和“页面上的常规 JS 代码”之间实现一个 msg 通道。您可以在页面上监听某些消息，然后在发生重要更改并且缓存已更新时，从 Service Worker 发送消息。然后，您可以向用户显示一个提示，告知该页面现在确实需要重新加载，甚至可以从 JS 强制重新加载。当然，您需要将这种确定何时发生重要更新的逻辑放入 Service Worker。