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

Я бы ожидал, что мой сервисный работник кеширует все ответы json от моего API Google, но вместо этого ничего не происходит. Я даже не вижу Cache Storage в наборе инструментов разработчика на вкладке «Приложение». Что мне не хватает? Пожалуйста, помогите:)

Answer 1

Ваш RegExp неверен.Передний и конечный / не должны быть там, поскольку вы также заключаете шаблон в строку.

Вы можете проверить 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',
        }]
      })
    ]
  }
}