Javascript 是否有任何方法可以让服务人员在每次网站更新时删除设备上的缓存？

每当我对使用Laravel开发的网站进行任何更新时，我都必须删除浏览器缓存以反映更改。这既适用于在localhost上工作，也适用于在服务器上部署它。是否有任何方法可以自动化该过程，或者由服务人员在每次更新后删除缓存

这是我的serviceworker.js

 var staticCacheName = "pwa-v" + new Date().getTime();
var filesToCache = [
    '/offline.html',
    '/css/style.css',
    '/js/app.js',
];

// Cache on install
self.addEventListener("install", event => {
    this.skipWaiting();
    event.waitUntil(
        caches.open(staticCacheName)
            .then(cache => {
                return cache.addAll(filesToCache);
            })
    )
});

// Clear cache on activate
self.addEventListener('activate', event => {
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames
                    .filter(cacheName => (cacheName.startsWith("pwa-")))
                    .filter(cacheName => (cacheName !== staticCacheName))
                    .map(cacheName => caches.delete(cacheName))
            );
        })
    );
});

// Serve from Cache
self.addEventListener("fetch", event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                return response || fetch(event.request);
            })
            .catch(() => {
                return caches.match('/offline.html');
            })
    )
});

---

下面是我用来删除过时资产的一个片段，无需手动干预

function deleteStaleAssets(url, asset) {
  caches.open(CACHE_NAME).then(function(cache) {
    cache.keys().then(function(keys) {
      let cc = keys.filter(function(req) {
        if(req.url.includes(asset) && req.url !== url) {
          return true;
        }
      });
      cc.forEach(function(r) {
        cache.delete(r);
      });
    });
  });
}

function onFetch(event) {
  var assets = ['/assets/application', 'assets/spree/frontend/all'];
  var asset = assets.find(function(asset) {
    return event.request.url.includes(asset);
  });
  if(asset) {
    event.respondWith(async function() {
      const cache = await caches.open(CACHE_NAME);
      const cachedResponse = await cache.match(event.request);
      const networkResponsePromise = fetch(event.request);

      event.waitUntil(async function() {
        const networkResponse = await networkResponsePromise;
        deleteStaleAssets(event.request.url, asset);
        await cache.put(event.request, networkResponse.clone());
      }());

      // Returned the cached response if we have one, otherwise return the network response.
      return cachedResponse || networkResponsePromise;
    }());
  }
  else {
    event.respondWith(
      // try to return untouched request from network first
      fetch(event.request).catch(function() {
        // if it fails, try to return request from the cache
        return caches.match(event.request).then(function(response) {
          if (response) {
            return response;
          }
          // if not found in cache, return default offline content for navigate requests
          if (event.request.mode === 'navigate' ||
            (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {
            return caches.match('/offline.html');
          }
        })
      })
    );
  }
}

---

@newUserName02非常感谢您的链接。我在文档中看到了生产中缓存崩溃的情况。我正在使用ElasticBeanstalk并通过ElasticBeanstalk GUI上传我的应用程序。js（'resources/js/app.js'，'public/js'）；如果（mix.inProduction（））{mix.version（）；}这段代码与它相关吗？是的，这是您在Web包mix文件中需要的。此外，您还需要更新调用已编译资产的刀片模板，以使用

{{mix（'/js/app.js'）}

和类似的css。很高兴我能提供帮助！