如果缓存名称不同，请手动更新servceworker缓存

Question

所以我有一个PWA，我想添加一个按钮，让用户知道有一个新的版本，以便他们可以更新所有的文件，如果他们有互联网连接。每次我运行gulp build时，它都会向服务工作者缓存名称添加一个时间戳，因此它总是最新的，但它不会更新缓存的文件。

下面是一个可以做到这一点的吞咽任务：

gulp.task('serviceWorkerCache', function(){
    gulp.src(['dist/serviceworker.js'])
        .pipe(replace(/(dobrywebdev-\d{0,13})/g, function(match, p1, offset, string) {
            var currentDate = Date.now();
            return 'dobrywebdev-' + currentDate;
        }))
    .pipe(gulp.dest('dist'));
});

以及整个service-worker.js文件：

const CACHE_NAME = "dobrywebdev-1521013165219"; // that number is the timestamp that changes
const URLS_TO_CACHE  = [
    "/",
    "/index.html",
    "/errors/404.html",
    "/manifest.json",
    "https://fonts.googleapis.com/css?family=Poppins:400,700&subset=latin-ext",
    "/css/main.min.css",
    "/js/main.min.js",
    "/fonts/devicons.eot",
    "/fonts/devicons.svg",
    "/fonts/devicons.ttf",
    "/fonts/devicons.woff",
    "/font/fontello.eot",
    "/font/fontello.svg",
    "/font/fontello.ttf",
    "/font/fontello.woff",
    "/font/fontello.woff2",
    "/json/content-eng.json",
    "/json/content-pl.json",
    "/img/playground.png",
    "/img/agency.png",
    "/img/cv.png",
    "/img/dobrywebdev.png",
    "/img/dobrywebdevfb.png",
    "/img/form.png",
    "/img/interior.png",
    "/img/interior1.png",
    "/img/logo-dark.png",
    "/img/logo-light.png",
    "/img/simpleweather.png",
    "/img/sleszynski.png",
    "/img/todo.png",
    "/img/webdev37.png",
    "/android-chrome-36x36.png",
    "/android-chrome-48x48.png",
    "/android-chrome-72x72.png",
    "/android-chrome-96x96.png",
    "/android-chrome-144x144.png",
    "/android-chrome-192x192.png",
    "/android-chrome-256x256.png",
    "/android-chrome-512x512.png",
    "/apple-touch-icon.png",
    "/apple-touch-icon-60x60.png",
    "/apple-touch-icon-76x76.png",
    "/apple-touch-icon-120x120.png",
    "/apple-touch-icon-152x152.png",
    "/apple-touch-icon-180x180.png",
    "/browserconfig.xml",
    "/favicon-16x16.png",
    "/favicon-32x32.png",
    "/mstile-150x150.png",
    "/safari-pinned-tab.svg"
];

self.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open(CACHE_NAME)
        .then(function(cache) {
            console.log('Opened cache');
            return cache.addAll(URLS_TO_CACHE);
        }).catch(function(error) {
            console.log(error);
        })
    );
});

self.addEventListener("activate", event => {
    event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames
          .filter(name => name.includes("dobrywebdev") && name !== CACHE_NAME)
          .map(name => caches.delete(name))
      )
    }).then(() => self.clients.claim())
  );
});

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request)
            .then(function(response) {
            if (response) {
                return response;
            }
            var fetchRequest = event.request.clone();
            return fetch(fetchRequest).then(
            function(response) {
                if(!response || response.status !== 200 || response.type !== 'basic') {
                    return response;
            }
            var responseToCache = response.clone();
            caches.open(CACHE_NAME)
                .then(function(cache) {
                    cache.put(event.request, responseToCache);
                    });
                    return response;
                }
            );
        })
    );
});

和main.js中的注册：

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/serviceworker.js').then(function(registration) {
      console.log('Service worker registration done, scope is:', registration.scope);
    }).catch(function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
}

因此，基本上我想检查serviceworker.js中的CACHE_NAME是否与实际浏览器缓存中的不同，并显示一个带有更新应用程序选项的按钮/弹出窗口。然后该按钮应该删除缓存，注销serviceworker，注册一个新的，并将文件添加到缓存中。据我所知，serviceworker不能做任何与DOM相关的事情，所以我必须通过main.js来做。我该怎么做呢？

Answer 1

老实说，我不认为你需要这样做，因为每次你更新service worker的版本时，浏览器会自动删除旧版本。我认为你需要在你的服务工作者中包含这段代码：

self.addEventListener('activate', function (event) {
  console.log('[Service Worker] Activating Service Worker ....', event);
  event.waitUntil(
    caches.keys()
      .then(function (keyList) {
        return Promise.all(keyList.map(function (key) {
          if (key !== CACHE_STATIC_NAME && key !== CACHE_DYNAMIC_NAME) {
            console.log('[Service Worker] Removing old cache.', key);
            return caches.delete(key);
          }
        }));
      })
  );
  return self.clients.claim();
});

这将删除旧的缓存并更新服务工作进程