woff/woff2 fonts in assets folder not cached

[Timo Peters]

I'm tried using fontawesome and bootstrap-icons in my PWA.
In both cases the icon fonts weren't cached and thus only displayed a black box.

includeAssets: ['favicon.ico', (...) 'assets/*.*'], didn't help.
Neither did setting `injectManifest.globPatterns'.

Images are cached correctly using 'img/*.*' in includeAssets`.
If you need more information I'm happy to provide them.

[Joaquín Sánchez]

@datWeazel try this, add fast-glob as dev dependency:

// vite.config.ts/vite.config.js
import fg from 'fast-glob'
...
VitePWA({
  ...
  // include all static assets under public/
  includeAssets: fg.sync('**/*.{png,svg,ico,txt,woff,woff2}', { cwd: resolve(__dirname, 'public') }),
  ...
})

[Joaquín Sánchez]

@datWeazel src/assets folder is not yet handled by this plugin, we need do some changes on the codebase, just move your fonts to the public folder and use / to reference them, see public directory on vitejs docs:

https://vitejs.dev/guide/assets.html#the-public-directory

[Timo Peters]

@userquin thanks for your reply.
The font get's moved into dist/assets after compile. Beforehand it's part of the node module. So it shouldn't matter that the plugin can't handle src/assets for now if I understood you correctly.

I'll try the fast-glob solution tomorrow, thanks for that.

[Timo Peters]

Issue was on my end. I mixed generateSW and injectManifest stuff. Sorry.

[seba9999]

How did you fix this ?

I'm trying to move from generateSW to injectManifest ... But I thought that at least the workbox.globPatterns would still be used by the precaching thing no ? My .woff2 locals fonts aren't cached anymore ( they were with generateSW )

I have :

 VitePWA({
      strategies: 'injectManifest',
      workbox: {
        globPatterns: ['**/*.{js,jsx,css,html,png,svg,woff2,ico,json,webp}'],
      }
 })

And my sw.js :

import { clientsClaim } from 'workbox-core';
import { registerRoute } from 'workbox-routing';
import { cleanupOutdatedCaches, precacheAndRoute } from 'workbox-precaching';
import { StaleWhileRevalidate } from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { ExpirationPlugin } from 'workbox-expiration';

// Register precached routes (static cache)
precacheAndRoute(self.__WB_MANIFEST || []); // <-- I don't really get this line and I assumed it should use the workbox.globPatterns but it doesn't work for my woff2 locals fonts !

// Clean prievous cache with different "version"
cleanupOutdatedCaches();

// Install directly the sw
self.skipWaiting();

// Makes the sw to control already open tabs of the website !
clientsClaim();

// Cache API calls (StaleWhileRevalidate)
registerRoute(
  ({ url, sameOrigin }) => url.pathname.match(/^\/api\//),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 10,
        maxAgeSeconds: 31536000,
      }),
      new CacheableResponsePlugin({
        statuses: [0, 200, 304],
      }),
    ],
  }),
  'GET'
);

[seba9999]

Aaaaaaaaaaand I read the docs...

Nevermind ! :D