Inject Register script or inline has no effect on output HTML.

[sksar]

I am using this for a SvelteKit app in SPA mode.

These are the configs:

vite.config.js

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

export default defineConfig({
	plugins: [
		sveltekit(),
		SvelteKitPWA({
			injectRegister: 'inline',
		})
	]
});

svelte.config.js

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

/** @type {import('@sveltejs/kit').Config} */
export default {
	kit: {
		adapter: adapter({
			fallback: 'index.html',
			precompress: !!process.env.CF_PAGES,
		})
	},
	preprocess: vitePreprocess()
};

+layout.js

export const ssr = false;
export const prerender = false; // SPA mode

However, despite all attempts for a full day, the output index.html has no meta tags linking to the manifest and has no script tag or even inline script to do the register / inject. Both inline mode or script doesn't work. Both of them are behaving like null.

Dependencies:

"@sveltejs/kit": "^1.5.0",
"@vite-pwa/sveltekit": "^0.2.2",
"@sveltejs/adapter-static": "^2.0.2",
"vite": "^4.3.0"
"svelte": "^3.54.0",

[userquin]

@sksar on SvelteKit there is no entry point (like on Vite: index.html), and so you will need to inject it manually or using virtual pwa script: check the examples (transformIndexHtml is never called from Kit side)

[sksar]

@userquin The code given here https://vite-pwa-org.netlify.app/frameworks/sveltekit.html#sveltekit-pwa-plugin, did not have any effect as well. No manifest headers. (I put the code in the +layout.svelte as given on the docs)

[manuel3108]

Just encountered exactly the same.

The trick seems to lie here (you might want to ignore lines 7-10 for initial testing):

sveltekit/examples/sveltekit-ts/src/routes/+layout.svelte

Lines 5 to 18 in 19442a0

	import { pwaInfo } from 'virtual:pwa-info';
	let ReloadPrompt;
	onMount(async () => {
	pwaInfo && (ReloadPrompt = (await import('$lib/ReloadPrompt.svelte')).default);
	})
	$: webManifest = pwaInfo ? pwaInfo.webManifest.linkTag : ''
	</script>
	<svelte:head>
	{@html webManifest}
	</svelte:head>

With those few lines (and properly refreshing my SW afterward), everything seems to be generated as expected.

This should really be documented somewhere. Also, we should maybe check if there is a better way for doing, because that kinda adds a lot of configs to a "Zero-config PWA Plugin for SvelteKit"

[userquin]

I updated docs yesterday: virtual pwa info

PR welcome to include some reference in Kit docs.

[manuel3108]

Sure! Could you give me a hint where to find the docs as source code? I could not find a link on the page directly

[userquin]

Sure! Could you give me a hint where to find the docs as source code? I could not find a link on the page directly

Docs can be found here: https://github.com/vite-pwa/docs, read contributing guide, we're using pnpm as package manager and requires Node 16.

Docs using VitePress beta 1.

The entry can be found here: https://github.com/vite-pwa/docs/blob/main/frameworks/sveltekit.md

You can also use Suggest changes to this page link in this page https://vite-pwa-org.netlify.app/frameworks/, link at bottom.