Загрузка не удалась: ПОЛУЧИТЕ "URL-адрес видео". в ngsw-worker.js:2607

Question

У нас есть угловое 6 универсальное приложение с видео на моем сайте, я получаю ошибку ниже, когда нажимаю кнопку воспроизведения,

   ngsw-worker.js:2607 Fetch failed loading: GET "https://storage.googleapis.com/web-assets/videos/event/WCCICC2017/Interviews/Rama%20Mona/Rama%20Mona-360p.mp4".

но через некоторое время загрузка и воспроизведение видео, но для его воспроизведения требуется больше времени. когда я удаляю ngsw-worker.js, видео загружается быстро и играет.

через некоторое время загрузка и воспроизведение видео

Fetch finished loading: GET "https://storage.googleapis.com/web-assets/videos/event/WCCICC2017/Interviews/Rama%20Mona/Rama%20Mona-360p.mp4".

Answer 1

Реализация выборки в каждом главном браузере, который использует работник службы angular, неправильно обрабатывает запросы на частичный контент, который необходим для быстрого воспроизведения видео. Ссылка на эту ошибку, открытую с помощью Mozilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1477391

Обходной путь здесь заключается в том, чтобы отредактировать сгенерированный сервисный работник (ngsw-worker.js), чтобы он не направлял определенные запросы через API выборки. В Angular есть запрос на открытую функцию, чтобы обеспечить эту возможность без переписывания файла, но в настоящее время его нет в дорожной карте.

откройте ngsw-worker.js и найдите класс Driver и измените его функцию onFetch, добавив что-то вроде этого вверху:

let re =/\.mp4$/; //write whatever regex is appropriate for your case
if (re.test(req.url)) {
  event.waitUntil(this.idle.trigger());
  return;
}

Таким образом, работник сервиса будет передавать все запросы, соответствующие вашему регулярному выражению, обратно в браузер, чтобы обрабатывать их в исходном режиме, а не через API выборки.

Чтобы убедиться, что он не перезаписывается и вам не нужно делать это каждый раз, когда вы собираете / развертываете, вы должны сохранить отредактированный сервисный работник как что-то вроде ngsw-worker-mod.js и зарегистрировать его как ваш работник в app.module, например:

ServiceWorkerModule.register('./ngsw-worker-mod.js', {enabled: environment.production})

и обязательно включите его в ваш angular-cli.json в качестве ресурса, чтобы он был включен в ваши результаты сборки.