index.html

<html>
    <head>
        <link rel="manifest" href="./manifest.json">
    </head>
    <body>
        <h1>Test gitbhub page, hoping it's https</h1>
        <button onclick="sendMessageToSw()">Click me</button>
        <br/>
        <input id="txtInput" type="text"/>
        <button onclick="add()">Add</button>
    </body>

    <script>

        function add()
        {
            var input = document.getElementById("txtInput");
            console.log(`will be adding input with text ${input.value}`);
        }

        if(self.IndexedDB){
            console.log('IndexedDB is supported');
        }

        function sendMessageToSw()
        {
            console.log(`sending message with data...${new Date().toLocaleString()}`);
            sw.postMessage(`Hi worker, here is data: ${new Date().toLocaleString()}`);
        }


        var sw;// = serviceWorkerRegistration.active;

async function registerSW() { 
  if ('serviceWorker' in navigator) { 
    try 
    {
        console.log("registering service worker.")
        sw = await navigator.serviceWorker.register('./sw.js').active; 

        console.log("registered service worker.")

        navigator.serviceWorker.addEventListener('message', event => {
            // event is a MessageEvent object
            console.log(`The service worker sent me a message: ${event.data}`);
        });


        navigator.serviceWorker.ready.then( registration => {
            sw = registration.active;
            registration.active.postMessage("Hi service worker");
        });


    } catch (e) {
      alert('ServiceWorker registration failed. Sorry about that.'); 
    }
  } else {
    //document.querySelector('.alert').removeAttribute('hidden'); 
  }
}

registerSW();

    </script>
</html>