Javascript 代码更改时未更新Service worker缓存存储

我的单页web应用程序编写为PWA。它是一个ASP.NET Web API应用程序，托管在IIS下。我的应用程序使用一个服务工作程序，它预编译我的应用程序外壳。当用户点击应用程序时，其他内容会写入indexedDB或在服务工作者缓存中动态更新

我对代码更改有问题。当我更新代码并刷新浏览器时，我可以直接在javascript和html代码中看到我的更改。当我离线时，我的应用程序会依赖于代码，这是在我的服务人员中。此代码仍然是旧代码。当我重新加载应用程序时，它似乎没有更新。我的服务人员如下所示：

const urlsToCache = ['.' 
    , 'index.html'
    , 'favicon.ico'
    , 'service-worker.js'
    // More sources are cached here
];

self.addEventListener('install', function (event) {

    console.log('\'Install\' event triggered.');
    event.waitUntil(
        caches.open(CACHE).then(function (cache) {
            console.log('Application shell and content has been cached.')
            return cache.addAll(urlsToCache);
        }).then(function (event) {
            return self.skipWaiting();
        })
    );
});

self.addEventListener('activate', function (event) {
    console.log('\'Activate\' event triggered.');
    return self.clients.claim();
});

navigator.serviceWorker.register('./service-worker.js')
                .then(function (registration) {
                    console.log('Registered: ', registration);
                    registration.update();
                    console.log('Updated: ', registration);
                    resolve(registration);
                }).catch(function (error) {
                    console.log('Registration failed: ', error);
                    reject(error);
                });

要注册服务人员，我的代码如下所示：

const urlsToCache = ['.' 
    , 'index.html'
    , 'favicon.ico'
    , 'service-worker.js'
    // More sources are cached here
];

self.addEventListener('install', function (event) {

    console.log('\'Install\' event triggered.');
    event.waitUntil(
        caches.open(CACHE).then(function (cache) {
            console.log('Application shell and content has been cached.')
            return cache.addAll(urlsToCache);
        }).then(function (event) {
            return self.skipWaiting();
        })
    );
});

self.addEventListener('activate', function (event) {
    console.log('\'Activate\' event triggered.');
    return self.clients.claim();
});

navigator.serviceWorker.register('./service-worker.js')
                .then(function (registration) {
                    console.log('Registered: ', registration);
                    registration.update();
                    console.log('Updated: ', registration);
                    resolve(registration);
                }).catch(function (error) {
                    console.log('Registration failed: ', error);
                    reject(error);
                });

因此，当服务工作者注册时，它也会检查更新。但是，它仅在服务工作者代码本身更改时更新。当我的应用程序外壳中的代码在不更改服务工作者代码本身的情况下发生更改时，则不会发生这种情况

---

当我更改应用程序代码并刷新页面时，如何确保重新加载我的service worker中的代码？

检查此项以更新SW Hi@Zydnar，感谢您的回复。它做了一些事情，但仍然不是我想要实现的。如果我更新服务工作者代码，它将更新缓存存储。我想要实现的是，当只有我的应用程序外壳被更改时，它会更新缓存存储，因此不会更改服务工作者代码本身。我用您添加的内容更新了主线程。因此，您必须在向SW发送消息时更新缓存。因此，让我们假设在回调中更改shell将消息发布到SW，然后如果消息==='updateCache'，您可以查看您的逻辑以供参考。您好@Zydnar，在这种情况下问题仍然存在。。。如果不更改服务工作者代码本身，我无法刷新服务工作者缓存。registration.Update（）仅在服务工作者代码本身发生更改时刷新服务工作者缓存。我想要实现的是在页面刷新时刷新service worker缓存（F5或ctrl+F5）。您所要做的就是刷新更改缓存名称并删除旧缓存（使用不同的名称）-通常缓存的名称类似于

v1

和下一个版本

v2…vn

。见：