使用 nuxt 和 @nuxtjs/pwa 的网站不缓存谷歌字体答案

【问题标题】：website using nuxt and @nuxtjs/pwa not caching google fonts使用 nuxt 和 @nuxtjs/pwa 的网站不缓存谷歌字体
【发布时间】：2018-08-13 12:27:09
【问题描述】：

我使用npx create-nuxt-app 创建了我的应用程序，然后添加了npm install @nuxtjs/pwa --save。我在 index.html 中包含了一个谷歌字体：

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

我通过单击开发工具/应用程序选项卡中的“离线”复选框并重新加载，在 Chrome 中以离线模式测试了我的应用程序。除字体外，所有内容均已缓存。

然后我补充说：

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

到nuxt.config.js 文件，但我无法获取要缓存的字体。我在 urlPattern 上尝试了多种变体。

Nuxt 正在为我生成一个 Service Worker，它看起来像这样：

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')

为什么字体没有被缓存？

编辑#1：感谢 Jeff Posnick，我明白发生了什么。我还没有想出正确的语法来传递nuxt.config.js 文件，但作为一个实验，我直接破解了sw.js 文件并添加了这两行：

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')

成功了！

【问题讨论】：

标签： service-worker nuxt.js

【解决方案1】：

对于第 2 版的 workbox 和第 2 版的 @nuxt/pwa，这是 nuxt.config.js 文件中所需的语法：

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]}}
        },
    ]
}

【讨论】：

【解决方案2】：

这是因为 Workbox 不会使用 cacheFirst 策略缓存不透明的响应，除非您明确告诉它这样做。

这是与 Workbox v2 混淆的常见原因，我们为即将发布的 v3 版本改进了 JavaScript 控制台日志和文档。 “Handle Third Party Requests”指南更详细。

您可以将配置更改为

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

在当前 v2 版本的 Workbox 中获得该行为。

【讨论】：

感谢您的解释和示例！不过，我仍在努力缓存 google 字体。添加 cacheableResponse 行后，生成的 sw.js 文件与我在问题中发布的内容没有改变。

【解决方案3】：

用@nuxtjs/pwa@3.0.0-beta.20 和nuxt@2.11.0 测试。

nuxt.config.js 中的pwa 属性按预期创建了一个新缓存：

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

可以在 Chrome DevTools 的“应用程序”选项卡上的 Cache Storage 部分确认缓存内容。

【讨论】：