vue/cli-plugin-pwa：服务器请求（带axios）不被服务工作人员缓存

Question

我试图将PWA添加到项目中，但未成功。服务工作者不会缓存服务器请求。请求地址未添加到缓存存储中。因此，脱机模式不起作用。

项目配置：

• vue水疗中心
• 使用axios库向服务器发出的请求
• 服务器响应不包含缓存控制标头
• pwa是使用标准vue插件实现的：vue/cli插件pwa

vue中的PWA配置。配置。js:

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],
                    },
                },
            }]
        }
    }
};

还有这个：浏览器中的开发者控制台-

Answer 1

我目前也在学习PWA。关于这个问题，我读到的是：

1. Axios在后面使用XHR请求，而不是获取请求。
2. 因为辅助角色与主线程分开运行，所以服务辅助角色独立于它们关联的应用程序，结果是：同步XHR和localstore不能在服务辅助角色中使用

所以我想您可能需要使用标准的获取请求。