web.dev LIVE has kicked off! Join us now for our digital event from June 30th to July 2nd at web.dev/live

Workbox Range Requests

What are Range Requests?

When making a request, a range header can be set that tells the server to return only a portion of the full request. This is useful for certain files like a video file, where a user might change where to play the video.

What does this module do?

There may be scenarios where you want to serve a cached file but the browser has set a range header. Normally the header would be ignored.

This module will read the cached response and return the specified range of data.

Basic Usage

You can use Workbox Range Requests by adding the plugin to the strategy you want to check for range requests against.

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {RangeRequestsPlugin} from 'workbox-range-requests';

  ({url}) => url.pathname.endsWith('.mp4'),
  new CacheFirst({
    plugins: [
      new RangeRequestsPlugin(),

Advanced Usage

If you want to make use of this logic outside of the Plugin you can use the createPartialResponse() function.

import {createPartialResponse} from 'workbox-range-requests';

createPartialResponse(request, cachedResponse);

For more info see the reference docs.