I have a service worker, if the network is down, it serves up a cached response. The HTML of the body is in response.body. I wish to alter it to add a banner to alert the user that this page is in fact not live data, but is a cached page.

Is there a way to alter the page with DOM manipulation, e.g.

const reponse = await cache.match(request);
const body = await response.text();
document = buildDocument(body); // <- !!! Imaginary desired function
const banner = document.getElementById('banner');
banner.innerHTML = "This is a cached page!";
reponse.body = document.innerHTML;
return response

At the moment I guess one might have to settle on regex/replace of text:

adjusted = body.replace('<span id="banner"></span>', '<span id="banner">This is a cached page!</span>')