javascript - 为渐进式 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 网络连接上加载数据。有没有办法可以扩展配置并设置要检测的网络类型？应该调用配置

use network first but only with WLAN, otherwise use cache as fallback

Answer 1

您需要从使用 Workbox 的 GenerateSW 切换。使用 InjectManifest模式，这使您可以更好地控制服务人员。
https://developers.google.com/web/tools/workbox/guides/get-started 中的示例可以让您开始了解要包含在服务工作人员文件中的内容的基础知识。
请注意 Network Information API并不总是可靠的，并且并非所有浏览器都支持。您应该进行防御性编码，以便在 API 不可用时体验不会“中断”。
您可以添加到服务 worker 的特定逻辑可能类似于:

import {CacheableResponsePlugin} from 'workbox-cacheable-response';
import {NetworkFirst, CacheFirst} from 'workbox-strategies';
import {registerRoute} from 'workbox-routing';

// This will be shared by both the strategies.
const cacheableResponsePlugin = new CacheableResponsePlugin({
  statuses: [0, 200],
});

const networkFirst = new NetworkFirst({
  cacheName: 'api-cache',
  networkTimeoutSeconds: 5,
  plugins: [cacheableResponsePlugin],
});

const networkFirst = new CacheFirst({
  cacheName: 'api-cache',
  plugins: [cacheableResponsePlugin],
});

registerRoute(
  // Replace with the routing criteria appropriate for your API.
  ({url}) => url.origin === 'https://example.com',

  (params) => {
    // navigator.connection might not always be available, and might not
    // always be reliable.
    // See https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation
    if (navigator.connection?.effectiveType === '4g') {
      return networkFirst.handle(params);
    }

    // If the current connection is not flagged as '4g',
    // or if navigator.connection isn't set, use CacheFirst
    // as a fallback.
    return cacheFirst.handle(params);
  }
);