Я создал забавное прогрессивное веб-приложение для воспроизведения видео-треков из нашей базы данных, и у меня есть отличная кнопка загрузки треков, чтобы их можно было воспроизводить в автономном режиме. Проблема в том, что когда веб-приложение фактически отключено, кэшированная версия трека не воспроизводится.
Я перечислю шаги, как это реализовано, и если кто-то может просто посмотреть и определить ошибку,было бы удивительно.
- Используя каркас сценария создания приложения реакции или, по крайней мере, мы это делали до тех пор, пока не переключился на перереагирующее приложение-приложение (v 2.1.3)
- работник службы зарегистрирован вindex.tsx (мы используем машинопись), вызовы
serviceWorker.register(); - mp3-файлов обслуживаются через cloudfront + S3 (это не должно иметь значения) и воспроизводятся в веб-браузере с использованием простого тега видео
<video src={mp3url}></video> - кнопка загрузки в основном запускается
caches.open("my_custom_mp3_cache").then(cache => cache.add(mp3url)) - , когда веб-приложение находится в автономном режиме (с помощью флажка «Не в сети» на вкладке «работник службы» консоли), я ожидаю, что работник службы будет обслуживать дорожку из кэша. Это ошибка, в настоящее время это не так.
Прикрепленное изображение запроса на mp3, когда приложение находится в автономном режиме. он должен попадать в кеш, но не: https://i.stack.imgur.com/uSUon.png
Включенное изображение записи в кеше, с которой нужно выполнить сопоставление: https://i.stack.imgur.com/If0NC.png
При тестировании в консоли с caches.match("mp3url")он правильно возвращает кэшированный ответ.
Пожалуйста, дайте мне знать, если у кого-нибудь есть идеи. Я в замешательстве.
Несколько идей с моей стороны, почему он не использует кэшированный mp3:
- workbox Сервисный работник create-response-scripts либо не заглядывает внутрь моегопользовательский кеш, он смотрит только внутри своего workbox-precache.
- workbox работник службы create-response-scripts сопоставляет только свой список предварительно кэшированных файлов из системы сборки, и любые динамически добавляемые файлы в кеш игнорируются
- когда элемент video запрашивает mp3, он устанавливает разные заголовки запроса, когда мой код добавляет его в кэш. Предполагая, что caches.match проверяет заголовки, тогда заголовки запроса не совпадают, и это промах.