从Firebase提供服务时，带有范围请求路由器的Workbox预缓存音频无法在Chrome中播放 [英] Workbox pre-cached audio with range requests router fails to play in Chrome when served from Firebase
问题描述
我创建了一个PWA测试项目，以了解如何使用 Workbox ， 包括使用范围请求插件进行擦洗/搜索.
I have created a PWA test project to find out how to get audio caching working with Workbox, including scrub/seek using the range requests plugin.
我希望该应用程序预缓存所有音频，并希望该音频可以脱机播放，包括擦洗/搜索.
I want the app to precache all audio and for this audio to be playable offline, including scrub/seek.
可以通过以下两种方式之一对音频进行预缓存:
Pre-caching the audio can be done in one of two ways:
- 使用 Workbox injectManifest . >
- 通过使用
cache.add(URL)手动将音频文件添加到缓存中
- Using Workbox injectManifest.
- By manually adding audio files to a cache using
cache.add(URL)
但是使用第一种方法(injectManifest)缓存的音频文件将不会清理/搜索，因为Workbox的预缓存不会 支持范围请求标头.因此，您需要将启用了范围请求的路由器放在 如果您希望能够在缓存的音频文件中浏览/查找，则可以对音频文件进行预缓存.
But audio files cached with the first method (injectManifest) will not scrub/seek because the Workbox pre-cache does not support range request headers. So you need to put a range request enabled router in front of the pre-cache for audio files if you want to be able to scrub through/seek within a cached audio file.
启用了范围请求的路由器的预缓存音频将在投放应用后在Chrome和Firefox中正常播放和滑动/搜索 从本地主机访问，但从Firebase提供服务时无法在Chrome中播放.
Pre-cached audio with a range requests enabled router will play and scrub/seek fine in Chrome and Firefox when app is served from localhost but fails to play in Chrome when served from Firebase.
对于所有预先缓存有范围请求路由器的音频文件，我都看到相同的错误:
I see the same error for all audio files that are pre-cached with a range requests router in front of them:
Router is responding to: /media/audio/auto-pre-cached.mp3
Using CacheOnly to respond to '/media/audio/auto-pre-cached.mp3'
No response found in the 'act-auto-pre-cache-wbv4.3.1-actv0.0.1' cache.
The FetchEvent for "https://daffinm-test.firebaseapp.com/media/audio/auto-pre-cached.mp3" resulted in a network error response: the promise was rejected.
CacheOnly.mjs:115 Uncaught (in promise) no-response: The strategy could not generate a response for 'https://daffinm-test.firebaseapp.com/media/audio/auto-pre-cached.mp3'.
at CacheOnly.makeRequest (https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-strategies.dev.js:343:15)
Chrome版本尝试过:
Chrome versions tried:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36
文件存在于Workbox缓存中.我可以在locahost和Firebase之间看到的唯一区别是在缓存的响应标头中:
The files are present in the Workbox caches. The only difference I can see between locahost and Firebase is in the cached response headers:
本地主机
cache-control: max-age=3600
content-length: 3770956
content-type: audio/mpeg; charset=utf-8
Date: Mon, 07 Oct 2019 09:37:03 GMT
etag: "12456134-3770956-"2019-09-29T20:05:00.314Z""
last-modified: Sun, 29 Sep 2019 20:05:00 GMT
server: ecstatic-2.2.2
Firebase
accept-ranges: bytes
cache-control: max-age=3600
content-encoding: gzip
content-length: 3686565
content-type: audio/mpeg
date: Mon, 07 Oct 2019 11:47:43 GMT
etag: 267d9ec42517198c01e2cad893f1b14662a2d91904bc517aeda244c30358457c
last-modified: Mon, 07 Oct 2019 03:48:25 PDT
status: 200
strict-transport-security: max-age=31556926; includeSubDomains; preload
vary: x-fh-requested-host, accept-encoding
x-cache: MISS
x-cache-hits: 0
x-served-by: cache-lhr7363-LHR
x-timer: S1570448862.315027,VS0,VE1472
在这两种情况下，Firefox都可以正常工作.
Firefox works fine in both cases.
Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:69.0) Gecko/20100101 Firefox/69.0
代码
您可以在此处找到测试应用的代码，包括测试设置，期望和结果的完整说明:
Code
You can find the code for the test app here including a full description of the test setup, expectations and results:
https://github.com/daffinm/audio-cache-test
如果您想看一下，该应用程序当前已部署在Firebase上:
And the app is currently deployed on Firebase here if you want to take a look:
https://daffinm-test.firebaseapp.com/
有人知道这是怎么回事，为什么带范围请求路由器的预缓存音频无法在Chrome中播放?这是Chrome错误和/或Workbox配置错误和/或Firebase配置问题-还是完全不同? (我已经联系了Firebase支持，他们非常有帮助，但是目前无法启发我.)
Does anyone have any idea what's going on here and why the pre-cached audio with range request routers are failing to play in Chrome? Is this a Chrome bug and/or a Workbox mis-configuration and/or a Firebase configuration issue - or something completely different? (I have contacted Firebase support and they are being very helpful but are currently unable to enlighten me).
推荐答案
支持此操作，您可以在创建策略时通过 matchOptions参数
The presence of the Vary header in the Firebase responses sounds like the culprit. By default, the Cache Storage API will use the Vary header when determining whether or not there's a cache match. You can override this default behavior by passing in {ignoreVary: true} when querying the Cache Storage API. Workbox supports this as an option you can provide when creating your strategy, via the matchOptions parameter.
您似乎是已经传递了ignoreSearch: true ，因此您只需在其旁边添加ignoreVary: true.
这篇关于从Firebase提供服务时，带有范围请求路由器的Workbox预缓存音频无法在Chrome中播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
