/* main.js */

if (
  'serviceWorker' in navigator
  && !navigator.serviceWorker.controller
) {
  navigator.serviceWorker.register('/service-worker.js')
}

// The same, but in a function and with more explanation

function installServiceWorker () {

  // Check Service Workers support.
  if (!('serviceWorker' in navigator)) { return }

  // Check there’s no Service Worker already controlling the page.
  if (!navigator.serviceWorker.controller) {

    // Fetch and Register Service Worker.
    navigator.serviceWorker.register('/service-worker.js')

    // … or, optionnally with a scope
    navigator.serviceWorker.register('/service-worker.js', {
      scope: 'my/app/scope/',
    })
  }
}

/* service-worker.js */

// Cache name and version.
const CACHE_VERSION = '1.0.0'
const cacheName = `offline-v${CACHE_VERSION}`

// Resources we want to cache.
const offlineResources = [
  '/offline.html',
  'css/offline.css', // used by `offline.html`
]


// Let’s cache during the `install` event

self.addEventListener('install', e => {

  /* Hold the event and open the cache.
   *
   * `waitUntil` prevents the event to be released until
   * the Promise resolves or fails.
   */
  e.waitUntil(caches.open(cacheName)

    // Add resources to the cache.
    .then(cache => cache.addAll(offlineResources))

    // Activates SW now. If you remove this line, the SW will
    // only take control of the page after a page reload.
    .then(() => self.skipWaiting())
  )
})


// A client (= `window`) wants to reach the network

self.addEventListener('fetch', e => {

  // The browser requests HTML content.
  if (
    e.request.method === 'GET'
    && e.request.headers.get('Accept').includes('text/html')
  ) {
    /* respondWith() is the combination of:
     * 1. preventing default fetch()
     * 2. returning a Promise resolving into a Response
     */
    return e.respondWith(

      // Check the network first 
      fetch(e.request)

        // Requested page found 
        .then(response => response)

        // No network, fallback to cached `offline.html`. 
        .catch(error => caches.match('/offline.html'))
    )
  }

  // The browser requests other content.
  e.respondWith(
    fetch(e.request)
      .then(response => response)
      .catch(error => caches.match(e.request))
  )
})

/* service-worker.js */

const resourcesToCache = [
  '/',
  '/contact/',
  'css/app.css',
  'js/app.js',
]

self.addEventListener('fetch', e => {

  // Looking in the cache for a URL matching the requested one
  e.respondWith(caches.match(e.request).then(
    response => response || fetch(e.request)
  ))
})

But…

const CACHE_VERSION = '0.3'
const cacheName = `cache-v${CACHE_VERSION}`

const resourcesToCache = [
  '/',
  'site.webmanifest',

  'css/app.css',
  'js/app.js',
  'storage/data.json',
]

 /* Some functions, used later in event listeners. */

// Fill the cache.
const addResourcesToCache = () => caches.open(cacheName)
  .then(cache => cache.addAll(resourcesToCache))


// A function to clean the old cache.
const flushOldCaches = () => caches.keys()
  .then(keys => Promise.all(keys

    // If the cache version is different, it means it’s an old one.
    .filter(key => !key.endsWith(CACHE_VERSION))

    // Delete the cache matching the keys.
    .map(key => caches.delete(key))
  ))


/* Event listeners. */

// Like before, we add resources to a cache.
self.addEventListener('install', e => {
  e.waitUntil(addResourcesToCache().then(() => self.skipWaiting()))
})

// On Service Worker activation, we free the stale cache.
self.addEventListener('activate', e => {
  e.waitUntil(flushOldCaches().then(() => self.clients.claim()))
})

Like Web Workers, it’s all about messages.

/* service-worker.js */

// 3. Helper function to send a message to the main thread.
const notifyClients = data => self.clients.matchAll().then(clients =>
  clients.forEach(client => client.postMessage(data))
)

// 2. Listen to message from the main thread.
self.addEventListener('message', e => {

  if (e.data.action === 'performUpdate') {
    addResourcesToCache()
      .then(() => flushOldCaches())
      .then(() => notifyClients({ dataCacheUpdate: true }))
  }
})

/* main.js */

// 4. Listen to message from the service worker.
navigator.serviceWorker.addEventListener('message', e => {
  if ('dataCacheUpdate' in e.data) {
    toastTheUser('OMG APP UPDATED! ')
  }
})

// 1. Ask an app update to the Service Worker.
navigator.serviceWorker.controller.postMessage({ action: 'performUpdate' })

Other (prefered) option: use the Channel Messaging API.