我尝试将PWA添加到项目中失败。服务工作者不会缓存服务器请求。请求地址不会添加到缓存中。因此，离线模式不起作用。
项目配置：
- vue spa
- 使用axios库向服务器发出请求
- 服务器响应不包含缓存控制标头
- pwa是使用标准的vue插件实现的：vue/cli插件pwa
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],
},
},
}]
}
}
};
PS还有这个：浏览器中的开发者控制台->"应用程序"选项卡->可安装性->quot；页面不能脱机工作"；。服务工作程序已成功连接(请求缓存除外(，清单已标识。为什么会显示这样的信息？
我目前也在学习PWA。我读到的关于这个问题：
- Axios正在使用XHR请求和不获取请求
- 由于工作线程与主线程分开运行，因此服务工作线程独立于与其关联的应用程序，后果：同步XHR和localStorage不能在服务工作线程中使用
所以我想您可能需要使用标准的获取请求。
另一个答案具有误导性。
假设服务工作者已成功注册/etc，则主线程(或web工作者线程(上的任何(https(网络请求都将通过服务工作者发送。
Axios是主线程的一部分，而不是服务工作线程。
主线程中的XHR与任何其他方法相同(例如js:fetch((、html:、css:url(((。。。所有请求都将触发服务工作程序中的"fetch"事件(可能是缓存的(。
问题很可能是因为主线程中的网络请求是http，而不是https。如果可能，将提供资源的服务器从http升级到https，并更改主线程上使用的URL。将不可能在服务工作者中"重写"协议。
如果由于某种原因(例如没有源代码的遗留应用程序(无法更改主线程上的代码，那么应该可以获取发送导致请求的文档的服务器(即带有fetch('http://.../'(/XHR，具有<img src="；http://.../"gt；，带有url的css文件(http://.../))添加标题：
内容安全策略：升级不安全的请求
更多信息：https://github.com/w3c/ServiceWorker/issues/813
以及https://w3c.github.io/webappsec-upgrade-insecure-requests/#goals