How to point to current directory in serviceworker.js - service-worker

Question

I have my service worker installed on a staging directory
Main Website is on: https:example.com
Staging is on: https:example.com/test/
Service Worker path: https:example.com/test/serviceworker.js
This is how I register service worker:
navigator.serviceWorker.register('https:example.com/test/serviceworker.js', {scope: '/test/'})
.then(registration => {
console.log(`Service Worker registered! Scope: ${registration.scope}`);
})
Service worker works just fine, and is installed.
My concern is that inside serviceworker.js I want to use the / to point to the path of the current directory automatically, which is in this case: /staging/
For example when I want to cache the homepage in my staging site
/**
* Cache the homepage.
*/
workbox.routing.registerRoute('/', workbox.strategies.staleWhileRevalidate();
Here its caching https:example.com not https:example.com/test/
I know I can simply change registerRoute('/') to registerRoute('/staging/)'
But that is not efficient, and will make me need to have different version of the serviceworker for localhost, staging, and deployment.
I want to know what's the right way to do it here, so I can set the scope '/' to the current directory that the serviceworker.js is in.
Thank you.

Answer 1

Ok I think I figured how to do it the right way.
How to point to current directory: simply './' Instead of '/'
/**
* Cache the homepage.
*/
workbox.routing.registerRoute('./', workbox.strategies.staleWhileRevalidate();
How to cache files and images in current path: './image/' instead of '/image/'
const urlsToCache = [
'./image/fallback.png',
'./offline/'
];
Now the same file works the same locally and on staging.
This is such a newbie mistake, I need to be more clever :)
Edit:
I found this in Google documentation (The Service Worker Lifecycle):
The default scope of a service worker registration is ./ relative to
the script URL. This means if you register a service worker at
//example.com/foo/bar.js it has a default scope of //example.com/foo/.

Answer 2

in your case
you will need a flag to wether decide in the service worker registration if it's staging or production.
having the staging on a sub path of your production domain is not optimal at all.