<!DOCTYPE html>
<html>

<head>
  <title> Service worker test </title>
</head>

<body>
  <h1>Service worker test</h1>
  <section></section>
  <script>
    const serviceWorker = navigator.serviceWorker;
    serviceWorker.register('/testdata/service_worker.js').then(function (registration) {
      console.log("success!");
      if (registration.installing) {
        console.log('Howdy from your installing page.');
      } else if (registration.active) {
        console.log('Service worker is active now.');
      }
    }, err => {
      console.error("Installing the worker failed!", err);
    });

    function imgLoad(url) {
      // return a promise for an image loading
      return new Promise(function (resolve, reject) {
        var request = new XMLHttpRequest();
        request.open('GET', url);
        request.responseType = 'blob';

        request.onload = function () {
          if (request.status == 200) {
            resolve(request.response);
          } else {
            reject(Error('Failed to load the image: ' + request.statusText));
          }
        };
        // Send the request
        request.send();
      });
    }

    window.onload = function () {
      imgLoad("google_logo.png").then(function (response) {
        var myImage = document.createElement('img');
        myImage.src = window.URL.createObjectURL(response);
        document.querySelector('section').appendChild(myImage);
      }, function (Error) {
        console.log(Error);
      });
    }

  </script>
</body>

</html>