如何在Vite PWA中使用Workbox Range Requests插件？

我使用Vite和Vite PWA插件开发应用，目标是缓存大体积视频文件以支持离线观看。目前小于15MB的视频可正常缓存，但大视频因分块的206范围请求无法离线播放，计划通过Workbox Range Requests插件解决该问题。

当前采用generateSW策略，已确认workbox-range-requests依赖已安装，但Vite PWA文档未提及该插件的配置方法。以下是我当前的vite.config.js相关配置片段：

// vite.config.js
VitePWA({
  ...
  workbox: {
    runtimeCaching: [
      {
        urlPattern: /^https:\/\/[a-zA-Z0-9]+\.subdomain\.domain\.com/,
        handler: 'NetworkFirst',
        options: {
          cacheName: 'media',
          expiration: {
            maxEntries: 500,
            maxAgeSeconds: 60 * 60 * 24 * 365 * 2 // 2 years
          },
          cacheableResponse: {
            statuses: [200]
          }
        }
      }
    ]
  }
})

我希望不自定义Service Worker，仅通过VitePWA的generateSW配置实现功能。参考Workbox官方文档中自定义Service Worker的写法：

// sw.js
registerRoute(
  ({request}) => {
    const {destination} = request;
    return destination === 'video' || destination === 'audio'
  },
  new CacheFirst({
    cacheName: 'your-cache-name-here',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [200]
      }),
      new RangeRequestsPlugin(),
    ],
  }),
);

我尝试了两种配置方式但均未成功：

VitePWA({
  ...
  workbox: {
    runtimeCaching: [
      {
        urlPattern: /^https:\/\/[a-zA-Z0-9]+\.subdomain\.domain\.com/,
        handler: 'NetworkFirst',
        options: {
          cacheName: 'media',
          expiration: {
            maxEntries: 500,
            maxAgeSeconds: 60 * 60 * 24 * 365 * 2 // 2 years
          },
          cacheableResponse: {
            statuses: [200]
          },
          rangeRequests: {
            statuses: [206, 416]
          }
          // OR
          rangeRequests: {}
        }
      }
    ]
  }
})

请问是否有可行的配置方案？

可行配置方案 #

在Vite PWA的generateSW模式下，你可以通过runtimeCaching的options.plugins字段直接声明使用Workbox Range Requests插件，同时需要调整缓存响应状态码以支持分块请求。以下是修改后的有效配置：

// vite.config.js
import { VitePWA } from 'vite-plugin-pwa'

export default {
  plugins: [
    VitePWA({
      // 其他PWA配置（如manifest、registerType等）
      workbox: {
        runtimeCaching: [
          {
            urlPattern: /^https:\/\/[a-zA-Z0-9]+\.subdomain\.domain\.com/,
            handler: 'CacheFirst', // 推荐使用CacheFirst适配媒体资源离线场景
            options: {
              cacheName: 'media',
              expiration: {
                maxEntries: 500,
                maxAgeSeconds: 60 * 60 * 24 * 365 * 2 // 2年
              },
              cacheableResponse: {
                statuses: [200, 206] // 加入206状态码，确保分块请求响应被缓存
              },
              plugins: [
                // 声明使用Range Requests插件
                {
                  name: 'RangeRequestsPlugin'
                }
              ]
            }
          }
        ]
      }
    })
  ]
}

关键配置说明：

1. 添加206状态码到缓存响应：分块请求返回的是206状态码，需要将其加入cacheableResponse.statuses，这样这类响应才会被缓存下来。
2. 通过plugins字段引入插件：在options.plugins数组中添加{name: 'RangeRequestsPlugin'}，Vite PWA会自动处理Workbox插件的引入和实例化，无需手动编写Service Worker。
3. 推荐使用CacheFirst策略：媒体资源属于静态资源，优先读取缓存更适合离线观看场景；如果业务逻辑要求优先从网络获取资源，可以保留NetworkFirst。

内容的提问来源于stack exchange，提问作者Rhecil Codes