workbox-range-requests

リクエストを行う際、range ヘッダーを設定して、リクエスト全体の一部のみを返すようにサーバーに指示できます。これは、ユーザーが動画の再生場所を変更する可能性のある動画ファイルなど、特定のファイルに対して有用です。

このモジュールの内容

キャッシュ ファイルを提供したいが、ブラウザが range ヘッダーを設定している場合があります。通常、このヘッダーは無視されます。

このモジュールはキャッシュに保存されたレスポンスを読み取り、指定された範囲のデータを返します。

基本的な使用法

ワークボックス範囲リクエストを使用するには、範囲リクエストを確認する戦略にプラグインを追加します。

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

高度な使用方法

プラグインの外部でこのロジックを使用する場合は、createPartialResponse() 関数を使用します。

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

createPartialResponse(request, cachedResponse);

詳しくは、リファレンス ドキュメントをご覧ください。

型

RangeRequestsPlugin

範囲リクエスト プラグインを使用すると、キャッシュに保存されたレスポンスによって「Range」ヘッダーを含むリクエストを簡単に実行できます。

これは、cachedResponseWillBeUsed プラグインのコールバックをインターセプトし、キャッシュに保存されたレスポンス本文の適切なサブセットを返すことで行われます。

プロパティ

  • コンストラクタ

    void

    constructor 関数は次のようになります。 

    () => {...}

Methods

createPartialResponse()

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

Request オブジェクトと Response オブジェクトを入力として指定すると、新しい Response の Promise が返されます。

元の Response にすでに部分的なコンテンツが含まれている場合（つまり、ステータスが 206 の場合）、すでに Range: の要件を満たしていると想定され、そのまま返されます。

パラメータ

  • request

    リクエスト

    リクエスト。Range: ヘッダーが含まれている必要があります。

  • originalResponse

    レスポンス

    レスポンス。

戻り値

  • Promise<Response>

    リクエストの Range: ヘッダーで指定されたコンテンツのスライスに設定されたレスポンス本文を含む 206 Partial Content レスポンス。または、Range: ヘッダーの条件を満たさない場合は 416 Range Not Satisfiable レスポンス。