Javascript PWA应用程序的自动更新解决方案

我想把我的正常网站变成一个进步的网络应用程序。因为这一切都结束了。该网站是负责的，我已经建立了清单。现在我想到了最后一部分。ServiceWorker将网站保存到设备的缓存中。我的问题是我找不到一个简单的解决办法。因为对于我的网站来说，用户在每次我更新时运行新版本是很重要的。您知道一种解决方案吗？一旦用户打开应用程序，如何让服务人员检查是否有任何更改，然后删除旧缓存并根据新文件和新代码创建新缓存？
如果有人能提供一个代码示例，那就太好了。
我的HTML端：

<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('./sw.js')
    .then(reg => console.log(reg))
    .catch(err => console.log(err));
  }
</script>  

---

简短描述：稍微更新SW文件，并在

激活
事件中处理删除旧缓存的操作

详细说明
无论何时更改代码文件（而不是
sw.js
）。您需要在service worker中触发安装和激活事件。以更新您的更改

为了触发这些事件，应该更新
sw.js
，甚至更新一位。（至少是一个字符）

按照惯例，开发人员通过维护版本控制来处理此问题。此外，添加和删除缓存也很容易。

const version='v2'；
self.addEventListener（'install'，res=>{
打开（版本）。然后（缓存=>{
cache.addAll（缓存）；
});
console.log（“[sw]已成功安装：”）；
//自我skipWaiting（）；
});
self.addEventListener（'fetch'，event=>event.respondWith(
缓存。打开（版本）
.then（cache=>cache.match（event.request））
.then（response=>response | | fetch（event.request））
));

如果您需要直接更新
sw.js
而不考虑用户的状态，那么请取消注释
self.skipWaiting（）
，因为它会跳过等待激活的过程并立即被激活

在
activate
事件中，您必须根据缓存版本删除旧缓存

self.addEventListener（'activate'，event=>{
caches.keys（）.then（函数（cacheNames）{
forEach（函数（cacheName）{
如果（cacheName！==版本）{
caches.delete（cacheName）；
}
});
});
}

    self.addEventListener('install', event => event.waitUntil(
  caches.open('web_pwa').then(cache => cache.add('/'))
));

self.addEventListener('fetch', event => event.respondWith(
  caches.open('web_pwa')
    .then(cache => cache.match(event.request))
    .then(response => response || fetch(event.request))
));