Published on Updated on

Review the API reference for workbox-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(),

There are some additional considerations to take into account when serving cached media content. Read more in the "Serve cached audio and video" recipe

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.

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.