Necesito poder tomar los datos sin procesar de cualquier archivo y generar un objeto de respuesta dentro de un trabajador de servicio.

Breve explicación:

Tengo un sitio web que toma nombres de archivos, rutas, tipos MIME y texto sin procesar y los almacena en caché. Si realizo una solicitud a un archivo con esa ruta y nombre, un trabajador del servicio responde con esos datos sin procesar.

Aquí está el código de respuesta del trabajador de servicio muy básico:

 self.addEventListener("fetch", async event => event.respondWith(caches.match(event.request)) );

Este sistema funciona bien para HTML, CSS, JS y probablemente otros archivos, pero no para PNG. Sigo recibiendo la imagen no encontrada imagen:

He comprobado que se envía el tipo mime correcto y que los datos correctos se almacenan en caché. He intentado poner los datos en caché con el texto que encuentro en el bloc de notas después de abrir el PNG, y el resultado de texto de una solicitud de búsqueda en un archivo PNG real, usando el método .text() .

Aquí hay imágenes parciales de ambos:

Bloc de notas++:

Buscar:

Estos datos en las imágenes se colocan en caché con este código:

 cache.put( rawFileText, new Response( "filePath/example.html", { status: 200, headers: new Headers({ "content-type": "image/png" + "; charset=utf-8", }), }, ), );

Más información de fondo:

Esto es para un editor de código web en el que estoy trabajando. Cuando quiero ejecutar código en el editor:

1. website1 creará un iframe con website2 como fuente
2. sitio web1 publica mensajes con todos los nombres de archivo, rutas, tipos mime y texto sin procesar que contiene código, imágenes, etc. (por datos sin procesar me refiero a lo que vería si abriera el archivo con el bloc de notas)
3. luego el iframe (sitio web2) almacena los nombres de archivo y los datos como caché
4. cuando se realiza una solicitud a cualquier archivo almacenado en el caché de website2, el trabajador del servicio
5. responde con cualquier dato que esté bajo el nombre del archivo

La razón por la que uso 2 sitios web diferentes es para evitar conflictos con los archivos del sitio web del editor, el almacenamiento local y todo lo demás. Todavía podría haber un conflicto con el trabajador de servicio y caché del segundo sitio web, pero eso no es un problema en mi caso.