如果上次修改在服务工作者中发生更改，则更新缓存文件

Question

如果更改了最后修改日期时间，是否有任何方法可以更新服务工作者中的文件？我有一些图像每 2-3 天更改一次，想让服务人员知道更新它们。

我也在 service worker 的缓存目录中分离了这些图像。

registerRoute(
  ({ url }) => url.origin === self.location.origin && url.pathname.startsWith("/images/changing-images/"),
  new StaleWhileRevalidate({
    cacheName: `changing-images-${cacheSuffix}`,
    matchOptions: {
      ignoreSearch: true,
      ignoreVary: true,
    },
  })
);

Answer 1

您可以随时在

self.caches

中更新资源，您可以从服务工作者上下文或页面https://developer.mozilla.org/en-US/docs/Web/API/caches .

缓存API中的条目是

Response

s，其中包括headers。在这里对您最有用的标头可能是

Last-Modified

，但只有当您的服务器选择发送它时它才会存在。

假设是这样，您可以通过在页面加载时检查缓存中的条目来实现您想要的：

1. 使用

   self.caches.open

   获取存储图像的缓存。
2. 通过

   cache.matchAll

   获取缓存中的所有项目。这会给你

   Response

   s.
3. 看看那些Responses

   中的

   headers。如果他们的

   Last-Modified

   日期超过您选择的阈值，请使用

   cache.add

   更新缓存。