代码更改时,服务工作者缓存存储未更新

时间:2020-01-13 16:19:50

标签: javascript service-worker service-worker-events

我的单页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);
                });

因此,当服务人员注册时,它还会检查更新。但是,仅在更改服务工作者代码本身时更新。如果在不更改服务工作者代码本身的情况下更改了应用程序外壳程序中的代码,则不会。

当我更改应用程序代码并刷新页面时,如何确保重新加载服务工作者中的代码?

0 个答案:

没有答案