Customize output name of service worker

[shirohana]

Describe the problem

I'm trying to migrate my old React project to SvelteKit.

In my old project, I have registered a service worker in /sw.js, but in SvelteKit, the service worker is located in /service-worker.js and cannot be changed.

https://github.com/sveltejs/kit/blob/main/packages/kit/src/runtime/server/page/render.js#L401-L405

// #L401-L405
blocks.push(`if ('serviceWorker' in navigator) {
  addEventListener('load', function () {
    navigator.serviceWorker.register('${prefixed('service-worker.js')}'${opts});
    //                                            ^ hard-coded here
  });
}`);

As a workaround, I have to add a pre-build step to build sw.js isolatedly, then copy it into /static folder, but I feel it's not a good solution.

Describe the proposed solution

It would be great if we can customize the location in svelte.config.js likes this:

// svelte.config.js
const config = {
  kit: {
    serviceWorker: {
      register: true,
      // `scriptURL` comes from
      // https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/register#syntax
      scriptURL: '/sw.js',
    },
  },
}
export default config

Alternatives considered

No response

Importance

nice to have

Additional Information

No response

[craig-jennings]

I think this is already possible - https://kit.svelte.dev/docs/configuration#files

const config = {
  kit: {
    files: {
      serviceWorker: './path/to/sw.js',
    }
  }
}

[eltigerchino]

In SvelteKit, if you have a src/service-worker.js file (or src/service-worker/index.js) it will be bundled and automatically registered. You can change the location of your service worker if you need to.

https://kit.svelte.dev/docs/configuration#files

You can disable automatic registration if you need to register the service worker with your own logic or use another solution.

https://kit.svelte.dev/docs/service-workers

[shirohana]

@craig-jennings @eltigerchino Thanks for your reply.

I apologize if my description was not clear enough.

I would like SvelteKit to automatically build the service worker script and ensure it remains type-safe.

I aim to change the scriptURL registered in the browser, not the location of the source code.

---

I've tried using the kit.files.serviceWorker option. It seems that this option overrides the default source code location of the service worker but has no effect on the scriptURL registered in the browser: https://github.com/sveltejs/kit/blob/main/packages/kit/src/exports/vite/index.js#L224

const service_worker_entry_file = resolve_entry(kit.files.serviceWorker);

Changing this option does not alter the output HTML or the scriptURL.

---

I want to maintain automatic registration but change the scriptURL.

Although I can manually register it to make it /sw.js, I still need to build sw.js first.

If I want to maintain type safety, the easier approach is to continue using SvelteKit for building, as it will generate a TypeScript configuration based on svelte.config.js for us.

However, SvelteKit always builds into service-worker.js, as you can see here: https://github.com/sveltejs/kit/blob/main/packages/kit/src/exports/vite/build/build_service_worker.js

[eltigerchino]

Related TODO comment:

kit/packages/kit/src/exports/vite/index.js

Line 756 in c175335

service_worker: service_worker_entry_file ? 'service-worker.js' : null, // TODO make file configurable?