vite-pwa / sveltekit

Zero-config PWA Plugin for SvelteKit
https://vite-pwa-org.netlify.app/frameworks/sveltekit
MIT License
284 stars 15 forks source link

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

Open sksar opened 1 year ago

sksar commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

Just encountered exactly the same.

The trick seems to lie here (you might want to ignore lines 7-10 for initial testing): https://github.com/vite-pwa/sveltekit/blob/19442a0ae9c6031b1ff099ca361d1a50b8e301fb/examples/sveltekit-ts/src/routes/%2Blayout.svelte#L5-L18

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 commented 1 year ago

I updated docs yesterday: virtual pwa info

PR welcome to include some reference in Kit docs.

manuel3108 commented 1 year ago

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 commented 1 year ago

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.