vue/cli-plugin-pwa：服务器请求（使用 axios）不被 service worker 缓存答案

【问题标题】：vue/cli-plugin-pwa: server requests (with axios) aren’t cached by the service workervue/cli-plugin-pwa：服务器请求（使用 axios）不被 service worker 缓存
【发布时间】：2020-11-25 08:53:11
【问题描述】：

我没有成功尝试将 PWA 添加到项目中。 Service Worker 不会缓存服务器请求。请求地址不会添加到缓存存储中。因此，离线模式不起作用。

项目配置：

vue 水疗中心
使用 axios 库向服务器发出请求
服务器响应不包含缓存控制标头
pwa 是使用标准 vue 插件实现的：vue / cli-plugin-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 还有这个：浏览器中的开发者控制台 -> 应用程序选项卡 -> 可安装性 -> “页面无法脱机工作”。服务工作者成功连接（请求缓存除外），清单被识别。为什么会显示这样的信息？

【问题讨论】：

vue.config.js 按预期工作，我无法重现该问题。您可以在 localhost 上提供 dist/ 文件夹，并在 devtool console 选项卡中检查工作箱日志，在 network 选项卡中检查网络信息。

标签： vue.js progressive-web-apps service-worker

【解决方案1】：

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

Axios 在后面使用 XHR 请求 和 not fetch 请求。
由于工作线程与主线程分开运行，服务工作线程独立于与其关联的应用程序，后果：synchronous XHR and localStorage cannot be used in a service worker

所以我猜你可能需要使用标准获取请求。

【讨论】：