Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

147
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!