vercel published sveltekit where vite fails to register serviceworker placed in src folder

Question

This question will need someone from vercel team or sveltekit team as it is related to pwa app that I published to vercel: 1- I placed a minifest1.js file in the "static" folder 2- I placed testserviceworker.js file in the "SRC" folder.

When I run my app locally using my laptop by "npm run build" and "npm run preview", vite registers my serviceworker, my cache is populated and the app is installable as pwa.

When I deploy the same code to vercel, vite fails to register the serviceworker. To experiment I added the serviceworker file to the static folder and added a register button in index.svelte to register the file manully when I press the button.

When I press the button, the serviceworker is registered, I'm able to verify it in dev tools, application tab, cache and able to install my app but my lighthouse report showing pwa part as failed.

So my question is regarding vite registering serviceworker by default upon starting the site. Do I need to add a function in load or onMount with "navigator.serviceWorker.register('testserviceworker.js" or there is some kind of magic configuration in vercel or svelte.config.js to point vite to where the serviceworker.js so it register it upon starting the app?

I added the files for manifest and serviceworker here but I don't think they're relative to my question as it is a configuration issue not code issue:

manifest file:

{
  "name": "PWATEST",
  "short_name": "PWATESTSHORTNAME", 
  "start_url": "/",
  "scope" : "/",
  "background_color": "#1b4079",
  "theme_color": "#d62828",
  "display": "fullscreen",
  "icons": [
    {
      "src": "/512svelte-welcome.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose" : "any maskable"
    }    
  ]
}

My testserviceworker.js

console.log("*****hello from testserviceworker.js inside static folder********")

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v3').then((cache) => {
       cache.add(
          './favicon.png'             
       );
    })
  );
});
    
self.addEventListener('activate', function(event) {
   console.log("serviceworker activate fn :", event)
});

self.addEventListener('fetch', function(event) {
 console.log("fetch fn inside serviceworker.js") 
})

Here is the LINK to vercel app running with step by step to test this setup in the home page.

Is there any vercel team member or Sveltekit ninja warriors who can guide me to fix this problem? No one is building websites anymore. Installing pwa is the way to go and Sapper used to include a serviceworker and manifest file by default. For some mysterious reason, vite got involved and that ability disappeared and now after deploying, vite is not able to locate the serviceworker to register it as stated in the sveltekit doc:

Doc-serviceworkers it's often worth using service workers to speed up navigation by precaching your built JS and CSS.

In SvelteKit, if you have a src/service-worker.js file (or src/service-worker.ts, or src/service-worker/index.js, etc) it will be built with Vite and automatically registered.

In conclusion :

1-How to let vite knows about the serviceworker file in specific location like static folder or scoped to a different part of the app?

2-How to fix vite registering the serviceworker if I place the serviceworker.js in src folder?

Hopefully we will get someone from vercel team or sveltekit team to look into this issue. I found this issue and I can disable it but how to register the serviceworker without pressing a button? Put the code in load or onMount?

The published vercel app link is here again for your convenience.

Answer 1

I ended with registeration in the onMount. Now when the app is loaded, the serviceworker is registered and pwa is installable. It passed the lighthouse checks. All green.

Here is the code for onMount:

import { onMount } from 'svelte';


    onMount(async () => {
        
        if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('testserviceworker.js', { scope: '/' }).then(function(reg) {
    // registration worked
    console.log('Registration succeeded. Scope is ' + reg.scope);
  }).catch(function(error) {
    // registration failed
    console.log('Registration failed with ' + error);
  });
}; 



    }); 

To recap: When you publish to vercel -accordning to the sveltekit docs - vite suppose to register the serviceworker for you. 1- Place your serviceworker.js file in the static folder. 2- Add onMount fn and register the serviceworker there. 3- No need to disable vite auto registeration in the svelte.config.js as instructed in the docs as I didn't disable it and it didn't cause any issues.

Hopefully sveltekit 1.0 will be released soon. I'm sure majority of these bugs will be ironed out by then.