thepassle

self.addEventListener('activate', event => {
  // clean up old caches etc etc
  clients.claim();
});

thepassle

self.addEventListener('activate', event => {
  // clean up old caches etc etc
  // ...
});

thepassle

self.addEventListener('install', event => {
  // precache assets etc etc
  self.skipWaiting();
});

thepassle

self.addEventListener('install', event => {
  // precache assets etc etc
  // ...
});

thepassle

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

thepassle

// cache only, or any other caching strategy
self.addEventListener('fetch', function(event) {
  event.respondWith(caches.match(event.request));
});

thepassle

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames
          .filter(cacheName => cacheName.startsWith('my-cache-v') 
             && cacheName !== CACHENAME)
          .map(cacheName => caches.delete(cacheName))
      )
    })

thepassle

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHENAME).then(cache => {
      return cache.addAll([
        './index.html',
        './main.4c088efe.js',
        './about.cd95a028.js',
        './contact.d0b533e7.js',
        './offline.eab917fd.js',
      ]);

thepassle

<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('./sw.js');
    });
  }
</script>

thepassle

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.open('my-app').then(function(cache) {
      return cache.match(event.request).then(function(response) {
        const fetchPromise = fetch(event.request).then(function(networkResponse) {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        })
        return response || fetchPromise;
      })