如何在vue cli3中缓存服务工作者中的应用程序接口和资产

vue add @vue/pwa

// registerServiceWorker.js

import { register } from 'register-service-worker'
import { Workbox } from 'workbox-window'

if ('serviceWorker' in navigator) {
  const wb = new Workbox('/service-worker.js')

  wb.addEventListener('activated', event => {
    // 清除旧的缓存
    if (event.isUpdate) {
      // 执行一些清除操作
    }
  })

  wb.register()
}

// main.js

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'

new Vue({
  render: h => h(App),
}).$mount('#app')

// vue.config.js

module.exports = {
  pwa: {
    workboxOptions: {
      // 配置缓存策略
      runtimeCaching: [
        {
          urlPattern: new RegExp('^https://api.example.com/'),
          handler: 'networkFirst',
          options: {
            cacheName: 'api-cache',
            networkTimeoutSeconds: 10,
          },
        },
        {
          urlPattern: new RegExp('^https://assets.example.com/'),
          handler: 'cacheFirst',
          options: {
            cacheName: 'assets-cache',
          },
        },
      ],
    },
  },
}

npm run build