vite-plugin-pwa icon indicating copy to clipboard operation
vite-plugin-pwa copied to clipboard

No manifest file

Open zpovsic opened this issue 3 years ago • 6 comments

In svektekit example there is not generated manifest.webmanifest

error:

Generating PWA...

PWA v0.12.0 mode generateSW precache 1 entries (0.00 KiB) files generated .svelte-kit\output\client\sw.js .svelte-kit\output\client\workbox-0b852b48.js warnings One of the glob patterns doesn't match any files. Please remove or fix the following: { "globDirectory": "./build/", "globPattern": "/*.{js,css,html,ico,png,svg,webmanifest}", "globIgnores": [ "/sw*", "**/workbox-", "../.svelte-kit/output/client/sw.js", "../.svelte-kit/output/client/workbox-.js" ] }

node:fs:2817 handleErrorFromBinding(ctx); ^

Error: ENOENT: no such file or directory, copyfile './.svelte-kit/output/client/_app/manifest.webmanifest' -> './.svelte-kit/output/client//manifest.webmanifest' at copyFileSync (node:fs:2817:3) at file:///F:/WebProjects/sveltekit-pwa/pwa.js:39:4 at Array.forEach () at buildPwa (file:///F:/WebProjects/sveltekit-pwa/pwa.js:38:27)

zpovsic avatar May 30 '22 05:05 zpovsic

@zpovsic are you using the same code with the @sveltejs/adapter-static adapter? Maybe a new version of SvelteKit changing the output layout? Check the build folder and adjust the paths on pwa.js module

userquin avatar Jun 01 '22 09:06 userquin

@userquin - correct (including adapter static)

copyFileSync('./.svelte-kit/output/client/_app/manifest.webmanifest', ${d}/manifest.webmanifest)

should become

copyFileSync('./.svelte-kit/output/client/manifest.webmanifest', ${d}/manifest.webmanifest)

in pwa.js

The copy now does not fail anymore

Tommertom avatar Aug 03 '22 06:08 Tommertom

I have been working with Ben to align kit and vite, but we have a problem with a race condition in kit and pwa plugin in the write and close bundle hooks.

You can check this PR https://github.com/antfu/vite-plugin-pwa/pull/327

The folks at Vite and Rollup have gotten involved and an RFC is open to fix the existing problem, you can see it here: https://github.com/vitejs/vite/discussions/9442

I have been trying to correct the problem by brute force, but for the solution we have to wait for the RFC:

  • https://github.com/sveltejs/kit/issues/5709
  • https://github.com/sveltejs/kit/pull/5694
  • https://github.com/vitejs/vite/pull/9326

userquin avatar Aug 03 '22 09:08 userquin

Thx for this - I am not sure I fully understand all the details.

But for now - until I see otherwise in the documentation or I get errors - I changed pwa.js to reflect the new path.

And manually added in index.html <link rel="manifest" href="/manifest.webmanifest">

And in pwa.js search for a workbox*.js file and copy this into build

Then the build process runs nicely and I get an installable PWA.

Tommertom avatar Aug 03 '22 19:08 Tommertom

@Tommertom if you're using SvelteKit 358+ you need to copy sw stuff manually. The example in this repo is wrong with the new Kit version and may or may not work.

The problem is the following:

  • writeBundle in Kit plugin will generate the prerendered folder with the SSG
  • then, we have the closeBundle hook on Kit and pwa plugin: since this 2 hooks are async, both will run in parallel, so the adapter can finish before the pwa plugin finish building the sw and the workbox-xxx modules

You need to copy manually, ofc if you configure the output folder on the pwa plugin to be the adapter output folder the problem disappear.

Since we'll remove both scripts from the SvelteKit example (pwa.js and pwa-configuration.js), I think we don't need to change the docs...

With new SvelteKit version, Vite will be configured properly, and so we don't need any of the scripts: Vite's outDir and publicDirconfigured properly, the webmanifest will be on the client output folder (and copied by the adapter process).

userquin avatar Aug 03 '22 20:08 userquin

Got it! Thx

Tommertom avatar Aug 03 '22 20:08 Tommertom

Released initial version of custom kit plugin: https://vite-pwa-org.netlify.app/frameworks/sveltekit.html

The example in this repo Will be removed, check the New repo for new custom kit plugin here https://github.com/vite-pwa/sveltekit

userquin avatar Nov 08 '22 08:11 userquin