Service worker demo

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Kittens!</h1>
    <img src="https://placekitten.com/440/200" alt="kitty1">
    <img id="myImage" src="" alt="kitty2">
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  </body>

</html>


if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register(window.location.href + 'service-worker.js')
    .then(function() {
      console.log('sw registered');
    })
    .catch(function(e) {
      console.log('sw-error:', e);
    });
} else {
  console.error('this browser does not support service workers');
}

fetch('https://placekitten.com/300/200').then(function(response) {
  if(response.ok) {
    response.blob().then(function(myBlob) {
      var objectURL = URL.createObjectURL(myBlob);
      var img = document.getElementById('myImage');
      img.src = objectURL;
    });
  } else {
    console.log('Network response was not ok.');
  }
})
.catch(function(error) {
  console.log('There has been a problem with your fetch operation: ' + error.message);
});

This Plunker demonstrates the service worker's `fetch` handler. It prints the
URL of all fetch requests in the console. See [Using Service Workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers)
for more details.

If modifying the Plunker's service worker script, remember to delete the currently
registered service worker from your browser:

 1. Go to *DevTools > Resources (or Applications) tab*.
 2. Click *Service Workers* on left panel.
 3. The service worker on the page should appear on the right. Click *Delete* to remove it.
 4. From the Live Preview panel, rerun the Plunker twice (once to install, and again to activate).
 5. Check the console log for fetch events.

http://stackoverflow.com/questions/37718551/can-javascript-or-serviceworkers-detect-network-activity-ajax-events

self.addEventListener('fetch', function(event) {
  console.log("fetch event:", event.request.url);
});

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);

body {
  background: url(http://www.imagestowallpapers.com/wp-content/uploads/2015/12/CSS-Background-Image.jpg) no-repeat center center fixed;
  background-size: cover;
}