ServiceWorker Basics

<!DOCTYPE html>
<html>
<body>
    <h1>Demos</h1>
    <script src="loader.js"></script>
    <script src="app.js"></script>
</body>
</html>

if (!('serviceWorker' in navigator)) {
    window.alert(`I'm affraid this demo won't work in this browser, please try it in Chrome or Firefox for the best results`);
    throw new Error('Browser too old!');
}

navigator.serviceWorker.register('service-worker.js')
    .then(() => { console.log('Service worker Registered!') })
    .catch((err) => { console.error('Error registering Service worker:', err) });

// Service worker

const dataUrl = "https://jsonplaceholder.typicode.com/users";

// Fetch the data with the new `Fetch` API
fetch(dataUrl)
  // Parse the JSON response into a JS object
  .then(resp => resp.json())
  // Show this object on the page.
  .then(respObj => {
    addTitle('Data: ' + respObj.length);
  }).catch(err => {
    addTitle('Error: ' + err);

  });


// Below this are some functions to visualize the data on the page
function addTitle(title) {
  let titleElement = document.createElement('h3');
  titleElement.innerText = title;
  document.body.appendChild(titleElement);
}