<!DOCTYPE html>
<meta charset=utf-8>
<title>Controlled frame for Cache API test with credentials</title>
<script>

function xhr(url, username, password) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest(), async = true;
    xhr.open('GET', url, async, username, password);
    xhr.send();
    xhr.onreadystatechange = function() {
      if (xhr.readyState !== XMLHttpRequest.DONE)
        return;
      if (xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(new Error(xhr.statusText));
      }
    };
  });
}

window.onmessage = function(e) {
  Promise.all(e.data.map(function(item) {
    return xhr(item.name, item.username, item.password);
  }))
    .then(function() {
      navigator.serviceWorker.controller.postMessage('keys');
      navigator.serviceWorker.onmessage = function(e) {
        window.parent.postMessage(e.data, '*');
      };
    });
};

</script>
<body>
Hello? Yes, this is iframe.
</body>