Estoy tratando de crear un trabajador de servicio que recupere un video del caché si está disponible y lo obtenga en línea si no está disponible. Aquí está mi código para eso:
self.addEventListener("fetch", function (event) { if (event.request.headers.get("range")) { caches.match(event.request.url).then(function (res) { if (!res) { log.debug( `Range request NOT found in cache for ${event.request.url}, activating fetch...` ); return fetch(event.request); } returnRangeRequest(event); }); } else { event.respondWith( caches.match(event.request).then((response) => { return response || fetch(event.request); }) ); } }); function returnRangeRequest(event) { var rangeHeader = event.request.headers.get("range"); var rangeMatch = rangeHeader.match(/^bytes\=(\d+)\-(\d+)?/); var pos = Number(rangeMatch[1]); var pos2 = rangeMatch[2]; if (pos2) { pos2 = Number(pos2); } event.respondWith( caches .match(event.request.url) .then(function (res) { return res.arrayBuffer(); }) .then(function (ab) { let responseHeaders = { status: 206, statusText: "Partial Content", headers: [ ["Content-Type", "video/mp4"], [ "Content-Range", "bytes " + pos + "-" + (pos2 || ab.byteLength - 1) + "/" + ab.byteLength, ], ], }; var abSliced = {}; if (pos2 > 0) { abSliced = ab.slice(pos, pos2 + 1); } else { abSliced = ab.slice(pos); } log.debug( `Returning range request response` ); return new Response(abSliced, responseHeaders); }) .catch(function (err) { log.error(err); }) ); } Cuando estoy en línea e intento reproducir el video, funciona bien e imprime la línea de depuración Range request NOT found in cache for https://example.com/vid.mp4, activating fetch...
Cuando guardé en caché la URL del video usando cache.add("https://example.com/vid.mp4"); , y trato de reproducirlo, el video se reproduce bien.
El problema surge cuando apago el Wifi en el iPad. Cuando trato de reproducir el video después de apagar el wifi, el video permanece en 0:00 con una duración total de 0:00.
Algunos de mis hallazgos:
bytes=0-1 y luego bytes=0-4444000 .bytes=0-1 , pero se detiene con eso.¿Dónde me estoy equivocando?
Safari parece tener un enfoque muy estricto para las solicitudes de rango y, a veces, se ven problemas similares a su problema con los servidores web en línea regulares.
En particular, Safari espera ver una respuesta '206' cuando envía una solicitud con un rango de bytes. Si el servidor responde con una solicitud '200', parece que Safari no puede manejar esto. Algunos otros navegadores parecen estar bien con esto, por ejemplo, Chrome.
Apple proporciona información sobre cómo verificar esto:
Si no está seguro de si su servidor de medios admite solicitudes de rango de bytes, puede abrir la aplicación Terminal en OS X y usar la herramienta de línea de comandos curl para descargar un segmento corto de un archivo en el servidor:
curl --rango 0-99 http://example.com/test.mov -o /dev/null
Si la herramienta informa que descargó 100 bytes, el servidor de medios manejó correctamente la solicitud de rango de bytes. Si descarga el archivo completo, es posible que deba actualizar el servidor de medios. Para obtener más información sobre curl, consulte las páginas man de OS X.
Consulte esta respuesta para obtener más detalles y antecedentes: https://stackoverflow.com/a/32998689/334402