main.js

// Without the `sendMessage()` promise-based function, but we want to teach them how to handle if something goes wrong here?

if ('serviceWorker' in navigator && 'SyncManager' in window && 'Notification' in window) {
  window.addEventListener('load', () => {
    fetchLatestHeadlines();
    navigator.serviceWorker.register('./service-worker.js')
      .then(registration => navigator.serviceWorker.ready)
      .then(registration => {
        Notification.requestPermission();
        $('#submit-article').on('click', function(event) {
          let headline = $('#headline-input').val();
          let byline = $('#byline-input').val();

          navigator.serviceWorker.controller.postMessage({ 
            type: 'add-article',
            article: { headline, byline, id: Math.random() }
          });
          // sendMessage({ 
          //   type: 'add-article',
          //   article: { headline, byline, id: Math.random() }
          // });
        });

      }).catch(err => {
        // registration failed :(
        console.log(`ServiceWorker registration failed: ${err}`);
      });
  });
}