navigator.serviceWorker.ready never resolves on Chrome only. Edge & Opera work, Firefox errors

In the following code, the ServiceWorker.READY method/promise never resolves: –

    if ("serviceWorker" in navigator) {                 
        await navigator.serviceWorker.register('/Vanilla/CacheManager.js', { scope: '/Vanilla/', type: 'module' })
            .then(reg => {
                    console.log('SW Registered');
                })
            .catch(err => {
                console.log('SW Registration failed with ' + err)
            });
            
        await navigator.serviceWorker.ready
            .then(subscription => {cacheManagerSubscription = subscription})
                    .catch(err => {
                            console.log('Cache Manager Subscription failed with ' + err)
                        });
    }

I have read many answers here and elsewhere about changing the scope for the Service-Worker but the above seems to work with Edge and Opera, just not Chrome (Some JS exception is occuring on FF)

This is the SW code: –

import {config} from "/Vanilla/config.js"

const CACHE_NAME    = config.cacheName
console.log(CACHE_NAME)
    
self.addEventListener('install', (e) => 
{
    try {
    e.waitUntil(
        caches.open(CACHE_NAME).then((cache) => {
            return cache.addAll([
                '/Vanilla/test_sg9.html',
                '/Vanilla/Scales.png',
                '/Vanilla/GlobalStateManager.js',
                '/Vanilla/HomePage.js',
                '/Vanilla/RowDetails.js',
                '/Vanilla/ScrollGrid.css',
                '/Vanilla/ScrollGrid.js',
                '/Vanilla/CacheManager.js',
                '/Vanilla/Utils.js',
                '/Vanilla/test_sg.json',
                '/Vanilla/WebPage.js',
                '/Vanilla/coa.css',
                '/Vanilla/coa.svg',
                '/Vanilla/caller.css'
          ]).then(async () => await self.skipWaiting())
        })
    )
    } catch(err) {
        console.log(err);
    }
    console.log("Leaving install")
})
    
self.addEventListener('activate', (e) => 
{
    e.waitUntil(
        caches.keys().then((keyList) => {
            return Promise.all(keyList.map((key) => {
                if (key !== CACHE_NAME) {
                    console.log('Removing cache', key);
                    return caches.delete(key);
                }
            }))
        })
    )

    e.waitUntil(self.clients.claim())
})

self.addEventListener('fetch', (e) => 
{
    console.log(e.request.url + " my origin " + self.location.origin)
    if (e.request.url.startsWith(self.location.origin)) {
        e.respondWith(
            caches.match(e.request.url, { ignoreVary: true }).then((response) => {
                console.log("Request " + e.request.url)
                if (response) {
                    console.log("Response " + response.url)
                } else
                    console.log("No MATCH")

                return response || fetch(e.request)
            })
        )
    } else
        return fetch(e.request);
})

I thought that maybe it just an old cache on Chrome but I’ve changed the cache version and always delete browser history and unregistered running service workers but just can’t get any feedback from Chrome 🙁

I did see this work around in SO. Is that the best I can hope for?

Full code can be found here.

Working/failing demo can be found here.

Manifest: –

{
  "short_name": "Vanilla",
  "name": "Vanilla Web App",
  "description": "ScrollGrid Vanilla Javascript demo",
  "icons": [
    {
      "src": "/Vanilla/Scales.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/Vanilla/Scales.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "start_url": "/Vanilla/test_sg9.html",
  "background_color": "#00ccdd",
  "theme_color": "#00ccdd",
  "display": "fullscreen"
}