如何缓存.mp4文件在Safari中的工作箱-webpack-插件？

Question

我在https://github.com/GoogleChrome/workbox/issues/1663上遇到了完全相同的问题，它描述了一个仅在Safari中发生的问题，在该问题中，mp4视频在被服务人员缓存后不会呈现。

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

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

编辑:遵循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(),
      ],
   }),
);  

如果忘记了前面提到的话，我还向video元素添加了crossOrigin="anonymous"属性。

Answer 1

在Workbox文档的"Serve cached audio and video“食谱中有关于这个用例的具体指导。

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

This documentation提供了在InjectManifest模式下配置workbox-webpack-plugin的指导。

Answer 2

我在Safari上遇到了同样的问题，并设法解决了这个问题，方法是将我的视频从precahe列表self.__precacheManifest中删除，并将其添加到服务人员的安装处理程序中：

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

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

查看日志，似乎只使用预缓存来响应对视频资源的请求，而不是路由器。