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);
        }
      }));
    })
  );
});
	<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>
	// 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);
	}
	}));
	})
	);
	});