Service Worker：检查缓存的资源是最新的还是最新的

Question

我 sw.js 代码如下：

self.addEventListener('install', e => {
  e.waitUntil(
    caches.open('cache').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles/main.css',
        '/scripts/main.min.js'
      ])
      .then(() => self.skipWaiting());
    })
  )
});

self.addEventListener('activate',  event => {
  event.waitUntil(self.clients.claim());
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

我最近更新了 index.html 文件，但该文件未反映该站点。它仍然显示 index.html.

的旧内容

现在，如果服务器上的文件发生更改，我如何确保应用程序将提供最新代码？

我看到了一些相关的答案（比如更新和刷新），但请告诉我答案的每一部分是怎么回事。

Answer 1

您有两个选择：

从当前 cache-first strategy in your fetch handler to a strategy like stale-while-revalidate 切换。
使用构建时工具生成一个服务工作者，它会在每次本地资源发生变化时发生变化，这将触发 install 和 activate 处理程序，让它们有机会更新您的用户缓存中包含您资产的最新副本。这些工具通过生成每个本地文件的哈希值并将这些哈希值内联到生成的服务工作者脚本中来工作。

选项 2. 更有效，因为您的用户只需在实际发生变化时才需要对您的资产提出请求，而不是使用过时的重新验证策略，后者需要触发 "revalidate" 每次调用 fetch 处理程序时在后台请求。但是，选项 2. 确实需要更多工作，因为您需要在构建过程中加入一个步骤来为您生成 service worker。

如果您选择选项 2. 路线，我知道有几种不同的构建工具：

sw-precache（披露：我是作者）
offline-plugin

Service Worker：检查缓存的资源是最新的还是最新的

Service worker: check cached resources are up-to-date or latest

caching

service-worker