Uncaught (in promise) non-precached-url: non-precached-url :: [{"url":"/"}]

[HoekWax]

Hello,

I know this issue has already been talked about but I still can't figure out how to fix.
The service worker is registered without any issue in development, in production I get this error :
Uncaught (in promise) non-precached-url: non-precached-url :: [{"url":"/"}]

Here is my config

SvelteKitPWA({
	registerType: 'prompt',
	base: '/',
	scope: '/',
	filename: 'sw.js',
	mode: 'production',
	devOptions: {
		enabled: false
	},
	includeAssets: [
		...
	],
	manifest: {
		name: '...',
		short_name: '...',
		description: '...',
		start_url: '/home',
		scope: '/',
		publicPath: '/',
		display: 'standalone',
		theme_color: '#ffffff',
		icons: [
			...
		]
	}
}),

From what I understand on possibility would be to disable cache completely, I don't know how or if it's possible.
A better solution would be to set up a fallback url, have something that is cache for the "/" route.

Can you help on that ?

Thanks

[userquin]

You should prerender at least 1 page, by default workbox will use the entry point (in kit the / or base path). You can try adding the export for prerender in +page.ts

[HoekWax]

Doing this removed the error when registering the service worker but created a new issue.

When I load the page https://my.website.com/ at the root or event https://my.website.com/home, it loads without any issue

When I load a page with a subroute like https://my.website.com/intervention/87776318, svelte tries to load all the .js and .css files from this route url https://my.website.com/intervention and not https://my.website.com/.
Because they are not loaded from the root of the site, I get a 404 error for everything and I'm being shown the prerendered page.

Also, the service worker is well registered, but when I try to go in Chrome -> Inspect -> Application -> Service workers and click on "Push", nothing happens. I added logs in my service-worker.js and trie to see them in chrome://serviceworker-internals/ but they don't appear. It works without any issue in development. Do you know what could cause this ?

Thanks

[userquin]

@HoekWax you should exclude any dynamic page from sw interception via workbox.navigateFallbackDenyList, check this entry using Nuxt 3: vite-pwa/docs#58 (comment)

[HoekWax]

This works, thanks

Now I'm setting the strategy as injectManifest so that I can customize the service worker, in order to show push notifications especially.

I have vite.config.ts at the root and ./static/service-worker.js

Here is what my simplified config looks like

{
	registerType: 'autoUpdate',
	base: '/',
	scope: '/',
	srcDir: 'static',
	filename: 'service-worker.js',
	strategies: 'injectManifest'
}

I get the following error when doing a yarn build

Error: The 'swSrc' file can't be read. ENOENT: no such file or directory, open '/Users/geraudm/Documents/Work/fixee/fixee-web/.svelte-kit/output/client/service-worker.js'
    at injectManifest (/Users/geraudm/Documents/Work/fixee/fixee-web/node_modules/workbox-build/build/inject-manifest.js:70:15)
    at async Object.handler (file:///Users/geraudm/Documents/Work/fixee/fixee-web/node_modules/@vite-pwa/sveltekit/dist/index.mjs:189:31)
    at async PluginDriver.hookParallel (file:///Users/geraudm/Documents/Work/fixee/fixee-web/node_modules/rollup/dist/es/shared/node-entry.js:24584:17)
    at async Object.close (file:///Users/geraudm/Documents/Work/fixee/fixee-web/node_modules/rollup/dist/es/shared/node-entry.js:25901:13)
    at async build (file:///Users/geraudm/Documents/Work/fixee/fixee-web/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:46487:13)
    at async CAC.<anonymous> (file:///Users/geraudm/Documents/Work/fixee/fixee-web/node_modules/vite/dist/node/cli.js:812:9)

I try to change the srcDir or the filename, is doesn't change anything. Same thing when changing the "swSrc" value in the injectManifest option.

[userquin]

@HoekWax pwa kit plugin will use kit sw internal build, if you don't configure kit properly (files.serviceWorker) the sw will be missing, use the defaults or just configure pwa plugin and kit properly (I suggest you to move it to src folder): remember to disable kit sw registration, add register false in the kit.serviceWorker entry in svelte config file, check this page in the docs https://vite-pwa-org.netlify.app/frameworks/sveltekit.html.

serviceWorker: {
  register: false,
},

[HoekWax]

I updated my config but still have the same issue

Here is my config

svelte.config.js

const config = {
	compilerOptions: {
		sourcemap: true,
		enableSourcemap: true
	},
	preprocess: vitePreprocess(),
	kit: {
		adapter: adapterNode(),
		version: {
			name: pkg.version
		},
		// https://github.com/vite-pwa/sveltekit/issues/63#issuecomment-1710361375
		serviceWorker: {
			register: false
		},
		// https://vite-pwa-org.netlify.app/frameworks/sveltekit.html#generate-custom-service-worker
		files: {
			serviceWorker: 'src/service-worker.js'
		}
	}
};

vite.config.ts

export default defineConfig({
	define: {
		'process.env.NODE_ENV':
			process.env.NODE_ENV === 'development' ? '"development"' : '"production"'
	},
	build: {
		// We build the sourcemap for sentry debug
		sourcemap: true
	},
	plugins: [
		autoImport({
			components: [
				'./src/lib/components/atoms',
				'./src/lib/components/mols',
				'./src/lib/components/orgs'
			]
		}),
		sveltekit(),
		SvelteKitPWA({
			registerType: 'autoUpdate',
			base: '/',
			scope: '/',
			srcDir: 'src',
			filename: 'service-worker.js',
			mode: 'production',
			devOptions: {
				enabled: false
			},
			includeAssets: [
				...
			],
			manifest: {
				...
			},
			workbox: {
				navigateFallbackAllowlist: [/^\/$/], // This regex will only match the "/" route
				navigateFallbackDenylist: [/^(?!\/$).*/] // This regex will match all routes except "/"
			},
			strategies: 'injectManifest'
		}),

		sentryVitePlugin({
			...
		})
	],
	test: {
		include: ['src/**/*.{test,spec}.{js,ts}']
	}
});

[HoekWax]

Can I give you more informations that could help ?

[userquin]

@HoekWax can you check if there is some service-worker.js in the output build?

[HoekWax]

There's not, .svelte-kit/output/client is empty

[userquin]

no makes sense, that folder is the kit output build for the client:

[HoekWax]

It's empty when I use injectManifest, because of Error: The 'swSrc' file can't be read. ENOENT: no such file or directory but works and has something when I use generateSW

[userquin]

Can you try removing srcDir and filename from pwa options and the service worker name from files in kit config file?

[HoekWax]

Well I found what caused the issue by disabling it, the thing is that it would be nice if they both worked together.

The issue is caused by the sentryVitePlugin() plugin that I added right after SvelteKitPWA().
When I comment it and compile, it works.
If I put it after svelte() but before SvelteKitPWA(), is causes the same problem.

After I wrote this, I tested some other things and came back to the same config as before and now it works.
I guess disabling it and adding it again solved something.

My sentryVitePlugin config wasn't configured well and caused another issue, I fixed it, now everything works !!

Thanks you very much for your time, I really appreciate it !