I am trying to get a service worker to be able to subscribe for notifications as well as send push notifications. To do this I am registering a service worker (one shows in the Chrome console) and then trying to do my task there. So far I can register a service worker but it will not show in the navigator like a bunch of guides said it should. Below is my current code stripped down to a minimum test case. I am doing this in Vue.js as my front end framework.

Register

import { register } from 'register-service-worker'
  console.log('Registering service worker')
  register(`service-worker.js`, {scope: '/'},{
    ready () {
      console.log('Service worker is ready.')
    },
    registered () {
      console.log('Service worker has been registered.')
    },
    error (error) {
      console.error('Error during service worker registration:', error)
    }
  })

serviceworker file

console.log(navigator) // This is where I am manually checking for serviceWorker to exist

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
        console.log("SW Registered pre push manager")
    })
}

I have researched google and SO and all that points to is that I need https except on localhost (which I am on) and that I need to make sure the scope is correct, both are good there.

My question is how can I get this to work where the code inside my if statement will run