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

您有两种选择：

从es5处理程序中的当前cache-first策略切换到stale-while-revalidate等策略。
使用构建时工具生成一个服务工作者，每当您的一个本地资源发生更改时，该工作人员都会更改，这会触发fetch和install处理程序，从而为他们提供更新用户的机会'缓存您的资产的最新副本。这些工具通过生成每个本地文件的哈希并将这些哈希内联到生成的服务工作者脚本中来工作。

选项2.效率更高，因为您的用户只需要在实际发生变化时向您的资产发出请求，而不是使用过时的重新验证策略，这需要触发“重新验证”请求。每次调用activate处理程序时的背景。选项2.确实需要更多工作，因为您需要在构建过程中加入一个步骤来为您生成服务工作者。

如果你选择2. route，我会知道一些不同的构建工具：

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

服务工作者：检查缓存的资源是最新的还是最新的

1 个答案: