如何使用 vue JS spa 设置 google workbox

Question

我有一个基于 VUE Js 构建的 Ionic 项目，我正在尝试配置 @vue/cli-plugin-pwa ，它本质上是 google workbox 的抽象。

我创建了一个包含以下内容的 vue.config.js 文件：

module.exports = {
  pwa: {
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
     swSrc: 'src/service-worker.js',
    }
  }
}

而 src/service-worker.js 内容是

self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

我正在尝试处理“后备响应”当用户离线（无互联网）时，如此处中所述官方文档以避免默认“没有互联网”页面。不幸的是，我不知道如何实现它。

我花了几天时间试图解决这个问题，并多次浏览了文档，我理解文档的含义，但我只是不知道如何/在哪里在 VUE js 中实现它。关于这个主题的官方 Vue CLI 文档（链接在这里）几乎没有实际意义。

如果有人可以帮助我或向我展示一些示例存储库，我将非常感激。

Answer 1

休息了几天后，现在回头看，我意识到 google 的当前文档适用于 workbox 版本 6，而 workbox 版本 5 的文档被标记为遗留。

而 @vue/cli-plugin-pwa 插件依赖于 workbox 版本 4.3，该版本已严重过时；两者之间存在很多重大变化和兼容性问题。鉴于这一事实以及我时间紧迫，我开始寻找不同的方向。

经过一番尝试和错误后，我已恢复到 GenerateSW 方法，因为它公开了一个 navigateFallback 选项，如果将其设置为条目文件，在我的例子中为索引.html 防止用户在离线时刷新时出现默认的“无互联网”页面。

此外，我还通过拦截 Axios 调用来处理应用程序中的 API 错误。

如果有人感兴趣，这是我的 vue.config.js：

module.exports = {
    pwa: {
        workboxPluginMode: 'GenerateSW',
        workboxOptions: {
            navigateFallback: '/index.html',
            cleanupOutdatedCaches: true,
            importWorkboxFrom: 'local',
            importScripts: ['/inject-sw.js']
        }
    }
}

我知道这可能不是正确的方法，但这至少暂时解决了问题。

如果有人有更好的方法，请随时指出。

另外，这个“文章”当我试图理解这一切是如何运作时，它非常足智多谋。