リクエストを行うときに、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,
)
Request
オブジェクトと Response
オブジェクトを入力として指定すると、新しい Response
の Promise が返されます。
元の Response
にコンテンツの一部がすでに含まれている(つまり、
(ステータスが 206)の場合、Range:
がすでに満たされていることを前提としています。
そのまま返されます。
パラメータ
-
request
リクエスト
Range を含むリクエスト: できます。
-
originalResponse
レスポンス
回答。
戻り値
-
Promise<レスポンス>
206 Partial Content
レスポンスと、 リクエストで指定されたコンテンツのスライスに設定されたレスポンス本文Range:
ヘッダー、または416 Range Not Satisfiable
レスポンスがRange:
ヘッダーの条件が満たされません。