Как кэшировать файлы .mp4 в Safari с помощью workbox-webpack-plugin? - PullRequest
Новая
       52

Как кэшировать файлы .mp4 в Safari с помощью workbox-webpack-plugin?

1 голос
/ 05 марта 2019

У меня точно такая же проблема, о которой сообщалось в https://github.com/GoogleChrome/workbox/issues/1663, которая описывает проблему, возникающую исключительно в Safari, где видео mp4 не воспроизводятся после кэширования работником сервиса.

I 'м, используя workbox-webpack-plugin, поэтому инструкции, приведенные в комментарии https://github.com/GoogleChrome/workbox/issues/1663#issuecomment-448755945, не будут работать в моем случае.Я не могу требовать плагин workbox-range-requests в своем конфигурационном файле веб-пакета и передавать его в параметры кэширования во время выполнения, потому что я считаю, что этот пакет предназначен только для использования браузером.Моя рабочая конфигурация предварительно кэширует активы .mp4 и использует первую сетевую стратегию для кэширования во время выполнения.

Как настроить workbox-range-requests с помощью workbox-webpack-plugin?

РЕДАКТИРОВАТЬ: следуя ответ Джеффаниже , я настроил свою конфигурацию 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.

1 Ответ

0 голосов
/ 06 марта 2019

В этом сценарии использования есть конкретное руководство для рецепта " Служба кэшированных аудио и видео " в документации Workbox.

Вы можете продолжать использовать workbox-webpack-plugin, но я быпредложите использовать его в режиме InjectManifest, который даст вам контроль над рабочим файлом верхнего уровня.Это, в свою очередь, позволит следовать рецепту.

Эта документация содержит руководство по настройке workbox-webpack-plugin в режиме InjectManifest.

...