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。

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)));
});

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

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

2 个答案: