website using nuxt and @nuxtjs/pwa not caching google fonts

Question

I created my app with npx create-nuxt-app, then added npm install @nuxtjs/pwa --save. I'm including a google font in index.html with:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" data-n-head="true">

I tested my app in offline mode in Chrome by clicking the "Offline" checkbox in the devtools/application tab, and reloading. Everything is cached except for the font.

I then added:

workbox: {
    runtimeCaching: [
        {
            urlPattern: 'https://fonts.googleapis.com/.*',
            handler: 'cacheFirst',
            method: 'GET'
        },
    ]
}

to the nuxt.config.js file but I can't get the font to be cached. I've tried a number of variations on the urlPattern.

Nuxt is generating a service worker for me, and it looks like this:

importScripts('/_nuxt/workbox.3de3418b.js')

const workboxSW = new self.WorkboxSW({
  "cacheId": "my-app",
  "clientsClaim": true,
  "directoryIndex": "/"
})

workboxSW.precache([
  {
    "url": "/_nuxt/app.bb74329360a7ee70c2af.js",
    "revision": "8477c51cbf9d3188f34f1d61ec1ae6bc"
  },
  {
    "url": "/_nuxt/layouts/default.ce9446c7c3fffa50cfd2.js",
    "revision": "504d33b2d46614e60d919e01ec59bbc8"
  },
  {
    "url": "/_nuxt/manifest.912c22076a54259e047d.js",
    "revision": "a51a74b56987961c8d34afdcf4efa85c"
  },
  {
    "url": "/_nuxt/pages/index.6bfd6741c6dfd79fd94d.js",
    "revision": "1a80379a5d35d5d4084d4c2b85e1ee10"
  },
  {
    "url": "/_nuxt/vendor.f681eb653617896fcd64.js",
    "revision": "59c58901fd5142fdaac57cbee8c1aeb4"
  }
])


workboxSW.router.registerRoute(new RegExp('/_nuxt/.*'), workboxSW.strategies.cacheFirst({}), 'GET')

workboxSW.router.registerRoute(new RegExp('/.*'), workboxSW.strategies.networkFirst({}), 'GET')

workboxSW.router.registerRoute(new RegExp('https://fonts.googleapis.com/.*'), workboxSW.strategies.cacheFirst({}), 'GET')

Why is the font not getting cached?

EDIT #1: Thanks to Jeff Posnick, I understand what's happening. I haven't figured out the right syntax to pass in the nuxt.config.js file, but as an experiment, I hacked the sw.js file directly and added these two lines:

workboxSW.router.registerRoute(new RegExp('https://fonts.googleapis.com/.*'),
    workboxSW.strategies.cacheFirst({cacheableResponse: {statuses: [0, 200]}}), 
    'GET')

workboxSW.router.registerRoute(new RegExp('https://fonts.gstatic.com/.*'),
    workboxSW.strategies.cacheFirst({cacheableResponse: {statuses: [0, 200]}}),
    'GET')

That worked!

Answer 1

For version 2 of workbox and version 2 of @nuxt/pwa, this is the syntax that is needed in the nuxt.config.js file:

workbox: {
    runtimeCaching: [
        {
            urlPattern: 'https://fonts.googleapis.com/.*',
            handler: 'cacheFirst',
            method: 'GET',
            strategyOptions: {cacheableResponse: {statuses: [0, 200]}}
        },
        {
            urlPattern: 'https://fonts.gstatic.com/.*',
            handler: 'cacheFirst',
            method: 'GET',
            strategyOptions: {cacheableResponse: {statuses: [0, 200]}}
        },
    ]
}

Answer 2

This is due to the fact that Workbox won't cache opaque responses using a cacheFirst strategy, unless you specifically tell it to.

This was a common source of confusion with Workbox v2, and we've improved the JavaScript console logs and documentation for the upcoming v3 release. The "Handle Third Party Requests" guide goes into more detail.

You can change your config to

runtimeCaching: [{
  urlPattern: 'https://fonts.googleapis.com/.*',
  handler: 'cacheFirst',
  method: 'GET',
  cacheableResponse: {statuses: [0, 200]}
}]

to get that behavior in the current v2 release of Workbox.

Answer 3

tested with @nuxtjs/[email protected] and [email protected].

pwa property below in nuxt.config.js created a new cache as expected:

  pwa: {
    workbox: {
      runtimeCaching: [
        {
          urlPattern: 'https://my-api-url/.*',
          handler: 'networkFirst',
          method: 'GET',
          strategyOptions: {
            cacheName: 'my-api-cache',
            cacheableResponse: {statuses: [0, 200]}
          }
        }
      ]
    }
  },

could confirm cache content in Cache Storage section on Chrome DevTools, Appliation tab.