How can I custom root_url to normalize_url normally?

[jonsam-ng]

With the following line:

const root_url = location.pathname.replace(/\/[^\/]+$/, '');

my root_url could be '/s', which lead to a failed route match for my request starts with '/s', but I know my root url should be '/', how can I fix this problem?

[jcubic]

Do you have an example website that show the problem? I forget that you can read directories without slash at the end (I think that I have something like this on my other website).

[jcubic]

The solution is to use self.registration.scope instead of location. This points to the scope of the service worker.

[jonsam-ng]

That maybe works, but self.registration.scope is a absolute path, but normalize_url may receive a relative path as pathname, Is that ok?

let path_name = normalize_url(decodeURIComponent(url.pathname));

[jcubic]

normalize_url path should get path to the route that should start with slash. This function is to remove the path to service worker from the URL request.

If you have path /s as route, normalize_url should return /s from full URL request.

I don't think it make sense to use relative path in route.

I need to check to be sure that the trailing slash is there. The version was not yet released to NPM.

[jcubic]

I think I did a mistake, I tested with wrong demo. self.registration returns full URL not that pathname. And also it only works over HTTPS.

[jonsam-ng]

self.registration.scope returns url with domain, I don't test HTTP yet.

[jcubic]

I fixed the code, now it should work the same as before. self.registration.scope is used first and if it fails to use fallback of location.pathname.

Again, can you show me an example where the library gives problems?

[jonsam-ng]

Sorry for late reply. I can describe the scenario I encountered in detail. My website carries the prefix /s/sw.js when request serviceWorker, and the scope is /. When I register a route similar to /m/getData in my application, I find that the processing logic of the route does not take effect. After debugging, I found that the root_url value is' /m ', which is not what I expected '/', and then in 'normalize_url', the prefix '/m' of the route I registered was removed, that causes the route did not match. I wonder if root_url should allow customization to ensure that 'normalize_url' results as expected.

[jcubic]

If you have service worker /s/sw.js here, the scope of service worker can only be in /s/ so you can only request the URL /s/m/getData. But if you only call it via AJAX you can route this as well, but you have to use full URL with domain name (origin)

I can check what I can do to allow routing /m/getData but the original idea was to only route what's in the current directory. So if you have your app in /foo/bar/ and use get('/baz' you get /foo/bar/baz.

To change this behavior (I don't want to have a breaking change) I would need to introduce @origin that point to the same origin the website is served.

So if you use get('@origin/bar' it will request /bar not /foo/bar/baz. But note that if the worker is not in root directory, you will not be able to open the page in new tab. The Service Worker will only control the request if it's originated from a controlled page.

[jonsam-ng]

Sorry, I don't understand clearly. If I register a service worker like this:

navigator.serviceWorker.register("/s/sw.js", { scope: '/' })

Should I only request from /s/m/getData, instead of /m/getData? I found from MDN as By default, the scope value for a service worker registration is set to the directory where the service worker script is located in ServiceWorkerContainer: register(), if I provided scope, my root url should be '/' or '/s'?

[jcubic]

Yes exactly if you have /s/sw.js file the get('/m/getData') will point to /s/m/getData

You can't provide { scope: '/'} if your service worker is in /s/ directory, this is literally written in the quote you added the scope needs to be {scope: '/s/'} or any nested directory.

[jonsam-ng]

ok, thx, I will recheck my situation.