Service worker does not work properly with dev server if config.paths.base is set.

sinbino commented 8 months ago

Describe the bug

As the title says, service-worker will not load correctly if you specify a subdirectory in config.paths.base.

The sample confirms that it works correctly if config.paths.base is not set.

For example, if config.paths.base is set to /subdir, the service-worker will fail to start. Looking at the devtools in the browser, it appears that loading https://example.com/@fs/srv/app/src/service-worker.ts is causing a 404 error.

If I open https://example.com/subdir/@fs/srv/app/src/service-worker.ts directly in my browser, the source can be read, so I think config.paths.base is not reflected in this section.

Reproduction

The sample repository is as follows https://github.com/sinbino/issue-sveltekit-paths-base-serviceworker I just added a small service-worker to the skeleton code created by npm create sveltekit. However, since service-worker requires https to work, you may have to go through a reverse proxy that supports SSL to see it work.

When executed, the following error is printed to the console, confirming that the service worker is not running.

Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('https://example.com/subdir/') with script ('https://example.com/subdir/service-worker.js'): ServiceWorker cannot be started

Logs

No response

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (10) x64 Intel(R) Core(TM) i5-10600 CPU @ 3.30GHz
    Memory: 6.18 GB / 9.98 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.5.1 - /usr/bin/node
    Yarn: 1.22.21 - /usr/bin/yarn
    npm: 10.4.0 - /usr/bin/npm
    pnpm: 8.15.3 - /usr/bin/pnpm
    bun: 1.0.28 - /usr/bin/bun
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.1.1 
    @sveltejs/kit: ^2.0.0 => 2.5.4 
    @sveltejs/vite-plugin-svelte: ^3.0.0 => 3.0.2 
    svelte: ^4.2.7 => 4.2.12 
    vite: ^5.0.3 => 5.2.6

Severity

serious, but I can work around it

Additional Information

No response

zachstence commented 1 week ago

I recently ran into this myself and used a SvelteKit GET endpoint to load and register the service worker manually

https://github.com/evidence-dev/evidence/pull/2738/commits/6d8c109edbb1e5b938b8d56d41df5156aa8a7f6f#diff-212d0e657ea46ef030bd4315e52b62b555e439b81d51172b2b2a2e01d4527002

Would be great to not need this workaround

eltigerchino commented 1 week ago

I couldn't get the minimal reproduction working with the provided docker compose setup. Could you provide additional instructions for starting it?

TorstenDittmann commented 1 week ago

I couldn't get the minimal reproduction working with the provided docker compose setup. Could you provide additional instructions for starting it?

https://codesandbox.io/p/devbox/sveltekit-basepath-service-worker-6gydt7

very easy reproduction, just use starter template, add service worker, add base path and its broken in dev 👍🏻

https://github.com/user-attachments/assets/2e31de02-f8d4-4fc3-94ff-24a8092919c1

sveltejs / kit