0

我的单页 Web 应用程序是用 PWA 编写的。它是一个托管在 IIS 下的 ASP.NET Web API 应用程序。我的应用程序使用了一个服务工作者,它预先缓存了我的应用程序外壳。当用户单击应用程序时,其他内容将写入 indexedDB 或在 service worker 缓存中即时更新。

我对代码更改有疑问。当我更新代码并刷新浏览器时,我可以直接在 javascript 和 html 代码中看到我的更改。当我离线时,我的应用程序依赖于我的 service worker 中的代码。此代码仍然是旧代码。当我重新加载我的应用程序时,它似乎没有更新。我的服务人员看起来像这样:

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 中的代码?

4

0 回答 0