patrickbrandt/service-worker-example.html

## service-worker-example.html
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      if (!navigator.serviceWorker.controller) {
        navigator.serviceWorker.register('/sw.js', { scope: '.'}).then(function(registration) {
          console.log('ServiceWorker registration successful with scope: ', registration.scope);
          window.location.reload();
        }).catch(function(err) {
          console.log('ServiceWorker registration failed: ', err);
        });
      } else {
        console.log('service worker already registered');
      }
    </script>

  </head>
  <body>
    <img src="http://www.banditbrandit.com/Assets/Images/Silhouette.gif"> <!-- gets trapped -->
    <img src="Label.gif"> <!-- gets trapped -->
    <iframe src="http://www.banditbrandit.com"></iframe> <!-- won't work, as origin domain is different from Service Worker domain -->
  </body>
<html>

## service-worker.js
var CACHE_NAME = 'sw-test';
var installed = false;

// Set the callback for the install step
self.addEventListener('install', function(event) {
  console.log('sw installed');
});

self.addEventListener('activate', function(event) {
  // Calling claim() to force a "controllerchange" event on navigator.serviceWorker
  console.log('sw activated');
  event.waitUntil(self.clients.claim());
});

self.addEventListener('fetch', function(event) {
  console.log('fetch event ocurred for: ', event.request.url);
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }

        // IMPORTANT: Clone the request. A request is a stream and
        // can only be consumed once. Since we are consuming this
        // once by cache and once by the browser for fetch, we need
        // to clone the response
        var fetchRequest = event.request.clone();

        return fetch(fetchRequest).then(
          function(response) {
            // Check if we received a valid response
            if(!response || response.status !== 200) {
              return response;
            }

            console.log('response.type ', response.type);

            // IMPORTANT: Clone the response. A response is a stream
            // and because we want the browser to consume the response
            // as well as the cache consuming the response, we need
            // to clone it so we have 2 stream.
            var responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
    );
});
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript">
	if (!navigator.serviceWorker.controller) {
	navigator.serviceWorker.register('/sw.js', { scope: '.'}).then(function(registration) {
	console.log('ServiceWorker registration successful with scope: ', registration.scope);
	window.location.reload();
	}).catch(function(err) {
	console.log('ServiceWorker registration failed: ', err);
	});
	} else {
	console.log('service worker already registered');
	}
	</script>

	</head>
	<body>
	<img src="http://www.banditbrandit.com/Assets/Images/Silhouette.gif"> <!-- gets trapped -->
	<img src="Label.gif"> <!-- gets trapped -->
	<iframe src="http://www.banditbrandit.com"></iframe> <!-- won't work, as origin domain is different from Service Worker domain -->
	</body>
	<html>
	var CACHE_NAME = 'sw-test';
	var installed = false;

	// Set the callback for the install step
	self.addEventListener('install', function(event) {
	console.log('sw installed');
	});

	self.addEventListener('activate', function(event) {
	// Calling claim() to force a "controllerchange" event on navigator.serviceWorker
	console.log('sw activated');
	event.waitUntil(self.clients.claim());
	});

	self.addEventListener('fetch', function(event) {
	console.log('fetch event ocurred for: ', event.request.url);
	event.respondWith(
	caches.match(event.request)
	.then(function(response) {
	// Cache hit - return response
	if (response) {
	return response;
	}

	// IMPORTANT: Clone the request. A request is a stream and
	// can only be consumed once. Since we are consuming this
	// once by cache and once by the browser for fetch, we need
	// to clone the response
	var fetchRequest = event.request.clone();

	return fetch(fetchRequest).then(
	function(response) {
	// Check if we received a valid response
	if(!response \|\| response.status !== 200) {
	return response;
	}

	console.log('response.type ', response.type);

	// IMPORTANT: Clone the response. A response is a stream
	// and because we want the browser to consume the response
	// as well as the cache consuming the response, we need
	// to clone it so we have 2 stream.
	var responseToCache = response.clone();

	caches.open(CACHE_NAME)
	.then(function(cache) {
	cache.put(event.request, responseToCache);
	});

	return response;
	}
	);
	})
	);
	});