PWA应用程序的自动更新解决方案

Question

I want to turn my normal website into a progressive web app. For that everything is finished. The Website is responsible and I already set up a manifest. Now the last part comes to me. The ServiceWorker to save the website to the cache of the device. My problem is that I can not find a simple solution for that. Because for my website it is important that the user runs the new version every time I made an update. Do you know a solution how let the ServiceWorker check if anything changed once the user opens the app and after that delete the old cache and make a new one based on the new files and the new code?
It would be very great, when somebody could provide a code example.
My HTML SIDE:

<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('./sw.js')
    .then(reg => console.log(reg))
    .catch(err => console.log(err));
  }
</script>  

AND HERE THE sw.js:

    self.addEventListener('install', event => event.waitUntil(
  caches.open('web_pwa').then(cache => cache.add('/'))
));

self.addEventListener('fetch', event => event.respondWith(
  caches.open('web_pwa')
    .then(cache => cache.match(event.request))
    .then(response => response || fetch(event.request))
));

Answer 1

Short description: Update SW file a bit and handle removing old cache in activate event.

Detailed description

Whenever you do changes in your code files (other than sw.js ) . You need to trigger both the install and activate events in service worker. In order to update your changes.

In order to trigger these events the sw.js should be updated even a single bit. (simply atleast a character).

By convention developers handle this by maintaining Versioning . Also it will be easy to add and delete caches.

const version = 'v2';

self.addEventListener('install', res => {
  caches.open(version).then(cache => {
    cache.addAll(caches);
  });
  console.log('[sw] Installed successfully :');
  // self.skipWaiting();
});

self.addEventListener('fetch', event => event.respondWith(
  caches.open(version)
    .then(cache => cache.match(event.request))
    .then(response => response || fetch(event.request))
));

If you need to directly update the sw.js inspite of user's status then uncomment the self.skipWaiting() as it skips waiting for activation and gets activated immediately.

Inside activate event is where you have to delete the old caches based on cache version.

self.addEventListener('activate', event => {
  caches.keys().then(function(cacheNames) {
    cacheNames.forEach(function(cacheName) {
      if (cacheName !== version) {
        caches.delete(cacheName);
      }
    });
  });
}