service worker

Fetch html

Install event happen

navigator.serviceWorker.register(/sw.js)

Resolve install promise

self.addEventListener(install, event => {  
  event.waitUntil(somePromise);  
});

Waiting if a sw has already worked

Activate event happen

self.addEventListener(activate, event => {  
});

Each of these happen

After activation,

• go another page
• reload
• call clients.claim()

Handle event

self.addEventListener(fetch, event => {  
});

Introduce new version of sw

Change sw contents

Install success

Waiting

Some happen

• Close all tab that show the domain
• skipWaiting()

activate

Caution

Dont change sw url

Update may skip some version

eg v2 -> v6(v3~5 has been not installed)

SPA

Page navigation never happen.
So user should close and open to get sw effects.

You should call
skipWaiting
and
clients.claim()

So you should implements sw that work together with old sw version.

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(reg => {
        setInterval(() => {
          reg.update() 
        }, 15000) // Your update span
      });
  });
}