javascript - 如何在 vue cli3 中缓存服务工作者中的 api 和资产
问题描述
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。
解决方案
您必须使用 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],
},
},
}]
}
},
推荐阅读
- python - 使用 Tweet Parser 在 Twitter 帖子上打印喜欢、评论和分享
- c# - 使用 OLEDB c# 读取工作表名称中具有单引号的 Excel 文件时出现问题
- epplus - 尝试使用 epplus 保存 excel 文件时数据不可见
- angular - 如何使用 TypeScript 在类中创建静态常量?
- css - Simple_form 样式(去除边框和文本对齐中心)
- android - contentResolver 中的 loadThumbnail() 是否会从默认 Thumbnails 文件夹中加载缩略图?
- webpack - 如何仅为 .mod.css 文件启用 css 模块?下一页
- python - 将行向量数据框除以标量数据框
- css - 如何将伪 webkit 滚动条的 z 索引设置在所有元素之上
- hibernate - Grails 多对多连接表