Внешние ресурсы не загружаются при установке моего PWA (проблемы с работником службы?)

Question

Я сделал это PWA в dorothyophals.com и работает как шарм! Но когда я устанавливаю его на мой iPhone или iPad, происходит загрузка видео с uploads.dorothyophals.com, и он не работает. он работает из браузера, хотя, если вы хотите проверить его.

Другая проблема, которую я вижу, состоит в том, что проигрыватель показывает время воспроизведения песни в верхней части страницы. Но когда я играю песню на установленном pwa, он показывает только NAN: NAN

Я что-то упустил? Может ли кто-нибудь помочь мне с этим работником службы или в чем может быть проблема?

Answer 1

Воспроизведение аудио / видео контента в Интернете обычно включает запрос Range: и частичный ответ. Это может быть проблематично c внутри сервисного работника, если вы не готовы его обработать.

Предполагая, что вы не планируете кэшировать свои медиа-файлы и хотите получить ответ чтобы прийти напрямую из сети, я бы рекомендовал изменить обработчик fetch вашего сервисного работника, чтобы он не вызывал respondWith(), когда связанный запрос имеет заголовок Range:.

self.addEventListener("fetch", function(event) {
  if (event.request.headers.has('Range')) {
    // Returning, without calling event.respondWith(),
    // will cause the browser to handle the request as
    // if there were no service worker involvement.
    return;
  }

  event.respondWith(
    caches.match(event.request).then(function(response) {
      if (response) {
        return response;
      }
      return fetch(event.request);
    })
  );
});