时间戳

首页 > 解决方案 > stale-while-revalidate 缓存策略是什么意思？

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

问题描述

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

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

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

但是对于根据这个工作箱定义的 stale-while-revalidate 策略，我有以下问题：

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

标签： cachingfetchservice-workerservice-worker-events

解决方案

  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。

推荐阅读