Registering service worker

I am trying out service worker in my octobercms application. Following the guide on the workbox documentation i have in my layout file

<script>
// Check that service workers are supported
if ('serviceWorker' in navigator) {
  // Use the window load event to keep the page load performant
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js');
  });
}
</script>

and then i created service-worker.js file in the root directory of my app with this in it

console.log('Hello from service-worker.js');`

but i keep getting this error in console

A bad HTTP response code (404) was received when fetching the script. (index):1 Uncaught (in promise) TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.

googled to fixed the issue but things like writing the full directory like so

... navigator.serviceWorker.register('myoctober/service-worker.js'); did not work. In console under Appication->Service worker i also get the status of redundant.