Deprecating the Service Worker

General Press & News
21

Hi @NathanosDev , I’ve been struggling a bit with the PWA, specifically with the service worker part. Loading the service worker file from the normal domain (e.g. https://xfl6h-3qaaa-aaaai-acq3a-cai.icp0.io/service-worker.js) doesn’t work for me. But loading the service worker file from the raw subdomain (e.g. https://xfl6h-3qaaa-aaaai-acq3a-cai.raw.icp0.io/service-worker.js) works, only though if the app is also being served from the raw subdomain (e.g. https://xfl6h-3qaaa-aaaai-acq3a-cai.raw.icp0.io/). Is this expected behavior (i.e. that only the raw subdomain supports this)? Or should I be able to load the service worker file from the normal domain as well?

It’s a Svelte app and I’m using Vite, in case that might be relevant :slight_smile:
It’d be great to have your input and see if you might have additional ideas around this.

1 Like
22

Sorry it looks like we missed something in how we configured the boundary nodes. We’re discussing how we should fix this.

In the meantime you can work around by putting your service worker under a directory (such as /js/service-worker.js) or by switching to a custom domain.

1 Like
23

awesome, thank you for your quick reply and the info!

I can confirm that loading the service worker file from a subdirectory worked :slight_smile:

There is one gotcha; having the service worker file in the subdirectory also affects its scope (i.e. the scope is now by default the subdirectory, not the root of the app). If you want to scope it to the root, you can do this by setting the scope explicitly to the root and you also must set the Service-Worker-Allowed header such that the browser won’t complain but loads the service worker file successfully. Also see this article about this: How to change the scope of a service worker - Pushpad

Putting a few bites here, in case it might help anyone (it’s a Svelte app with Vite and I’m using the vite-plugin-pwa plugin):
in vite.config.ts, set the output directory in the PWA options for vite-plugin-pwa, e.g.
…,
outDir: ‘./dist/serviceWorker’,
…

in e.g. index.html, load the service worker file from there and set its scope to the root: navigator.serviceWorker.register(‘./serviceWorker/service-worker.js’, { scope: ‘/’ })

in .ic-assets.json, set the required header for the scope change:
“Service-Worker-Allowed”: “/”

That should do the trick :+1:

2 Likes