How do I use Workbox Range Requests plugin with Vite PWA?

My app is created with Vite and the Vite PWA plugin and I want to cache larger size video files in the cache for watching offline. Smaller videos <15MB cache fine, but currently larger videos fail offline because of the chunked 206 Range Requests. I'm hoping the Workbox Range Requests plugin will remedy this.

I am using the generateSW strategy.

I can see the workbox-range-requests plugin is included as a dependency, but the Vite PWA config doesn't cover it's usage in the docs.

Here is the relevant part of my vite config:

// 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]
          }
        }
      }
    }
  ]
})

I would prefer not to create a custom Service Worker and use generateSW via VitePWA config option, which seems should be possible. You can use the CacheableResponses plugin as defined above.

From the relevant part of the workbox docs, you can see that if you were writing your own service worker, a similar runtime caching pattern would be defined like this:

// 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(),
    ],
  }),
);

You can see how the CacheableResponse constructor translates to the first vite.config.js example above (as a key directly under options, not nested in options.plugins), but not sure what to do with Range Requests constructor.

I'm thinking something like this should work:

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: {}
        }
      }
    }
  ]
})

Not winning here. Has anyone done this before?

Thanks in advance.

The answer is actually really simple Boolean property:

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: true
        }
      }
    }
  ]
})

For "vite-plugin-pwa" ^0.16.4