How to manually register a service worker

[fev4]

Hey there,

This is most probably a newbie question, but I'm really confused as to how to manually register a service worker. I've set kit.serviceWorker.register: false in my svelte.config.js. I want to manually register it to create custom logic for it.

Here's how the service worker looks like at the moment (but more logic will be added/modified once I'm able to register it without problems):

// ??/service-worker.js
import { build, files, prerendered, version } from '$service-worker';
import {
  cleanupOutdatedCaches,
  precacheAndRoute,
} from 'workbox-precaching';

const precache_list = [
  '/app',
  ...build,
  ...files,
  ...prerendered,
].map((s) => ({
  url: s,
  revision: version,
}));
precacheAndRoute(precache_list);
cleanupOutdatedCaches();

Here's all the different ways I've tried:

Register it using onMount on the root +layout.svelte.

I've tried registering with this code:

// routes/+layout.svelte
<script lang="ts">
  ...
  onMount(() => {
    if ('serviceWorker' in navigator) {
      console.log(
        'Service Worker is supported, registering service worker'
      );
      navigator.serviceWorker.register('??/service-worker.js', {
        type: dev ? 'module' : 'classic',
      });
    }
  });
</script>

In this case I'm not able to use the load event on the window object via addEventListener because the page loads too fast, and once SvelteKit takes control the load event has passed. So I'm forced to use, in this instance, the onMount life cycle hook.

Besides that, the main question is (a two-part question):

Where do I position the service-worker.js file? In the /lib/ folder? In the /static/ folder? Or where else? And how do I call it within navigator.serviceWorker.register?

If I position it at the root of /static/ folder, calling it like this /service-worker.js seems to work, but I see these errors:

Uncaught TypeError: Failed to resolve module specifier "$service-worker". Relative references must start with either "/", "./", or "../".

Meaning I wouldn't be able to use the $service-worker package which would be needed to access all the goodies that come with it (files, prerendered, etc.). And given it's in the static folder I wouldn't be able to use TypeScript in the future unless I start to play around with Vite's config.

If I position it at the root of the /lib/ folder calling it like this $lib/service-worker doesn't work. Calling it like ../lib/service-worker doesn't work either. This all returns something similar to:

Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('http://localhost:5173/lib/') with script ('http://localhost:5173/lib/service-worker.js'): A bad HTTP response code (404) was received when fetching the script.

Register it on the app.html using the window load event

At the bottom of the head in the app.html file I added something like:

// app.html
    <script type="module">
      if ('serviceWorker' in navigator) {
        const dev = "%sveltekit.env.PUBLIC_DEV%" === 'true' ? true : false;
        window.addEventListener('load', () => {
          console.log(
            'Service Worker is supported, registering service worker'
          );
          navigator.serviceWorker.register('??/service-worker.js', {
            type: dev ? 'module' : 'classic',
          });
        });
      }
    </script>

Notice two things, I'm able to use window.addEventListener('load', ...), and the need to use a environment variable (in this case called PUBLIC_DEV) to simulate what the dev variable from $app/environment does.

Now the same question applies here. Where do I position the service-worker.js file? In the /lib/ folder? In the /static/ folder? And how do I call it within navigator.serviceWorker.register?

If I position it at the root of /static/ folder, calling it like this %sveltekit.assets%/service-worker.js seems to work, but I see these errors (again):

Uncaught TypeError: Failed to resolve module specifier "$service-worker". Relative references must start with either "/", "./", or "../".

Meaning I wouldn't be able to use the $service-worker package (same problem with TypeScript).

If I position it at the root of the /lib/ folder calling it like this $lib/service-worker doesn't work. Calling it like ./lib/service-worker doesn't work either. This all returns something similar to:

Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('http://localhost:5173/lib/') with script ('http://localhost:5173/lib/service-worker.js'): A bad HTTP response code (404) was received when fetching the script.

Another caveat this approach has is that I can't minify the <script> tag in the app.html easily unless I start doing some other post processing.

Main goal

If I could use TypeScript, the $service-worker package and guarantee that the service worker is registered via the load window event, while being able to have custom registration and logic, that would be the perfect solution. But I don't know how to get there.

I'm sure I'm missing something very obvious, but I just can't see it yet. Any help would be appreciated.

[x3malmusic]

so for me it looks like the root is actually the root of your project, for example i left my service-worker file in the "src" folder, so the path to it looks like this './src/service-worker.ts'

hope it helps someone