Question

我正在尝试在Service Worker中缓存静态资产。但是，当我编辑一些静态文件并关闭标签并再次打开它时，我看不到任何更改。

我的缓存没有更新。如果我在chrome网站工具中清除了网站数据并重新打开标签，则会看到新的更改。

请在下面查看我的代码。

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('static')
      .then(function(cache) {
        cache.addAll([
            '/index.html',
            '/src/js/app.js',
            '/src/css/app.css'
        ]);
     })
  );
});

self.addEventListener('fetch', function(event) {
   event.respondWith(
     caches.match(event.request)
   );
});

Answer 1

您应该使用缓存版本。

var STATIC_CACHE_VERSION = '1';

下面的函数将在您每次更改STATIC_CACHE_VERSION变量时刷新缓存。

self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys()
      .then(function(keyList) {
        return Promise.all(keyList.map(function(key) {
          if (key !== 'static-' + STATIC_CACHE_VERSION) {
            return caches.delete(key);
          }
        }));
      })
  );
  return self.clients.claim();
});

Answer 2

使用Google Chrome浏览器尝试按['Lebron James', 'Lebron', 'James']，依次单击“应用程序”和“ Service Workers”。在此选项卡中，您可以注销想要的任何工作人员。

服务人员缓存未更新

2 个答案: