app.js

// register service worker

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service_worker/sw.js', { scope: '/service_worker/' }).then(function(reg) {
    
    if(reg.installing) {
      console.log('Service worker installing');
    } else if(reg.waiting) {
      console.log('Service worker installed');
    } else if(reg.active) {
      console.log('Service worker active');
    }
    
  }).catch(function(error) {
    // registration failed
    console.log('Registration failed with ' + error);
  });
};

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

    request.onload = function() {
      if (request.status == 200) {
        var arrayResponse = [];
        arrayResponse[0] = request.response;
        arrayResponse[1] = imgJSON;
        resolve(arrayResponse);
      } else {
        reject(Error('Image didn\'t load successfully; error code:' + request.statusText));
      }
    };

    request.onerror = function() {
      reject(Error('There was a network error.'));
    };
    // Send the request
    request.send();
  });
};

var divSection = document.querySelector('div');

window.onload = function() {

  // load each set of image, alt text, name and caption
  for(i = 0; i<=Gallery.images.length-1; i++) {
    imgLoad(Gallery.images[i]).then(function(arrayResponse) {

      var myImage = document.createElement('img');
      var myCaption = document.createElement('caption');
      //var imageURL = window.URL.createObjectURL(arrayResponse[0]);

      myImage.src = arrayResponse[1].url;
      myImage.setAttribute('alt', arrayResponse[1].alt);
      myCaption.innerHTML = '<strong>' + arrayResponse[1].name + '</strong>';

      var colDivSection = divSection.appendChild(document.createElement('div'));
      colDivSection.className = "col-md-4";
      colDivSection.style.height = "166px";
      colDivSection.style.width = "535px";

      var dataDivSection = colDivSection.appendChild(document.createElement('div'));
      dataDivSection.style.display = "block";
      dataDivSection.align = "center";

      dataDivSection.appendChild(myImage);
      dataDivSection.appendChild(myCaption);
    }, function(Error) {
      console.log(Error);
    });
  };

};