vite-pwa / vite-plugin-pwa

Zero-config PWA for Vite
https://vite-pwa-org.netlify.app/
MIT License
3.17k stars 207 forks source link

Precaching and fontsource #541

Closed Kai-W closed 1 year ago

Kai-W commented 1 year ago

I am using Vite-pwa, injectManifest and FontSource to include fonts in my Project. During the build Process the fonts are placed in the dist/assets Folder but they are not included in the precache.

Example: https://codesandbox.io/p/sandbox/mystifying-hamilton-85yc99?file=%2Fvite.config.ts%3A11%2C25

In the docs about static assets https://vite-pwa-org.netlify.app/guide/static-assets.html there are ways to include more files from the public folder (includeAssets) and from /src/assets but nothing about files that are placed in /dist/assets automatically.

I got it to work by adding additionalManifestEntries manually but this is not a great solution because the files are appended a hash e.g.: dist/assets/source-sans-pro-latin-400-normal-c124c88c.woff2

Is there a better way to achieve automatic precaching of Files e.g. Fonts that are added during build?

userquin commented 1 year ago

@Kai-W you don't need to use additionalManifestEntries, you only need to add woff2 to injectManifest.globPatterns: workbox-build is file based (https://vite-pwa-org.netlify.app/guide/static-assets.html#globpatterns):

// pwa plugin options
injectManifest: {
  globPatterns: ['**/*.{js,css,html,woff2}']
}
Kai-W commented 1 year ago

thanks that works. i somehow red over / ignored the part of the docs that solves my problem....