navigator.serviceWorker.controller is null until page refresh

This is expected behavior. To take control over all open pages without waiting for refresh/reopen, you have to add these commands to your Service Worker:

self.addEventListener('install', function(event) {
    event.waitUntil(self.skipWaiting()); // Activate worker immediately
});

self.addEventListener('activate', function(event) {
    event.waitUntil(self.clients.claim()); // Become available to all pages
});

You can read more about them in skipWaiting() docs and clients.claim() docs.

Make sure the scope of your service worker includes the url in question.