blackrabbit99/file.html

## file.html
<html>
	<head>
		<script>
			if(navigator.serviceWorker.controller){
				console.log('Listen to SW');
				navigator.serviceWorker.controller.addEventListener('message', function(data){
					console.log('Data from service worker received');
					console.log(data)
				});
			}

			var scope = '/';
			navigator.serviceWorker.register('service-worker.js', {scope: scope})
		    .then(function(r) {
					console.log('Registered', r);
		    })
		    .catch(function(whut) {
		      console.error('uh oh... ');
		      console.error(whut);
		    });
		</script>
		<link type="text/css" rel="stylesheet" href="./style.css">
	</head>
	<body>
		<h1>Consumer</h1>
	</body>
</html>

## service-worker.js
var messanger;
self.addEventListener('install', function(event) {
  console.log('install');
  // pre cache a load of stuff:
  event.waitUntil(
    caches.open('myapp-static-v1')
    .then(function(cache) {
      return cache.addAll([
        '/style.css'
      ]);
    })
    .then(function() {
    	// At this point everything has been cached
      return self.skipWaiting();
    })
  )
});

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

self.addEventListener('fetch', function(event) {
  console.log('fetch event', event.request.url);
  if(/\/style\.css$/.test(event.request.url)){
    event.respondWith(
      caches.match(event.request)
        .then(function(response) {
          self.clients.get(event.clientId).then(function(client) {
            console.log('Send');
            client.postMessage({type: 'request'});
          });
          if (response) {
            return response;
          }
          return fetch(event.request);
        }
      )
    );
  }
});
	<html>
	<head>
	<script>
	if(navigator.serviceWorker.controller){
	console.log('Listen to SW');
	navigator.serviceWorker.controller.addEventListener('message', function(data){
	console.log('Data from service worker received');
	console.log(data)
	});
	}

	var scope = '/';
	navigator.serviceWorker.register('service-worker.js', {scope: scope})
	.then(function(r) {
	console.log('Registered', r);
	})
	.catch(function(whut) {
	console.error('uh oh... ');
	console.error(whut);
	});
	</script>
	<link type="text/css" rel="stylesheet" href="./style.css">
	</head>
	<body>
	<h1>Consumer</h1>
	</body>
	</html>
	var messanger;
	self.addEventListener('install', function(event) {
	console.log('install');
	// pre cache a load of stuff:
	event.waitUntil(
	caches.open('myapp-static-v1')
	.then(function(cache) {
	return cache.addAll([
	'/style.css'
	]);
	})
	.then(function() {
	// At this point everything has been cached
	return self.skipWaiting();
	})
	)
	});

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

	self.addEventListener('fetch', function(event) {
	console.log('fetch event', event.request.url);
	if(/\/style\.css$/.test(event.request.url)){
	event.respondWith(
	caches.match(event.request)
	.then(function(response) {
	self.clients.get(event.clientId).then(function(client) {
	console.log('Send');
	client.postMessage({type: 'request'});
	});
	if (response) {
	return response;
	}
	return fetch(event.request);
	}
	)
	);
	}
	});