workbox-range-requests

リクエストを行うときに、range ヘッダーを設定すると、完全なリクエストの一部のみを返すようにサーバーに指示できます。この 動画ファイルなど特定のファイルで役立ちます。 動画の再生場所が変わります。

このモジュールの機能

キャッシュに保存されたファイルを配信したいが、ブラウザが range ヘッダーを設定している場合など、このようなシナリオが考えられます。通常、ヘッダーは は無視されます。

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

基本的な使用法

Workbox Range Requests を使用するには、プラグインを 戦略を指定します。

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 関数は次のようになります。 

    () => {...}

メソッド

createPartialResponse()

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

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

元の Response にコンテンツの一部がすでに含まれている（つまり、 （ステータスが 206）の場合、Range: がすでに満たされていることを前提としています。 そのまま返されます。

パラメータ

  • request

    リクエスト

    Range を含むリクエスト: できます。

  • originalResponse

    レスポンス

    回答。

戻り値

  • Promise<レスポンス>

    206 Partial Content レスポンスと、 リクエストで指定されたコンテンツのスライスに設定されたレスポンス本文 Range: ヘッダー、または 416 Range Not Satisfiable レスポンスが Range: ヘッダーの条件が満たされません。