[英]How to cache api and assets in service worker in vue cli3
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)
}
})
}
This is my registerserviceworker.js. 这是我的registerserviceworker.js。 I tried to implement in this file but i am not able to add files and api in this.
我试图在此文件中实施,但无法在其中添加文件和api。
You have to use the "workboxOptions" inside the PWA Object of the vue.config.js. 您必须在vue.config.js的PWA对象中使用“ workboxOptions”。 Like this:
像这样:
module.exports = {
pwa: {
[...]
workboxOptions: {
runtimeCaching: [{
urlPattern: new RegExp('^https://yourpathtothe.api/'),
handler: 'networkFirst',
options: {
networkTimeoutSeconds: 20,
cacheName: 'api-cache',
cacheableResponse: {
statuses: [0, 200],
},
},
}]
}
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.