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

Question

我在 https://github.com/GoogleChrome/workbox/issues/1663 报告了完全相同的问题它描述了一个仅在 Safari 中发生的问题，其中 mp4 视频在被 Service Worker 缓存后不呈现。

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

如何设置 workbox-range-requests与 workbox-webpack-plugin ?

编辑:关注 Jeff's answer below ，我已将我的 webpack 配置调整为以下内容:

new WorkboxPlugin.InjectManifest({
   swSrc: serviceWorkerSrcPath,
   swDest: serviceWorkerBuildPath,
   importsDirectory: 'sw',
})

构建产生以下服务 worker :

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 中使用它模式，这将使您可以控制顶级服务 worker 文件。反过来，这将使遵循食谱成为可能。

This documentation有配置指南 workbox-webpack-plugin在 InjectManifest模式。