title: website using nuxt and @nuxtjs/pwa not caching google fonts
body: <p>I created my app with <code>npx create-nuxt-app</code>, then added <code>npm install @nuxtjs/pwa --save</code>. I'm including a google font in index.html with:</p>
  
  <pre><code>&lt;link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" data-n-head="true"&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>I then added:</p>
  
  <pre><code>workbox: {
      runtimeCaching: [
          {
              urlPattern: 'https://fonts.googleapis.com/.*',
              handler: 'cacheFirst',
              method: 'GET'
          },
      ]
  }
  </code></pre>
  
  <p>to the <code>nuxt.config.js</code> file but I can't get the font to be cached. I've tried a number of variations on the urlPattern.</p>
  
  <p>Nuxt is generating a service worker for me, and it looks like this:</p>
  
  <pre><code>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')
  </code></pre>
  
  <p>Why is the font not getting cached?</p>
  
  <p>EDIT #1:
  Thanks to Jeff Posnick, I understand what's happening. I haven't figured out the right syntax to pass in the <code>nuxt.config.js</code> file, but as an experiment, I hacked the <code>sw.js</code> file directly and added these two lines:</p>
  
  <pre><code>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')
  </code></pre>
  
  <p>That worked!</p>