Question

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

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

我通过点击devtools / application标签中的“Offline”复选框并重新加载，在Chrome中以离线模式测试了我的应用。除了字体外，所有内容都被缓存。

然后我补充道：

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

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

Nuxt正在为我生成一个服务工作者，它看起来像这样：

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

那很有用！

Answer 1

对于工作箱的第2版和@ nuxt / pwa的第2版，这是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]}}
        },
    ]
}

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

经过@nuxtjs/pwa@3.0.0-beta.20和nuxt@2.11.0的测试。

以下pwa中的

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

  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部分中确认缓存内容。

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

3 个答案: