无法播放来自Service Worker的缓存的音频

Question

摘要：无法通过Service Worker 缓存和使用缓存的音频。

---

尝试：使用Service Worker和缓存API缓存相对较小的音频文件（2-3mb）。这些是通过HTML Audio元素加载/播放的，该元素通常设置一个“范围”标头。

问题：服务人员响应整个内容，忽略范围标头，而Audio元素忽略内容并且不播放。

没有服务人员：服务器遵循范围标头，发送部分内容，Audio元素满意并播放音频。

我正在使用Google Chrome 52。

注意：解决方案似乎已被提示“来自完整缓存条目的服务范围请求”指出，但是是否有任何浏览器实现了此目的？或者，有什么解决方法吗？

---

技术信息

Chrome终端机stderr： [1:1:0603/164806:ERROR:render_media_log.cc(23)] MediaEvent: PIPELINE_ERROR demuxer: could not open

Chrome控制台错误： Uncaught (in promise) DOMException: The element has no supported sources.

Chrome标头（含SW，2个部分）：

PART#1

GENERAL
Request URL:http://localhost:3333/audio.m4a
Request Method:GET
Status Code:200 OK (from ServiceWorker)
Remote Address:127.0.0.1:3333

RESPONSE
accept-ranges:bytes
connection:keep-alive
content-length:2449048
content-type:audio/x-m4a
date:Fri, 03 Jun 2016 10:14:02 GMT
etag:"56f8f953-255e98"
last-modified:Mon, 28 Mar 2016 09:28:51 GMT
server:nginx
x-content-type-options:nosniff
x-frame-options:SAMEORIGIN
x-xss-protection:1; mode=block

REQUEST
Provisional headers are shown
Accept-Encoding:identity;q=1, *;q=0
Range:bytes=0-
Referer:http://localhost:3333/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.10 Safari/537.36

PART #2

GENERAL
Request URL:http://localhost:3333/audio.m4a
Request Method:GET
Status Code:200 OK (from ServiceWorker)
Remote Address:127.0.0.1:3333

RESPONSE
accept-ranges:bytes
connection:keep-alive
content-length:2449048
content-type:audio/x-m4a
date:Fri, 03 Jun 2016 10:14:02 GMT
etag:"56f8f953-255e98"
last-modified:Mon, 28 Mar 2016 09:28:51 GMT
server:nginx
x-content-type-options:nosniff
x-frame-options:SAMEORIGIN
x-xss-protection:1; mode=block

REQUEST
Provisional headers are shown
Accept-Encoding:identity;q=1, *;q=0
Range:bytes=2392064-
Referer:http://localhost:3333/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.10 Safari/537.36

Chrome标头（不包含软件，共3个部分！）

PART #1

GENERAL
Request URL:http://localhost:3333/audio.m4a
Request Method:GET
Status Code:206 Partial Content
Remote Address:127.0.0.1:3333

RESPONSE
Connection:keep-alive
Content-Length:2449048
Content-Range:bytes 0-2449047/2449048
Content-Type:audio/x-m4a
Date:Fri, 03 Jun 2016 10:24:32 GMT
ETag:"56f8f953-255e98"
Last-Modified:Mon, 28 Mar 2016 09:28:51 GMT
Server:nginx
X-Content-Type-Options:nosniff
X-Frame-Options:SAMEORIGIN
X-XSS-Protection:1; mode=block

REQUEST
Accept:*/*
Accept-Encoding:identity;q=1, *;q=0
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6
Connection:keep-alive
Host:localhost:3333
Range:bytes=0-
Referer:http://localhost:3333/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.10 Safari/537.36

PART #2

GENERAL
Request URL:http://localhost:3333/audio.m4a
Request Method:GET
Status Code:206 Partial Content
Remote Address:127.0.0.1:3333

RESPONSE
Connection:keep-alive
Content-Length:56984
Content-Range:bytes 2392064-2449047/2449048
Content-Type:audio/x-m4a
Date:Fri, 03 Jun 2016 10:24:32 GMT
ETag:"56f8f953-255e98"
Last-Modified:Mon, 28 Mar 2016 09:28:51 GMT
Server:nginx
X-Content-Type-Options:nosniff
X-Frame-Options:SAMEORIGIN
X-XSS-Protection:1; mode=block

REQUEST
Accept:*/*
Accept-Encoding:identity;q=1, *;q=0
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6
Connection:keep-alive
Host:localhost:3333
If-Range:"56f8f953-255e98"
Range:bytes=2392064-2449047
Referer:http://localhost:3333/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.10 Safari/537.36


PART #3

GENERAL
Request URL:http://localhost:3333/audio.m4a
Request Method:GET
Status Code:206 Partial Content
Remote Address:127.0.0.1:3333

RESPONSE
Content-Length:2121368
Content-Range:bytes 327680-2449047/2449048
Content-Type:audio/x-m4a
Date:Fri, 03 Jun 2016 10:24:32 GMT
ETag:"56f8f953-255e98"
Last-Modified:Mon, 28 Mar 2016 09:28:51 GMT
Server:nginx
X-Content-Type-Options:nosniff
X-Frame-Options:SAMEORIGIN
X-XSS-Protection:1; mode=block

REQUEST
Provisional headers are shown
Accept-Encoding:identity;q=1, *;q=0
Range:bytes=327680-
Referer:http://localhost:3333/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.10 Safari/537.36

Answer 1

请查看https://samdutton.github.io/samples/service-worker/prefetch-video/，它可以通过手动创建远程响应来解决此问题。

要解决此问题，必须先弄清楚浏览器在这里应该做什么，并在需要时更新服务人员规范。