injectManifest in Development

[udos86]

First of all I'd like to thank you very much for your effort on bringin Workbox support to Sveltekit ❤️

I've been playing around with @vite-pwa/sveltekit the last couple of days and it's a great addition to the framework.

From what I can read in the docs, Vite PWA basically supports injectManifest strategy in development.

However in SvelteKit, self.__WB_MANIFEST is not replaced when running in development via npm run dev. Therefore an error is thrown:

Is this the expected behaviour or a current limitation of SvelteKit's service worker build?

Also I noticed, that the service worker is always running in development regardless of wether enabled is true or false in devOptions.

As soon as running in preview via npm run preview everything works perfectly fine.

---

src/service-worker.ts:

/// <reference types="@sveltejs/kit" />
import { build, files, version } from '$service-worker';
import { cleanupOutdatedCaches, precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { NetworkFirst } from 'workbox-strategies';

declare const self: ServiceWorkerGlobalScope;

cleanupOutdatedCaches();

precacheAndRoute(self.__WB_MANIFEST);

registerRoute(
    ({ url }) => true,
    new NetworkFirst({ cacheName: `runtime-cache-${version}`, networkTimeoutSeconds: 45 })
);

vite.config.js:

import { sveltekit } from '@sveltejs/kit/vite';
import { SvelteKitPWA } from '@vite-pwa/sveltekit';

/** @type {import('vite').UserConfig} */
const config = {
	plugins: [
		sveltekit(),
		SvelteKitPWA({
			strategies: 'injectManifest',
			// see https://vite-pwa-org.netlify.app/guide/inject-manifest.html#development
			devOptions: {
				enabled: true
			}
		})
	],
	test: {
		include: ['src/**/*.{test,spec}.{js,ts}']
	},
	// see https://vite-pwa-org.netlify.app/frameworks/sveltekit.html#generate-custom-service-worker
	define: {
		'process.env.NODE_ENV': process.env.NODE_ENV === 'production'
			? '"production"'
			: '"development"'
	}
};

export default config;

[userquin]

@udos86 You're using static imports, you need to add type: 'module' to devOptions, will work only on chromium based browsers. Since you're using TypeScript you need to specify srcDir: './src', and filename: 'service-worker.ts',.

If you use Vanilla JS (src/service-worker.js), you can omit srcDir and filename, but using static imports requires type module.

[userquin]

Also I noticed, that the service worker is always running in development regardless of wether enabled is true or false in devOptions.

you must also disable kit sw registration on kit config file: https://github.com/vite-pwa/sveltekit/blob/main/examples/sveltekit-ts/svelte.config.js#L15 (I need to update docs, the configuration entry should be kit instead plugins ;) )

[userquin]

We're trying to expose kit configuration (on kit repo), and so ppl won't need to duplicate configuration between kit and vite, pwa integration will use it to configure a lot of stuff properly (we won't be able to modify kit configuration, some options must be configured, for example disabling kit sw registration).

[udos86]

@userquin

Thank you very much for your kind and quick response and clearing everything up! 👍