工作框范围请求

在发出请求时，可以设置 range 标头，以告知服务器仅返回完整请求的一部分。这对于某些文件（例如视频文件）非常有用，用户可能会更改视频的播放位置。

此模块的用途是什么？

在某些情况下，您可能希望传送缓存的文件，但浏览器设置了 range 标头。一般情况下，该标头将被忽略。

此模块将读取缓存的响应并返回指定的数据范围。

基本用法

如要使用 Workbox 范围请求，您可以将该插件添加到要针对范围请求检查的策略中。

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 函数如下所示：

  () => {...}

  • 返回

    RangeRequestsPlugin

方法

createPartialResponse()

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

如果给定一个 Request 和 Response 对象作为输入，这将返回一个针对新 Response 的 promise。

如果原始 Response 已包含部分内容（即其状态为 206），则假设它已满足 Range: 要求，并按原样返回。

参数

• request

  请求

  请求，应包含 Range: 标头。

• originalResponse

  响应

  响应。

返回

• Promise<Response>

  206 Partial Content 响应（响应正文设置为请求的 Range: 标头指定的内容切片）；如果无法满足 Range: 标头的条件，则为 416 Range Not Satisfiable 响应。