vue-cli + workbox 不缓存内容

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

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

Answer 1

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

Answer 2

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

您可以像这样测试 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]

vue-cli + workbox 不缓存内容

vue-cli + workbox not caching content

vue.js

workbox

vue-cli