Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

148
Vistas
Generate HTTP response from raw file data in JavaScript

I need to be able to take the raw data from any file and generate a response object within a service worker.

Short explanation:

I have a website that takes file names, paths, mime types and raw text and stores it in cache. If I make a request to a file with that path and name, a service worker responds with that raw data.

Here is the very basic service worker response code:

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

This system works fine for HTML, CSS, JS and probably other files, but not for PNGs. I keep getting the image not found image:

enter image description here

I have checked that the correct mime type is being sent and the correct data is stored in cache. I have tried putting the data in cache with the text I find in notepad after opening the PNG, and the text result of a fetch request to an actual PNG file, using the .text() method.

Here are partial images of both:

Notepad++:

enter image desstrong textcription here

Fetch:

enter image description here

This data in the images is put into cache with this code:

cache.put(
    rawFileText,

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

More background info:

This is for a web code editor I am working on. When I want to run code in the editor:

  1. website1 will create an iframe with website2 as source
  2. website1 post messages all the file names, paths, mime types and raw text containing code, images, etc. (by raw data I mean whatever you would see if you opened the file with notepad)
  3. then the iframe (website2) stores the file names and data as cache
  4. when a request is made to any file stored in website2's cache, the service worker
  5. responds with whatever data is under the file name

The reason I use 2 different websites is to avoid conflicts with the editor website's files, local storage, and everything else. There could still be conflict with the second website's cache and service worker but that isn't a problem in my case.

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda