there are usually two types of pwa update caches: automatic updates and manual updates.
you can update it manually during register.
navigator.serviceWorker.register('/service-worker.js').then(reg => {
// sometime later
reg.update();
});
or add the version like this, not update every visit
var version = 'v1';
navigator.serviceWorker.register('/service-worker.js').then(function (reg) {
if (localStorage.getItem('sw_version') !== version) {
reg.update().then(function () {
localStorage.setItem('sw_version', version)
});
}
});
or update automatically. In the sw.js file, update the cacheName in each manual update
.
// active
var cacheName = "cachev2"
self.addEventListener('install', function (event) {
event.waitUntil(self.skipWaiting());
});
self.addEventListener('activate', function (event) {
event.waitUntil(
Promise.all([
//
self.clients.claim(),
//
caches.keys().then(function (cacheList) {
return Promise.all(
cacheList.map(function (cacheName) {
if (cacheName !== 'cachev1') {
return caches.delete(cacheName);
}
})
);
})
])
);
});
or there is another way, that is, the API is followed by query with a parameter of version. If this parameter is changed, the path of the whole fetch match will be different.
but this will modify the logic code, which is not very good.
you can see this reference