为渐进式 Web 应用缓存设置最小网络类型 (WLAN)

Question

我通过使用外部 API 的 Vue CLI 创建了一个 PWA。API 响应应该被缓存以供离线访问。

从文档https://cli.vuejs.org/core-plugins/pwa.html#configuration我在根目录中创建了一个vue.config.js文件

module.exports = {
  publicPath: '/pwa',
  pwa: {
    appleMobileWebAppCapable: 'yes',
    workboxPluginMode: 'GenerateSW',
    workboxOptions: {
      runtimeCaching: [
        {
          urlPattern: new RegExp('^https://example.com/'),
          handler: 'networkFirst', // Network first, Cache fallback
          options: {
            networkTimeoutSeconds: 5,
            cacheName: 'api-cache',
            cacheableResponse: {
              statuses: [0, 200],
            },
          },
        },
      ],
    },
  },
};

该项目运行良好，但我想避免在非常糟糕的连接上从 API 加载数据。

我只想在 WLAN 网络连接上加载数据。有没有办法扩展配置并设置要检测的网络类型？该配置应称为

首先使用网络但仅使用 WLAN，否则使用缓存作为后备