在 JavaScript 中将兑现的文件重新加载到浏览器 serviceWorker

如何解决在 JavaScript 中将兑现的文件重新加载到浏览器 serviceWorker

每次我编辑 PWA 应用程序源时，如 html 或 js 文件，我都必须手动删除浏览器缓存文件和历史记录，以便加载我上传的新数据。 我的 serviceWorker 例程尝试仅缓存我的主 url html，但似乎所有文件都被自动缓存。 这是我的 serviceWorker 文件：

    var cacheName = 'app-pwa';
    var filesToCache = [
      '/','/index.html'
    ];

    /* Start the service worker and cache all of the app's content */
   self.addEventListener('install',function(e) {
     e.waitUntil(
       caches.open(cacheName).then(function(cache) {
         return cache.addAll(filesToCache);
       })
     );
   });

   /* Serve cached content when offline */
   self.addEventListener('fetch',function(e) {
     e.respondWith(
       caches.match(e.request).then(function(response) {
         return response || fetch(e.request);
       })
     );
    });

那么任何人都可以帮助我如何刷新浏览器中的缓存文件？ 谢谢

解决方法

好，我找到了自己的方式和将分享在这里的人谁需要它。 方式是在缓存文件名的末尾定义版本：

var cacheName = 'app-pwa-v1';

并为任何更新增加版本。并定义另一个 Service Worker 来删除之前缓存的文件。

self.addEventListener('activate',(e) => {
  e.waitUntil(caches.keys().then((keyList) => {
    Promise.all(keyList.map((key) => {
      if (key === cacheName) { return; }
      caches.delete(key);
    }))
  })));
});

这将在第二次应用启动后删除旧的缓存文件。