index.html

## index.html
<html>
  <head>
    <!-- ... -->
  </head>
  <body>
     <!-- ... -->
    <script>
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/sw.js',  { scope: '/test/' }).then(
      function (reg) {
        console.log('Service Worker registriert', reg)
      }, function (err) {
        console.log('Fehler: ', err)
      })
    }
    </script>
  </body>
</html>

## sw.js
// Installation

this.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('meinCacheVersion1').then(function(cache) {
      return cache.addAll([
        '/test/',
        '/test/index.html',
        '/test/style.css',
        '/test/bundle.js',
        '/test/logo.jpg',
		    '/test/sorry-offline.html',
      ]);
    })
  );
});

// Fetch = Netzwerkabfragen abfangen

this.addEventListener('fetch', function(event) {
  event.respondWith(
    // Reagiere auf Anfragen mit passenden Ressourcen aus dem Cache
    caches.match(event.request).catch(function() {
      // Wenn das nicht möglich ist, leite sie an das Netzwerk weiter
      return fetch(event.request).then(function(response) {
 	      // Sobald das geschehen ist, befülle 'meinCacheVersion1' mit den angefragten Ressourcen
        return caches.open('meinCacheVersion1').then(function(cache) {
          cache.put(event.request, response.clone());
          return response;
        });
      }).catch(function() {
        // Scheitert die Cache- und Netzwerkanfrage, liefere sorry-offline.html
        return caches.match('/test/sorry-offline.html');
      });
    })
  );
});

// Aktivierung = Aktualisierung des Cache

this.addEventListener('activate', function(event) {
  let cacheWhitelist = ['meinCacheVersion2'];

  // Lösche alle Caches, die nicht in der Whitelist genannt sind
  event.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (cacheWhitelist.indexOf(key) === -1) {
          return caches.delete(key);
        }
      }));
    })
  );
});