Fonts are not available offline

[paulrosen]

I have a PWA that mostly works offline except that the fonts only work when there is an internet connection. I'm not sure if there is something to add to the manifest and I'm not sure if there is a way to debug exactly what is happening. I tried the following in nuxt.config.ts:

export default defineNuxtConfig({
   // other stuff. etc...
  pwa: {
    manifest: {
      name: "My Name",
      lang: 'en'
    },
    workbox: {
      offlineAssets: [ "/fonts/*.ttf", "/fonts/*.woff", "/fonts/*.svg" ]
    }
},

But that doesn't help.

The fonts are in /public/fonts/*.ttf

As I said, the fonts work when the app starts up with an internet connection.

[kevinmarrec]

@paulrosen We don't have offlineAssets support here yet, but I'll work on adding it so you can pre-cache your fonts and make them available offline :)

[paulrosen]

I've gotten back to this project and was excited to see this was resolved! But I can't figure out how to get it specified. It tried each of the following in nuxt.config.ts but they don't change the manifest file:

pwa: {
    workbox: {
      cacheOptions: {
        directoryIndex: '/fonts/',
        revision: '1',
      },
      offlineAssets: [
        '/fonts/*.ttf',
      ],
      runtimeCaching: [
        {
          urlPattern: "/fonts/*.ttf",
          handler: 'StaleWhileRevalidate',
          options: {
            cacheName: 'fonts'
          }
        }
      ]
    }

How do I get the manifest file to change?

[kevinmarrec]

@paulrosen I implemented some preCaching option but I would need to have extra work to get runtimeCaching as well, I'll have a look to have something closer to Nuxt 2 module.

[paulrosen]

Is this still in progress? I'm not positive whether the bug is in my configuration or this library but the configuration is pretty simple. My fonts are not cached.