如何使用workbox webpack插件在Safari中缓存.mp4文件？

我报告了完全相同的问题，其中描述了Safari中特有的一个问题，其中mp4视频在被服务人员缓存后不会呈现

我使用的是

workbox网页包插件

，因此评论中提供的说明在我的案例中不起作用。我无法在我的webpack配置文件中要求

workbox范围请求

插件并将其传递给运行时缓存选项，因为我认为此包仅用于浏览器。我的workbox配置正在预缓存.mp4资产，并使用网络优先策略进行运行时缓存

如何使用

workbox网页包插件设置
workbox范围请求

编辑：以下，我已将我的网页配置调整为以下内容：

newworkboxplugin.InjectManifest({
swSrc:serviceWorkerSrcPath，
swDest:serviceWorkerBuildPath，
importsDirectory:'sw'，
})

生成生成以下服务工作程序：

importScripts（“/_build/sw/precache manifest.8a0be820b796b153c97ba206d9753bdb.js”https://storage.googleapis.com/workbox-cdn/releases/3.6.2/workbox-sw.js");
工作箱、预加工、预加工和切割（自加工、预加工[]）；
workbox.routing.registerRoute(
/.\.mp4/，
新的workbox.strategies.CacheFirst({
cacheName:“视频”，
插件：[
新的workbox.cacheableResponse.Plugin（{statuses:[200]}），
新建workbox.rangeRequests.Plugin（），
],
}),
);  

如果之前忘记提到，我还为
video
元素添加了
crossOrigin=“anonymous”
属性。
在Workbox文档中的“”配方中有关于此用例的具体指导

您可以继续使用
workbox webpack插件
，但我建议您在
InjectManifest
模式下使用它，这样您就可以控制顶级服务工作者文件。这将反过来使遵循食谱成为可能

有关于在
InjectManifest
模式下配置
workbox webpack插件的指南。
我在Safari中遇到了同样的问题，并通过将我的视频从Preche列表
self中删除来解决它。u Prechemanifest
而是将其添加到服务人员的安装处理程序中：

self.addEventListener('install', (event) => {

        const urls = [/* videoUrl */];
        const cacheName = 'videos';
        event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(urls)));
});

查看日志，似乎只有precache用于响应视频资源请求，而不是路由器。
谢谢，杰夫。我已经用更新的网页配置编辑了我的问题。我确实使用了
GenerateSW
而不是
InjectManifest
插件。然而，提议的配方仍然不起作用。当我使用干净的缓存打开页面时，视频将被渲染，但在重新加载时，它们将不再被渲染。服务工作人员的响应状态为200，而不是206。这意味着
workbox范围请求
未生效。如果您不介意在Workbox问题跟踪器中提供更多详细信息（例如指向您的live web应用程序的链接），那么此时在Workbox问题跟踪器中进行后续操作可能会更干净。您使用哪个URL作为视频URL？我的build/static文件夹中提供了本地视频，我不知道如何引用它们，有什么建议吗？我使用了预缓存，所以预缓存清单生成的视频：你解决过这个问题吗？我也有同样的问题。即使使用范围请求插件，仍然无法使其工作。@PhilippJahoda很抱歉回复太晚。我最终实现了我自己的解决方案，作为当时的一种变通方法。我没有机会去Workbox，但现在已经过去了将近两年，这个问题可能已经解决了。