小编daf*_*inm的帖子

背景

我创建了一个 PWA 测试项目，以了解如何使用Workbox进行音频缓存，包括使用范围请求插件进行清理/查找。

我希望应用程序预先缓存所有音频，并使该音频可以离线播放，包括擦洗/搜索。

预缓存音频可以通过以下两种方式之一完成：

1. 使用Workbox insertManifest。
2. 通过手动将音频文件添加到缓存中cache.add(URL)

但使用第一种方法 (injectManifest) 缓存的音频文件不会擦除/查找，因为 Workbox 预缓存不支持范围请求标头。因此，如果您希望能够在缓存的音频文件中进行清理/查找，则需要在音频文件的预缓存前面放置一个启用范围请求的路由器。

问题

当应用程序从本地主机提供服务时，启用了范围请求的路由器的预缓存音频将在 Chrome 和 Firefox 中正常播放和擦除/搜索，但当从 Firebase 提供服务时，则无法在 Chrome 中播放。

对于前面有范围请求路由器预缓存的所有音频文件，我看到相同的错误：

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) …