How to render HTML content in the service worker and deliver it to a requested URL20.12.24

##  In this example, I try to show how to render HTML content in the service worker and deliver it to a requested URL.
* if the requested URL ends with exchange_frame.html it will render
* the other URL requests will render the default cached files.
* if no files exist, it will return the cached offline.html file 
* for exchange_frame.html it will request data from an API exchange server 
* it will wait until it receives the data and adds it to a new rendered HTML
* the Service Worker will then deliver this new HTML file to the browser output.

```javascript
self.addEventListener('fetch', (e) => {
    //console.log("..intercept fetch from the sw.js");                                                                                                                                                                                                                                               
    self.console.log(e.request.url);

if(e.request.url.endsWith("exchange_frame.html") && e.request.mode === 'navigate') {
     //console.log(e.request.url);                                                                                                                                
     e.respondWith(async function () {
       let d = await aget_api("https://www.floatrates.com/daily/usd.json");
         const response = new Response("<h1>Exchange Render Page!</h1><div>"+ JSON.stringify(d) + "</div>",
         {
             headers: {'Content-Type': 'text/html'}
         }
         );
        return response;
      }());
    }
    else {
    e.respondWith(
      caches.match(e.request).then((response) => {
        return response || fetch(e.request).catch(() => {
          return caches.match('/offline.html');
      });
      })

);
    }
});

//helper function to fetch ajax data via url
async function aget_api(url)
{
  //console.log("...try to get data");                                                                                                                            
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`Response status: ${response.status}`);
    }
    const json = await response.json();
    //console.log("...got data");                                                                                                                                 
    return json
  } catch (error) {
      //console.error(error.message);                                                                                                                             
      return error;
  }

}

```

https://stackoverflow.com/questions/38230658/creating-a-html-response-using-a-string-inside-a-service-workers-fetch-event

Anonymous

How to render HTML content in the service worker and deliver it to a requested URL20.12.24

Information Epoch 1734799379