vue/cli-plugin:服务工作者不缓存服务器请求(带有axios)。
我试图将PWA添加到项目中，但没有成功。服务工作者不会缓存服务器请求。请求地址不会添加到缓存存储中。因此，脱机模式无法工作。
项目配置：
- vue温泉
- 使用axios库对服务器的请求
- 服务器响应不包含缓存控制头。
- pwa使用标准的vue插件: vue /cli-plugin实现。
vue.config.js:中的PWA配置
module.exports = {
publicPath: '/',
pwa: {
name: 'Old Vehicles',
manifestOptions: {
name: "Old Vehicles",
display: "standalone",
scope: "/",
start_url: "/"
},
workboxPluginMode: 'GenerateSW',
workboxOptions: {
navigateFallback: '/index.html',
runtimeCaching: [{
urlPattern: new RegExp('^http'),
handler: 'NetworkFirst',
options: {
networkTimeoutSeconds: 2,
cacheName: 'api-cache',
cacheableResponse: {
statuses: [0, 200],
},
},
}]
}
}
};还有:浏览器->应用程序选项卡-> Installability ->中的开发控制台“页面不能脱机工作”。服务工作人员成功连接(除请求缓存外)，将标识清单。为甚麽会有这样的讯息呢？
Stack Overflow用户
发布于 2022-03-03 06:37:12
另一个答案是误导。
假设服务工作者已成功注册/等，则将通过服务工作者发送主线程(或worker线程)上的任何(https)网络请求。
Axios是主线程的一部分，而不是服务工作线程。
主线程中的XHR与任何其他方法相同(例如js: fetch()、html：、css: url())...all请求将触发服务工作人员中的“fetch”事件(可能是缓存的)。
问题很可能是因为主线程中的网络请求是http，而不是https。如果可能，将提供资源的服务器从http升级到https，并更改主线程上使用的URL。不可能在服务工作人员中“重写”协议。
如果您由于某些原因无法更改主线程上的代码(例如没有源的遗留应用程序)，那么应该可以让发送导致请求的文档的服务器(即带有fetch('http://.../')/XHR的js文件、带有html文件的html文件、带有url(http://.../)的css文件)添加一个标题：
内容-安全性-策略:升级-不安全-请求
更多信息：https://github.com/w3c/ServiceWorker/issues/813
和https://w3c.github.io/webappsec-upgrade-insecure-requests/#goals
https://stackoverflow.com/questions/63260781
复制相似问题
腾讯云开发者
