Reactjs 如何使用create react脚本在渐进式Web应用程序中播放脱机视频

我创建了一个有趣的渐进式网络应用程序来播放我们数据库中的视频曲目，并且在曲目上有一个漂亮的下载按钮，这样就可以离线播放。问题是，当webapp实际上处于脱机状态时，缓存版本的曲目无法播放

我将列出它是如何实现的步骤，如果有人能看一看并发现错误，那将是惊人的

• 使用CreateReact应用程序脚本框架，或者至少在切换到react应用程序重新布线（v2.1.3）之前，我们使用了该框架
• 服务工作者在index.tsx中注册（我们使用的是typescript），调用

  serviceWorker.register（）

• MP3通过cloudfront+S3提供（这不重要），并使用简单的视频标签在webbrowser中播放
• 下载按钮基本上运行缓存。打开（“我的自定义mp3缓存”）。然后（缓存=>cache.add（mp3url））
• 当webapp离线时（通过控制台“service worker”选项卡中的“offline”复选框），我希望service worker从缓存中提供跟踪服务。这是一个bug，目前没有

应用程序脱机时请求mp3的附加图片。它应该命中缓存，但不会：

缓存中应命中/匹配的项的包含图片：

使用

caches.match（“mp3url”）

在控制台中测试时，它会正确返回缓存的响应

如果有人有任何想法，请告诉我。我被难住了

关于为什么不使用缓存的mp3，我几乎没有什么想法：

• workbox create react scripts service worker要么不查看自定义缓存，要么只查看其workbox缓存
• workbox create react scripts service worker仅与生成系统中的预缓存文件列表匹配，并且忽略任何动态添加到缓存中的文件
• 当video元素请求mp3时，它会在my code将其添加到缓存时设置不同的请求头。假设caches.match检查头，则请求头不匹配，这是一个未命中