vue.js - vue-cli + 工作箱不缓存内容

Question

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

pwa: {
        //pwa configs... 

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

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

Answer 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]

Answer 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',
        }]
      })
    ]
  }
}