vue-cli + 工作箱不缓存内容答案

【问题标题】：vue-cli + workbox not caching contentvue-cli + 工作箱不缓存内容
【发布时间】：2018-05-18 05:32:11
【问题描述】：

我正在使用 vue-cli v3.0.0.beta10 + 默认的集成工作箱，我在我的 vue.config.js 文件（位于我的根文件夹中）中添加了以下配置：

pwa: {
        //pwa configs... 

        workboxOptions: {
        // ...other Workbox options...
        runtimeCaching: [ {
           urlPattern: new RegExp('/.*(?:googleapis)\.com.*$/'),
           handler: 'staleWhileRevalidate',
        }]
       }
}

我希望我的 serviceworker 缓存来自我的 google api 的所有 json 响应，但没有任何反应。我什至在“应用程序”选项卡下的开发人员工具箱中都看不到缓存存储。我错过了什么？请帮忙:)

【问题讨论】：

标签： vue.js vue-cli workbox

【解决方案1】：

您的正则表达式不正确。前导和尾随 / 不应存在，因为您还将模式包装在字符串中。

您可以像这样测试 RegExp：

new RegExp('/.*(?:googleapis)\.com\/.*$/').exec('https://www.googleapis.com/tasks/v1/users/@me/lists')
=> null

尝试删除前导和尾随/：

new RegExp('.*(?:googleapis)\.com\/.*$').exec('https://www.googleapis.com/tasks/v1/users/@me/lists')
=> ["https://www.googleapis.com/tasks/v1/users/@me/lists", index: 0, input: "https://www.googleapis.com/tasks/v1/users/@me/lists", groups: undefined]

【讨论】：

谢谢，这可行，但它只缓存来自我的谷歌后端的图像，你知道为什么它对我从同一个后端服务检索的 json 对象列表不做同样的事情吗？跨度>
对于阅读此线程的任何人，请注意我正在使用“staleWhileRevalidate”缓存策略。如果您使用“cacheFirst”，您可能需要检查 this question 并了解不透明的响应

【解决方案2】：

你使用workbox-webpack-plugin吗？

const workboxPlugin = require('workbox-webpack-plugin')

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new workboxPlugin({
        ...
        runtimeCaching: [ {
           urlPattern: new RegExp('/.*(?:googleapis)\.com.*$/'),
           handler: 'staleWhileRevalidate',
        }]
      })
    ]
  }
}

【讨论】：

workbox-webpack-plugin 默认包含在 vue-cli3.0.0-beta.10 中