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

Question

我在https://github.com/GoogleChrome/workbox/issues/1663报告了完全相同的问题，该问题描述了仅在Safari中发生的问题，其中mp4视频在被服务工作者缓存后不会呈现。

我正在使用workbox-webpack-plugin，所以评论https://github.com/GoogleChrome/workbox/issues/1663#issuecomment-448755945中提供的说明在我的情况下不起作用。我无法在我的webpack配置文件中要求workbox-range-requests插件并将其传递给运行时缓存选项，因为我认为此软件包仅供浏览器使用。我的工作箱配置正在预先缓存.mp4资产，并使用网络优先策略进行运行时缓存。

如何用workbox-range-requests设置workbox-webpack-plugin？

编辑：在Jeff's answer below之后，我已将我的webpack配置调整为以下内容：

new WorkboxPlugin.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.precaching.precacheAndRoute(self.__precacheManifest || []);

workbox.routing.registerRoute(
   /.*\.mp4/,
   new workbox.strategies.CacheFirst({
      cacheName: 'videos',
      plugins: [
         new workbox.cacheableResponse.Plugin({ statuses: [200] }),
         new workbox.rangeRequests.Plugin(),
      ],
   }),
);  

如果以前忘记提及，但我也将crossOrigin="anonymous"属性添加到video元素。

Answer 1

在Workbox文档中的“Serve cached audio and video”配方中有针对此用例的具体指导。

您可以继续使用workbox-webpack-plugin，但我建议在InjectManifest模式下使用它，这将使您可以控制顶级服务工作文件。这反过来又可以遵循配方。

This documentation有关于在workbox-webpack-plugin模式下配置InjectManifest的指导。