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

Question

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

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

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

但是对于根据工作箱的这个定义的 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 的语义。

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