如何在vue cli3中缓存service worker中的api和资产

Question

import { register } from 'register-service-worker'
import pwa from '@vue/cli-plugin-pwa'
if (process.env.NODE_ENV === 'development') {
// if (process.env.NODE_ENV === 'production') {
console.log(pwa)
register(`${process.env.BASE_URL}service-worker.js`, {
ready () {
console.log(
'App is being served from cache by a service worker.n'
)
},
cached () {
console.log('Content has been cached for offline use.')
},
updated () {
console.log('New content is available; please refresh.')
},
offline () {
console.log('No internet connection found. App is running in 
offline mode.')
},
error (error) {
console.error('Error during service worker registration:', error)
}
})
}

这是我的registerserviceworker.js。我试图在这个文件中实现，但无法在其中添加文件和api。

Answer 1

您必须在vue.config.js的PWA对象中使用"workboxOptions"。像这样：

module.exports = {
pwa: {
[...]
workboxOptions: {
runtimeCaching: [{
urlPattern: new RegExp('^https://yourpathtothe.api/'),
handler: 'networkFirst',
options: {
networkTimeoutSeconds: 20,
cacheName: 'api-cache',
cacheableResponse: {
statuses: [0, 200],
},
},
}]
}
},