0

我正在为 PWA 编写一个服务工作者，它处理缓存的音频文件。我正在按照本指南正确响应涉及范围标头的提取，这是 Safari 非常特别关注的。我有以下函数（从我的fetch事件处理程序调用），它非常接近指南中建议的代码：

async function respondRangeRequest (request) {
  const response = await respondFromCacheOrFetch(request) // fetches the cached response for the resource
  const arrayBuffer = await response.arrayBuffer()
  const rangeHeader = request.headers.get('range')
  const range = /^bytes=(\d+)-(\d+)?$/.exec(rangeHeader)

  if (!range) {
    console.log(`SW: Invalid range request for ${request.url}`)
    return rangeNotSatisfiableResponse()
  }

  const rangeStart = range[1]
  const rangeEnd = range[2] || arrayBuffer.byteLength - 1

  console.log(`SW: Range request with header ${rangeHeader}`) // range header is `bytes=0-1`

  const responseBuffer = arrayBuffer.slice(rangeStart, rangeEnd + 1)
  // copy headers from the original request, except Content-Length and Content-Range which we will replace
  const responseHeaders = Array.from(response.headers.entries())
    .filter(pair => !['content-range', 'content-length'].includes(pair[0]))

  console.log(responseBuffer) // logs an arrayBuffer with byteLength of 11

  return new Response(
    responseBuffer,
    {
      status: 206,
      statusText: 'Partial Content',
      headers: [
        ...responseHeaders,
        ['Content-Length', responseBuffer.byteLength], // results in `Content-Length 11`
        ['Content-Range', `bytes ${rangeStart}-${rangeEnd}/${arrayBuffer.byteLength}`],
      ],
    }
  )
}

根据评论，当此代码记录范围标头时bytes=0-1，通过构造的响应 arrayBufferarrayBuffer.slice(rangeStart, rangeEnd + 1)的 abyteLength为 11。为什么会这样？

我的总体反应是导致 Safari（在 iOS 上）在音频项目上设置无限的持续时间，导致无法搜索。这是我注意到的唯一异常部分，所以我唯一的线索可能会出错。

当然，如果有人对我的回答可能无法让 Safari 满意的原因有其他建议，我将非常感激听到它！

4

1 回答 1

0

谢谢大家成为我的橡皮鸭。当我提出这个问题时，我回顾了指南中的代码片段，发现我忽略了将正则表达式结果转换为Number. 我将有问题的行更改为：

const rangeStart = Number(range[1])
const rangeEnd = Number(range[2]) || arrayBuffer.byteLength - 1

现在 Safari 喜欢我的回复，我可以通过缓存的音频文件进行搜索！

显然，我将 my 设置rangeEnd为 string "1"，因此rangeEnd + 1最终为"11". 我喜欢 JavaScript。

于 2020-07-22T20:21:00.270 回答