Service worker not loading the external Material icons file when offline

[alvinkonda]

This is the file. Any idea how to make it work?
https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons

Thanks

[laurentpayot]

@alvinkonda you can add this in your workboxOptions of your vue.config.js file:

    runtimeCaching: [
      {
        // Google fonts
        urlPattern: new RegExp('https://fonts.'),
        handler: 'cacheFirst',
        options: {
          cacheName: 'fonts'
        }
      }
    ]

[alvinkonda]

Hi,
Thanks for your reply!

Sorry but i cant find that file anywhere into my Vuetify PWA template, either workboxOptions i cant find. Can you please give more details

Thnx
Alvin

[laurentpayot]

Oh sorry wrong repo. I gave you a solution I use with vue CLI 3, where plugins are used instead of templates. You should move to Vue CLI 3 as this PWA template is about to be depreciated (it doesn't use workbox webpack plugin).

I think you can use the runtimeCaching option of my previous post inside the SWPrecachePlugin options here.
(eventually modify it, you have to read the docs of SWPrecachePlugin 😉 )

[alvinkonda]

Thnx, i tried but it seems to not work plus it is only for production mode as well. Clearly this is a bug with this template, which needed to be solved here as it breaks the scope of progressive web app if the icons are missing on offline mode.

[laurentpayot]

It used to work for me when I was using this template. Service worker only work in production mode so that's normal.

[alvinkonda]

clearly a bug with the template. I'm waiting to be solved.