Предварительно кэшированное в рабочей области аудио с запросами диапазона маршрутизатор не может воспроизводиться в Chrome при обслуживании из Firebase - PullRequest
1 голос
/ 07 октября 2019

Справочная информация

Я создал тестовый проект PWA, чтобы узнать, как настроить кеширование звука при работе с Workbox , в том числе выполнять очистку / поиск с помощью плагина range request .

Я хочу, чтобы приложение предварительно кэшировало все аудио, и чтобы это аудио можно было воспроизводить в автономном режиме, включая очистку / поиск.

Предварительное кэширование аудио можно выполнить одним из двух способов:

  1. Использование Workbox injectManifest .
  2. Ручное добавление аудиофайлов в кэш с использованием cache.add(URL)

Но аудиофайлы кэшируются спервый метод (injectManifest) не будет очищать / искать, потому что предварительный кеш Workbox не поддерживает заголовки запроса диапазона. Поэтому вам необходимо поместить маршрутизатор с поддержкой запроса диапазона перед предварительным кэшированием для аудиофайлов, если вы хотите иметь возможность просматривать / искать в кэшированном аудиофайле.

Проблема

Предварительно кэшированное аудио с маршрутизатором, поддерживающим запросы диапазона, будет нормально воспроизводить и чистить / искать в Chrome и Firefox, когда приложение обслуживается с локального хоста, но не воспроизводится в Chrome при обслуживании из Firebase.

Я вижу ту же ошибку для всех аудиофайлов, которые предварительно кэшируются маршрутизатором запросов диапазона перед ними:

Router is responding to: /media/audio/auto-pre-cached.mp3
Using CacheOnly to respond to '/media/audio/auto-pre-cached.mp3'
    No response found in the 'act-auto-pre-cache-wbv4.3.1-actv0.0.1' cache.
    The FetchEvent for "https://daffinm-test.firebaseapp.com/media/audio/auto-pre-cached.mp3" resulted in a network error response: the promise was rejected.
    CacheOnly.mjs:115 Uncaught (in promise) no-response: The strategy could not generate a response for 'https://daffinm-test.firebaseapp.com/media/audio/auto-pre-cached.mp3'.
        at CacheOnly.makeRequest (https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-strategies.dev.js:343:15)

Попробованы версии Chrome:

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36

Файлы присутствуют в кэшах Workbox. Единственное отличие, которое я вижу между locahost и Firebase, заключается в кешированных заголовках ответов:

Localhost

cache-control: max-age=3600
content-length: 3770956
content-type: audio/mpeg; charset=utf-8
Date: Mon, 07 Oct 2019 09:37:03 GMT
etag: "12456134-3770956-"2019-09-29T20:05:00.314Z""
last-modified: Sun, 29 Sep 2019 20:05:00 GMT
server: ecstatic-2.2.2

Firebase

accept-ranges: bytes
cache-control: max-age=3600
content-encoding: gzip
content-length: 3686565
content-type: audio/mpeg
date: Mon, 07 Oct 2019 11:47:43 GMT
etag: 267d9ec42517198c01e2cad893f1b14662a2d91904bc517aeda244c30358457c
last-modified: Mon, 07 Oct 2019 03:48:25 PDT
status: 200
strict-transport-security: max-age=31556926; includeSubDomains; preload
vary: x-fh-requested-host, accept-encoding
x-cache: MISS
x-cache-hits: 0
x-served-by: cache-lhr7363-LHR
x-timer: S1570448862.315027,VS0,VE1472

Firefox отлично работает в обоих случаях.

Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:69.0) Gecko/20100101 Firefox/69.0

Код

Здесь вы можете найти код для тестового приложения, включая полное описание настроек теста, ожиданий и результатов. :

https://github.com/daffinm/audio-cache-test

И приложение в настоящее время развернуто на Firebase здесь, если вы хотите посмотреть:

https://daffinm -test.firebaseapp. com /

Вопрос

Кто-нибудь знает, что здесь происходит и почему не удается воспроизвести предварительно кэшированное аудио с маршрутизаторами запроса диапазона в Chrome? Это ошибка Chrome и / или неверная конфигурация Workbox и / или проблема конфигурации Firebase - или что-то совершенно другое? (Я связался со службой поддержки Firebase, и они очень помогают, но в настоящее время не могут меня просветить).

1 Ответ

3 голосов
/ 07 октября 2019

Наличие заголовка Vary в ответах Firebase звучит как преступник. По умолчанию API хранилища кэша будет использовать заголовок Vary при определении соответствия кеша. Вы можете переопределить это поведение по умолчанию, передав {ignoreVary: true} при запросе Cache Storage API. Workbox поддерживает этот как параметр, который вы можете предоставить при создании своей стратегии с помощью параметра matchOptions .

Похоже, вы уже проходитев ignoreSearch: true, так что вы можете просто добавить ignoreVary: true вместе с этим.

...