workbox/test/workbox-webpack-plugin/static/example-project-1/index.html

<h1>Index</h1>

<script>
  // Helper function which returns a promise which resolves once the service worker registration
  // is past the "installing" state.
  function waitUntilInstalled(registration) {
    return new Promise(function (resolve, reject) {
      if (registration.installing) {
        // If the current registration represents the "installing" service worker, then wait
        // until the installation step (during which the resources are pre-fetched) completes
        // to display the file list.
        registration.installing.addEventListener('statechange', function (e) {
          if (e.target.state === 'installed') {
            resolve();
          } else if (e.target.state === 'redundant') {
            reject();
          }
        });
      } else {
        // Otherwise, if this isn't the "installing" service worker, then installation must have been
        // completed during a previous visit to this page, and the resources are already pre-fetched.
        // So we can show the list of files right away.
        resolve();
      }
    });
  }

  const queryString = location.search.substring(1);
  const keyValues = queryString.split('&');
  const searchParams = {};
  keyValues.forEach((keyValue) => {
    const split = keyValue.split('=');
    if (split[1].indexOf('/') === split[1].length - 1) {
      split[1] = split[1].substring(0, split[1].length - 1);
    }
    searchParams[split[0]] = decodeURIComponent(split[1]);
  });
  navigator.serviceWorker
    .register(searchParams.sw)
    .then((registration) => {
      return waitUntilInstalled(registration);
    })
    .then(() => {
      return window.caches
        .keys()
        .then((keys) => {
          return window.caches.open(keys[0]);
        })
        .then((cache) => {
          return cache.keys();
        });
    })
    .then((entries) => {
      window.__testresult = {
        entries: entries.map((entry) => {
          return entry.url;
        }),
      };
    })
    .catch((err) => {
      document.body.style.color = 'red';
      document.body.innerHTML = `<h1>${err.message}</h1>

    <pre>${err.stack}</pre>`;

      console.error(err.message);
      console.error(err.stack);

      // This is just to help with local development so we know there is an error
      setTimeout(() => {
        window.__testresult = {
          error: err,
        };
      }, 5 * 1000);
    });
</script>