Service worker is registered from relative paths instead of absolute in SvelteKit PWA

[spwoodcock]

I'm not 100% sure if this is user error, or a bug, but I have scoured many similar issues such as #665, the documentation, and the code here to work this out 😅 Hopefully someone can help!

Context

• I am building a PWA that is hosted under https://mapper.fmtm.hotosm.org.
• Users either access via the main domain, or directly into the project route: e.g. https://mapper.fmtm.hotosm.org/project/1.
• We are trying to aggressively cache everything on the website, so it can be loaded entirely offline (for field mapping).

Problem

• Loading directly from the site root works fine, https://mapper.fmtm.hotosm.org, and manifest and sw.js are found.
• However, if loading from https://mapper.fmtm.hotosm.org/project/1, I get errors:

manifest:

Manifest fetch from https://mapper.dev.fmtm.hotosm.org/project/manifest.webmanifest failed, code 404

sw.js

SW registration error TypeError: Failed to register a ServiceWorker for scope ('https://mapper.dev.fmtm.hotosm.org/') with script ('https://mapper.dev.fmtm.hotosm.org/project/sw.js'): A bad HTTP response code (404) was received when fetching the script.

Both exist on the server under https://mapper.dev.fmtm.hotosm.org/sw.js and https://mapper.dev.fmtm.hotosm.org/manifest.webmanifest

Note we also have some issues related to caching, but one thing at a time!

Files For Debug

vite.config.ts:

const pwaOptions: Partial<VitePWAOptions> = {
	// This ensures that caches are invalidated when the app is updated
	registerType: 'autoUpdate',
	injectRegister: 'script', # originally I was using 'auto', but changed to try and tweak manually
	strategies: 'generateSW',

	// Important to ensure the PWA runs on the **entire** website
	// For example, it's possible to have `scope: '/project'` for a PWA
	// on only part of the website
	scope: '/',

	// Allow testing the PWA during local development
	devOptions: {
		enabled: true,
		// // Don't fallback on document based (e.g. `/some-page`) requests
		// We need this to include /project/ID as well as home page for direct load when offline
		navigateFallbackAllowlist: [/^\/$/, /^\/project\/.+$/],
		// Enable this to disable runtime caching for easier debugging
		// disableRuntimeConfig: true,
	},

	// // Cache all the imports, including favicon
	workbox: {
		// Don't fallback on document based (e.g. `/some-page`) requests
		// Even though this says `null` by default, I had to set this specifically to `null` to make it work
		// We can do this because we are explicitly handling all navigation routes via runtimeCaching
		navigateFallback: null,

		// Cache all imports
		// globPatterns: ["**/*"],
		globPatterns: ['**/*.{js,css,html,wasm,ico,svg,png,jpg,jpeg,gif,webmanifest}'],

		// This is where the magic happens: routes to cache key to cache to
		runtimeCaching: [
			// Handle SPA navigations (e.g., /, /project/123)
			{
				urlPattern: ({ request }: RouteMatchCallbackOptions) => request.mode === 'navigate',
				// Try to get fresh version; fallback when offline
				handler: 'NetworkFirst',
				// // NOTE the below doesn't work yet, so we use NetworkFirst above
				// // This will load the cached version instantly, then update the cache in the
				// // background. On next refresh, the updated app will be loaded.
				// // This is a good tradeoff, as slightly outdated content is only shown temporarily.
				// handler: 'StaleWhileRevalidate',
				options: {
					cacheName: 'field-tm-html-pages',
					networkTimeoutSeconds: 5, // Setting only valid for NetworkFirst, else errors
					expiration: {
						maxEntries: 50,
						maxAgeSeconds: 60 * 60 * 24 * 7, // 7 days
					},
				},
			},
			// Static assets (e.g., JS, CSS, icons, fonts)
			{
				urlPattern: ({ url }: RouteMatchCallbackOptions) => url.origin === self.location.origin,
				// Serve fast from cache; change infrequently
				handler: 'CacheFirst',
				options: {
					cacheName: 'field-tm-static-assets',
					expiration: {
						maxEntries: 300,
						maxAgeSeconds: 60 * 60 * 24 * 14, // 14 days
					},
				},
			},
		],

		// We need to cache files up to 15MB to allow for PGLite to be cached
		maximumFileSizeToCacheInBytes: 15 * 1024 * 1024,
	},

	// Cache all the static assets in the static folder
	includeAssets: ['**/*', 'icons/*.svg'],

	manifest: {
		id: 'com.hotosm.field-tm',
		name: 'Field-TM',
		short_name: 'Field-TM',
		description: 'Coordinated field mapping for Open Mapping campaigns.',
		categories: ['mapping', 'humanitarian', 'hotosm', 'field', 'odk'],
		scope: '/',
		start_url: '/',
		orientation: 'portrait',
		dir: 'auto',
		display: 'standalone',
		launch_handler: 'auto',
		theme_color: '#d63f3f',
		background_color: '#d63f3f',
		icons: [
			{
				src: 'pwa-64x64.png',
				sizes: '64x64',
				type: 'image/png',
				purpose: 'any',
			},
			{
				src: 'pwa-192x192.png',
				sizes: '192x192',
				type: 'image/png',
			},
			{
				src: 'pwa-512x512.png',
				sizes: '512x512',
				type: 'image/png',
			},
			{
				src: 'maskable-icon-512x512.png',
				sizes: '512x512',
				type: 'image/png',
				purpose: 'maskable',
			},
		],
		screenshots: [
			{
				src: 'screenshot-mapper.jpeg',
				sizes: '1280x720',
				type: 'image/jpeg',
				form_factor: 'wide',
				label: 'Mapper App',
			},
		],
		related_applications: [
			{
				platform: 'web',
				url: 'https://fmtm.hotosm.org',
			},
		],
	},
};

svelte.config.ts

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	base: '/',

	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
	// for more information about preprocessors
	preprocess: vitePreprocess(),

	kit: {
		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
		adapter: adapter({
			// default options are shown. On some platforms
			// these options are set automatically — see below
			pages: 'build',
			assets: 'build',
			// This fallback is required to compile as SPA
			// as we don't have any server side rendering here
			fallback: 'index.html',
			precompress: false,
			strict: true,
		}),
		alias: {
			$lib: 'src/lib',
			$components: 'src/components',
			$store: 'src/store',
			$routes: 'src/routes',
			$constants: 'src/constants',
			$styles: 'src/styles',
			$assets: 'src/assets',
			$translations: 'src/translations',
			$static: 'static',
			$migrations: '../migrations',
		},
	},
};

export default config;

I tested with a +layout.svelte file like this:

	import { pwaInfo } from 'virtual:pwa-info';
	const webManifestLink = $derived(pwaInfo ? pwaInfo.webManifest.linkTag : '');

<svelte:head>
	{@html webManifestLink}
</svelte:head>

and also without the above, but adding the manifest and sw.js manually:

<svelte:head>
        <link rel="manifest" href="/manifest.webmanifest">
	<script>
		if ('serviceWorker' in navigator) {
			navigator.serviceWorker.register('/sw.js', { scope: '/' });
		}
	</script>
</svelte:head>

The second approach did fix the loading of the manifest, but the sw.js file was still loaded from the wrong place!

Thanks so much for your time & I appreciate the support 🙏

[userquin]

looks like the project/1 page is registering the sw via relative path check the html, did you disable kit flag to avoid registering the sw?

EDIT: check kit docs, you should use vite-plugin-pwa/svelte and its virtual: import { useRegisterSW } from 'virtual:pwa-register/svelte'

[userquin]

// svelte.config.js
/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    serviceWorker: {
      register: false
    }
  }
};

export default config;

[userquin]

if you're not using any virtual the problem is on kit side, the service worker being registered using relative path.

[spwoodcock]

I'm sure you are right - it's probably a sveltekit conflict!

I checked over the docs again:
https://vite-pwa-org.netlify.app/frameworks/sveltekit.html#generate-custom-service-worker

I updated svelte.config.ts to disable the service worker registration, but I still get the same errors:

Manifest fetch from https://mapper.dev.fmtm.hotosm.org/project/manifest.webmanifest failed, code 404
0.DaMNFhuT.js:8001 SW registration error TypeError: Failed to register a ServiceWorker for scope ('https://mapper.dev.fmtm.hotosm.org/') with script ('https://mapper.dev.fmtm.hotosm.org/project/sw.js'): A bad HTTP response code (404) was received when fetching the script.

Thanks so much for your support & fast reply!!

Updated Code

+layout.svelte

<script lang="ts">
	import { pwaInfo } from 'virtual:pwa-info';
	import { useRegisterSW } from 'virtual:pwa-register/svelte';
	import type { RegisterSWOptions } from 'vite-plugin-pwa/types';

	// Required for PWA to work with svelte
	const webManifestLink = $derived(pwaInfo ? pwaInfo.webManifest.linkTag : '');
    const { registerSW, offlineReady, needRefresh, updateServiceWorker }: RegisterSWOptions = useRegisterSW({
        onRegistered(swr: any) {
            console.log(`SW registered: ${swr}`);
        },
        onRegisterError(error: any) {
            console.log('SW registration error', error);
        },
        onOfflineReady() {
            console.log('SW ready for offline')
			alertStore.setAlert({ message: m['offline.ready_offline'](), variant: 'default', duration: 2000 });
        },
    });
</script>

<svelte:head>
	{@html webManifestLink}
</svelte:head>

<main></main>

vite.config.ts

import path from 'path';
import { defineConfig } from 'vitest/config';
import type { VitePWAOptions } from 'vite-plugin-pwa';
import type { RouteMatchCallbackOptions } from 'workbox-core';
import { SvelteKitPWA } from '@vite-pwa/sveltekit';
import { sveltekit } from '@sveltejs/kit/vite';
import { paraglideVitePlugin } from '@inlang/paraglide-js';
import UnoCSS from 'unocss/vite';
import extractorSvelte from '@unocss/extractor-svelte';

const pwaOptions: Partial<VitePWAOptions> = {
	// This ensures that caches are invalidated when the app is updated
	registerType: 'autoUpdate',
	injectRegister: 'auto',
	strategies: 'generateSW',

	// Important to ensure the PWA runs on the **entire** website
	// For example, it's possible to have `scope: '/project'` for a PWA
	// on only part of the website
	scope: '/',

	// Allow testing the PWA during local development
	devOptions: {
		enabled: true,
		// // Don't fallback on document based (e.g. `/some-page`) requests
		// We need this to include /project/ID as well as home page for direct load when offline
		navigateFallbackAllowlist: [/^\/$/, /^\/project\/.+$/],
		// Enable this to disable runtime caching for easier debugging
		// disableRuntimeConfig: true,
	},

	// // Cache all the imports, including favicon
	workbox: {
		// Don't fallback on document based (e.g. `/some-page`) requests
		// Even though this says `null` by default, I had to set this specifically to `null` to make it work
		// We can do this because we are explicitly handling all navigation routes via runtimeCaching
		navigateFallback: null,

		// Cache all imports
		// globPatterns: ["**/*"],
		globPatterns: ['**/*.{js,css,html,wasm,ico,svg,png,jpg,jpeg,gif,webmanifest}'],

		// This is where the magic happens: routes to cache key to cache to
		runtimeCaching: [
			// Handle SPA navigations (e.g., /, /project/123)
			{
				urlPattern: ({ request }: RouteMatchCallbackOptions) => request.mode === 'navigate',
				// Try to get fresh version; fallback when offline
				handler: 'NetworkFirst',
				// // NOTE the below doesn't work yet, so we use NetworkFirst above
				// // This will load the cached version instantly, then update the cache in the
				// // background. On next refresh, the updated app will be loaded.
				// // This is a good tradeoff, as slightly outdated content is only shown temporarily.
				// handler: 'StaleWhileRevalidate',
				options: {
					cacheName: 'field-tm-html-pages',
					networkTimeoutSeconds: 5, // Setting only valid for NetworkFirst, else errors
					expiration: {
						maxEntries: 50,
						maxAgeSeconds: 60 * 60 * 24 * 7, // 7 days
					},
				},
			},
			// Static assets (e.g., JS, CSS, icons, fonts)
			{
				urlPattern: ({ url }: RouteMatchCallbackOptions) => url.origin === self.location.origin,
				// Serve fast from cache; change infrequently
				handler: 'CacheFirst',
				options: {
					cacheName: 'field-tm-static-assets',
					expiration: {
						maxEntries: 300,
						maxAgeSeconds: 60 * 60 * 24 * 14, // 14 days
					},
				},
			},
		],

		// We need to cache files up to 15MB to allow for PGLite to be cached
		maximumFileSizeToCacheInBytes: 15 * 1024 * 1024,
	},

	// Cache all the static assets in the static folder
	includeAssets: ['**/*', 'icons/*.svg'],

	manifest: {
		id: 'com.hotosm.field-tm',
		name: 'Field-TM',
		short_name: 'Field-TM',
		description: 'Coordinated field mapping for Open Mapping campaigns.',
		categories: ['mapping', 'humanitarian', 'hotosm', 'field', 'odk'],
		scope: '/',
		start_url: '/',
		orientation: 'portrait',
		dir: 'auto',
		display: 'standalone',
		launch_handler: {
			client_mode: 'auto',
		},
		theme_color: '#d63f3f',
		background_color: '#d63f3f',
		icons: [
			{
				src: 'pwa-64x64.png',
				sizes: '64x64',
				type: 'image/png',
				purpose: 'any',
			},
			{
				src: 'pwa-192x192.png',
				sizes: '192x192',
				type: 'image/png',
			},
			{
				src: 'pwa-512x512.png',
				sizes: '512x512',
				type: 'image/png',
			},
			{
				src: 'maskable-icon-512x512.png',
				sizes: '512x512',
				type: 'image/png',
				purpose: 'maskable',
			},
		],
		screenshots: [
			{
				src: 'screenshot-mapper.jpeg',
				sizes: '1280x720',
				type: 'image/jpeg',
				form_factor: 'wide',
				label: 'Mapper App',
			},
		],
		related_applications: [
			{
				platform: 'web',
				url: 'https://fmtm.hotosm.org',
			},
		],
	},
};

export default defineConfig({
	// Ensure the base is not '/project/xxx', but always '/', else
	// registration of sw and manifest can fail under /project
	base: '/',
	plugins: [
		sveltekit(),
		SvelteKitPWA(pwaOptions),
		paraglideVitePlugin({
			project: './project.inlang',
			outdir: './src/translations',
		}),
		UnoCSS({
			extractors: [extractorSvelte()],
		}),
	],
});

svelte.config.ts

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	base: '/',

	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
	// for more information about preprocessors
	preprocess: vitePreprocess(),

	kit: {
		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
		adapter: adapter({
			// default options are shown. On some platforms
			// these options are set automatically — see below
			pages: 'build',
			assets: 'build',
			// This fallback is required to compile as SPA
			// as we don't have any server side rendering here
			fallback: 'index.html',
			precompress: false,
			strict: true,
		}),
		// Important! Avoids conflict with vite-pwa
		serviceWorker: {
			register: false,
		},
	},
};

export default config;

[spwoodcock]

Also note I am serving this behind an nginx server with config like:

root /var/www/html/mapper.dev.fmtm.hotosm.org;

I'm pretty sure it's unrelated, as the files are available under
https://mapper.dev.fmtm.hotosm.org/manifest.webmanifest
https://mapper.dev.fmtm.hotosm.org/sw.js
but just for extra context 👍

[userquin]

Is /project a context in your backend? You can use Service-Worker-Allowed in your backend https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Service-Worker-Allowed

The problem is about the scope.

[userquin]

The problem is that a sw inside /project cannot control the scope /, you need to add previous http header to allow do that. That's the error about the sw.

[spwoodcock]

I was so hopeful that was going to be the answer, but unfortunately not!

I think I would need that header if the service worker was actually hosted at https://mapper.dev.fmtm.hotosm.org/project/sw.js (trying to register scope https://mapper.dev.fmtm.hotosm.org), but in fact it's hosted at the root https://mapper.dev.fmtm.hotosm.org/sw.js (within scope).

The problem seems to be with vite-pwa, or sveltekit somewhere & I'm tearing my hair out 😅

I'm using versions:

		"@sveltejs/kit": "^2.20.8",
		"@vite-pwa/sveltekit": "^1.0.0",
		"vite": "^6.0.1",

so I will upgrade to the latest now, just in case it's something already fixed 👍

---

Edit
I updated to

		"@sveltejs/kit": "^2.22.5",
                "@vite-pwa/sveltekit": "^1.0.0",
		"vite": "^6.3.5",

just in case - it made no difference

[userquin]

Can you check the html response in the devtools preview and if the sw js is properly resolved? I guess you have some rule/handler at your nginx server and /project is used as a context. All htnl using /xxx being rewrite as /project/xxx, since the sw scope is / then the error.

[userquin]

Are you using some other kit layout inside /project ?

This plugin doesn't serve your app, you're not using any virtual and you're registering the sw, so the problem is at kit or app or your nginx backend.

[spwoodcock]

Ah right, that helps narrow it down.

The nginx server has no rules for /project - the app is an SPA, so it's simply serving static content from the domain:

root /var/www/html/mapper.dev.fmtm.hotosm.org;

I'm currently trying every iteration I can, to help pointpoint where it might be.
What's really strange, is if I completely remove the registration code for vite-pwa, and place it in app.html, I still get the same error!

I am clearing my cache and browser storage every time to make sure.

My entire sveltekit config is below (I don't do anything specifically for the /project route):

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	base: '/',

	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
	// for more information about preprocessors
	preprocess: vitePreprocess(),

	kit: {
		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
		adapter: adapter({
			// default options are shown. On some platforms
			// these options are set automatically — see below
			pages: 'build',
			assets: 'build',
			// This fallback is required to compile as SPA
			// as we don't have any server side rendering here
			fallback: 'index.html',
			precompress: false,
			strict: true,
		}),
		alias: {
			$lib: 'src/lib',
			$components: 'src/components',
			$store: 'src/store',
			$routes: 'src/routes',
			$constants: 'src/constants',
			$styles: 'src/styles',
			$assets: 'src/assets',
			$translations: 'src/translations',
			$static: 'static',
			$migrations: '../migrations',
		},
		// Important! Avoids conflict with vite-pwa
		serviceWorker: {
			register: false,
		},
	},
};

export default config;

I also don't have any code related to the PWA under project/[projectId]/+page.svelte for the content under route /project.

[spwoodcock]

Actually I was wrong above - sorry!

Removing this code from my +layout.svelte, and registering manually in app.html allowed me to register the sw.js file to be read (but registration fails further down the line - progress at least!):

    const { registerSW, offlineReady, needRefresh, updateServiceWorker }: RegisterSWOptions = useRegisterSW({
        onRegistered(swr: any) {
            console.log(`SW registered: ${swr}`);
        },
        onRegisterError(error: any) {
            console.log('SW registration error', error);
        },
        onOfflineReady() {
            console.log('SW ready for offline')
			alertStore.setAlert({ message: m['offline.ready_offline'](), variant: 'default', duration: 2000 });
        },
		// // TODO consider enabling this at some point once functionality is more stable?
		// // We wouldn't want to clear projects during active mapping campaign where we
		// // are pushing regular updates
		//
		// async onNeedRefresh() {
		// 	console.log('SW update available');

		// 	alertStore.setAlert({
		// 		message: 'New version available. Refreshing...',
		// 		variant: 'default',
		// 		duration: 2000
		// 	});

		// 	// Run db project cleanup
		// 	const db = await dbPromise;
		// 	db.query('DELETE FROM projects;').then(() => {
		// 		console.log('Old projects cleared due to version update.');
		// 		updateServiceWorker(); // Then update SW
		// 	});
		// }
    });

So it's surely something to do with how useRegisterSW is operating with my config.
(the sw.js and manifest.webmanifest are correctly generated under /)

[spwoodcock]

However the registration fails for some reason:

I assume sw.js should not be registered directly this way, and should be registered by vite-pwa

[spwoodcock]

The root HTML doc:

<!doctype html>
<html lang="en">
	<head>
		<title>Field Tasking Manager</title>

		<meta charset="UTF-8" />
		<meta name="description" content="Coordinated field mapping for Open Mapping campaigns." />
		<meta name="author" content="Humanitarian OpenStreetMap Team" />
		<meta name="format-detection" content="telephone=no, email=no, address=no" />
		<meta
			name="viewport"
			content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"
		/>
		<meta name="theme-color" content="#d63f3f" />

		<link rel="icon" href="/favicon.png" sizes="16x16" />
		<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
		<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
		<link rel="mask-icon" href="/favicon.svg" color="#FFFFFF" />
		<link rel="preconnect" href="https://fonts.googleapis.com" />
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
		<link
			href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
			rel="stylesheet"
		/>

		<!-- Register the PWA manifest and service worker -->
		<!-- Note this didn't work using the default vite-pwa config -->
		<!-- We need to ensure that when loading /project/xxx we still register correctly -->
		<link rel="manifest" href="/manifest.webmanifest" />
		<script>
			if ('serviceWorker' in navigator) {
				navigator.serviceWorker.register('/sw.js');
			}
		</script>

		
		<link rel="modulepreload" href="/_app/immutable/entry/start.Nf81C9HX.js">
		<link rel="modulepreload" href="/_app/immutable/chunks/Bjlm3b2D.js">
		<link rel="modulepreload" href="/_app/immutable/chunks/BqB3rR42.js">
		<link rel="modulepreload" href="/_app/immutable/chunks/lCcrFKGR.js">
		<link rel="modulepreload" href="/_app/immutable/chunks/CYgJF_JY.js">
		<link rel="modulepreload" href="/_app/immutable/entry/app.HFaFdFle.js">
		<link rel="modulepreload" href="/_app/immutable/chunks/NUCTY2q4.js">
		<link rel="modulepreload" href="/_app/immutable/chunks/CWj6FrbW.js">
		<link rel="modulepreload" href="/_app/immutable/chunks/D4UWxKBS.js">
		<link rel="modulepreload" href="/_app/immutable/chunks/CvJGX_-B.js">
		<link rel="modulepreload" href="/_app/immutable/chunks/oEDwKElK.js">
	</head>
	<body data-sveltekit-preload-data="hover" style="display: contents">
		<div>
			<script>
				{
					__sveltekit_ztuhx7 = {
						base: ""
					};

					const element = document.currentScript.parentElement;

					Promise.all([
						import("/_app/immutable/entry/start.Nf81C9HX.js"),
						import("/_app/immutable/entry/app.HFaFdFle.js")
					]).then(([kit, app]) => {
						kit.start(app, element);
					});
				}
			</script>
		</div>
	</body>
</html>

<style>
	html,
	body {
		overscroll-behavior: none;
		overflow: hidden;
	}
</style>

[userquin]

If using any pwa virtual you need to disable kit sw registration.

What's the error in the sw?