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';

registerRoute(
  ({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.

Types

RangeRequestsPlugin

The range request plugin makes it easy for a request with a 'Range' header to be fulfilled by a cached response.

It does this by intercepting the cachedResponseWillBeUsed plugin callback and returning the appropriate subset of the cached response body.

Properties

constructor

void

The constructor function looks like:
```
()=> {...}
```
- returns
  RangeRequestsPlugin

Methods

createPartialResponse()

workbox-range-requests.createPartialResponse(
  request: Request,
  originalResponse: Response,
)

Given a Request and Response objects as input, this will return a promise for a new Response.

If the original Response already contains partial content (i.e. it has a status of 206), then this assumes it already fulfills the Range: requirements, and will return it as-is.

Parameters

request

Request

A request, which should contain a Range: header.
originalResponse

Response

A response.

Returns

Promise<Response>

Either a 206 Partial Content response, with the response body set to the slice of content specified by the request's Range: header, or a 416 Range Not Satisfiable response if the conditions of the Range: header can't be met.