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

Posted 2023-02-22

【中文标题】vue/cli-plugin-pwa：服务器请求（使用 axios）不被 service worker 缓存

【英文标题】：vue/cli-plugin-pwa: server requests (with axios) aren’t cached by the 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 选项卡中检查网络信息。

【参考方案1】：

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

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

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