Javascript 在进行更改时，如何更新serviceworker脚本以更新缓存页面？

这是我的软件：

HTML格式的

    <!--REGISTER SERVICE WORKER-->
    <script>
        if('serviceWorker' in navigator) {
          navigator.serviceWorker
               .register('/app/offline_content/sw.js')
               .then(function() { console.log("Service Worker Registered"); });
        }
    </script>

//IMPORT POLYFILL
importScripts('cache-polyfill.js');

//INSTALL
self.addEventListener('install', function(e) {
    e.waitUntil(
        caches.open('stock_item_balance').then(function(cache) {
            return cache.addAll([
                '/app/offline_content/jquery-3.5.1.min.js',
                '/app/offline_content/bootstrap-4.5.2-dist/css/bootstrap.min.css',
                '/app/offline_content/bootstrap-4.5.2-dist/js/bootstrap.min.js'
            ]);
        })
    );
});

//FETCH
self.addEventListener('fetch', function(event) {
    console.log(event.request.url);

    event.respondWith(
        caches.match(event.request).then(function(response) {
            return response || fetch(event.request);
        })
    );
});

我确实试过：

//UPDATE CACHE IF UPDATES
const cacheName = 'my_app_v1';

self.addEventListener('activate', async (event) => {

    const existingCaches = await caches.keys();
    
    const invalidCaches = existingCaches.filter(c => c !== cacheName);
    
    await Promise.all(invalidCaches.map(ic => caches.delete(ic)));
});

老实说，我真的不知道这一切是怎么回事，所以对我温柔一点

编辑

---

或者也许它真的有用。。毕竟..

我强烈建议您使用Workbox for ServiceWorker代码。在您的情况下，

revision

会有所帮助。更多信息请点击此处：

如果每次更新时都更改“const cacheName…”。。实际上，它似乎起了作用：）

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute([
  {url: '/index.html', revision: '383676' },
  {url: '/styles/app.0c9a31.css', revision: null},
  {url: '/scripts/app.0d5770.js', revision: null},
  // ... other entries ...
]);