feat: allow to specify options for the service worker in svelte.config.js (#13578)

* feat: allow to specify options for the service worker in `svelte.config.js`

* fix: better validation of `options` config

* fix: use easier types

* chore: add test for service worker `options`

* fix: `object` is already a function

---------

Co-authored-by: Rich Harris <[email protected]>

Author: paoloricciuti

.changeset/fuzzy-guests-obey.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': minor
+---
+
+feat: allow to specify options for the service worker in `svelte.config.js`

packages/kit/src/core/config/options.js

@@ -271,6 +271,9 @@ const options = object(
 
 			serviceWorker: object({
 				register: boolean(true),
+				// options could be undefined but if it is defined we only validate that
+				// it's an object since the type comes from the browser itself
+				options: validate(undefined, object({}, true)),
 				files: fun((filename) => !/\.DS_Store/.test(filename))
 			}),
 

packages/kit/src/core/sync/write_server.js

@@ -46,6 +46,7 @@ export const options = {
 	preload_strategy: ${s(config.kit.output.preloadStrategy)},
 	root,
 	service_worker: ${has_service_worker},
+	service_worker_options: ${config.kit.serviceWorker.register ? s(config.kit.serviceWorker.options) : 'null'},
 	templates: {
 		app: ({ head, body, assets, nonce, env }) => ${s(template)
 			.replace('%sveltekit.head%', '" + head + "')

packages/kit/src/exports/public.d.ts

@@ -710,17 +710,31 @@ export interface KitConfig {
 		resolution?: 'client' | 'server';
 	};
 	serviceWorker?: {
-		/**
-		 * Whether to automatically register the service worker, if it exists.
-		 * @default true
-		 */
-		register?: boolean;
 		/**
 		 * Determine which files in your `static` directory will be available in `$service-worker.files`.
 		 * @default (filename) => !/\.DS_Store/.test(filename)
 		 */
-		files?(filepath: string): boolean;
-	};
+		files?: (file: string) => boolean;
+	} & (
+		| {
+				/**
+				 * Whether to automatically register the service worker, if it exists.
+				 * @default true
+				 */
+				register: true;
+				/**
+				 * Options for serviceWorker.register("...", options);
+				 */
+				options?: RegistrationOptions;
+		  }
+		| {
+				/**
+				 * Whether to automatically register the service worker, if it exists.
+				 * @default true
+				 */
+				register?: false;
+		  }
+	);
 	typescript?: {
 		/**
 		 * A function that allows you to edit the generated `tsconfig.json`. You can mutate the config (recommended) or return a new one.

packages/kit/src/runtime/server/page/render.js

@@ -478,7 +478,14 @@ export async function render_response({
 		}
 
 		if (options.service_worker) {
-			const opts = __SVELTEKIT_DEV__ ? ", { type: 'module' }" : '';
+			let opts = __SVELTEKIT_DEV__ ? ", { type: 'module' }" : '';
+			if (options.service_worker_options != null) {
+				const service_worker_options = { ...options.service_worker_options };
+				if (__SVELTEKIT_DEV__) {
+					service_worker_options.type = 'module';
+				}
+				opts = `, ${s(service_worker_options)}`;
+			}
 
 			// we use an anonymous function instead of an arrow function to support
 			// older browsers (https://github.com/sveltejs/kit/pull/5417)

packages/kit/src/types/internal.d.ts

@@ -450,6 +450,7 @@ export interface SSROptions {
 	preload_strategy: ValidatedConfig['kit']['output']['preloadStrategy'];
 	root: SSRComponent['default'];
 	service_worker: boolean;
+	service_worker_options: RegistrationOptions;
 	templates: {
 		app(values: {
 			head: string;

packages/kit/test/apps/basics/svelte.config.js

@@ -37,6 +37,12 @@ const config = {
 				console.warn(message);
 			}
 		},
+		serviceWorker: {
+			register: true,
+			options: {
+				updateViaCache: 'imports'
+			}
+		},
 
 		version: {
 			name: 'TEST_VERSION'

packages/kit/test/apps/basics/test/test.js

@@ -1635,3 +1635,25 @@ test.describe('params prop', () => {
 		await expect(page.locator('p')).toHaveText('x: 456');
 	});
 });
+
+test.describe('service worker option', () => {
+	test('pass the options to the service worker', async ({ page }) => {
+		await page.goto('/');
+		const content = await page.content();
+		const matching = content.match(/navigator\.serviceWorker\.register\(.+?, (?<options>{.+?})\)/);
+		let options = {};
+		if (matching && matching.groups) {
+			options = JSON.parse(matching.groups.options);
+		}
+		if (process.env.DEV) {
+			expect(options).toMatchObject({
+				type: 'module',
+				updateViaCache: 'imports'
+			});
+		} else {
+			expect(options).toMatchObject({
+				updateViaCache: 'imports'
+			});
+		}
+	});
+});

packages/kit/types/index.d.ts

@@ -687,17 +687,31 @@ declare module '@sveltejs/kit' {
 			resolution?: 'client' | 'server';
 		};
 		serviceWorker?: {
-			/**
-			 * Whether to automatically register the service worker, if it exists.
-			 * @default true
-			 */
-			register?: boolean;
 			/**
 			 * Determine which files in your `static` directory will be available in `$service-worker.files`.
 			 * @default (filename) => !/\.DS_Store/.test(filename)
 			 */
-			files?(filepath: string): boolean;
-		};
+			files?: (file: string) => boolean;
+		} & (
+			| {
+					/**
+					 * Whether to automatically register the service worker, if it exists.
+					 * @default true
+					 */
+					register: true;
+					/**
+					 * Options for serviceWorker.register("...", options);
+					 */
+					options?: RegistrationOptions;
+			  }
+			| {
+					/**
+					 * Whether to automatically register the service worker, if it exists.
+					 * @default true
+					 */
+					register?: false;
+			  }
+		);
 		typescript?: {
 			/**
 			 * A function that allows you to edit the generated `tsconfig.json`. You can mutate the config (recommended) or return a new one.