I have a task to use service worker in order to renew access token when token has been expired I'm stuck with retrying the request after getting a new token from authorization server, I get an error that I can't clone or alter the headers of the request Here is my service worker code:

script.js

if (navigator.serviceWorker) {
    console.log("ServiceWorkersSupported");

    navigator.serviceWorker.register('sw.js', {
        scope: './'
    })
        .then(function(reg) {
            console.log("Service Worker started", reg);
        })
        .catch(function(error) {
            console.log("Failed register ServiceWorker", error);
        });
}

var log = console.log.bind(console);
var error = console.error.bind(console);

if (navigator.serviceWorker) {
sendMessage('hello').then(log, error).catch(error);
}

function sendMessage(message) {
    return new Promise((resolve, reject) => {
        const messageChannel = new MessageChannel();
        messageChannel.port1.onmessage = function(event) {
            resolve(`Received a direct message from the ServiceWorker: ${event.data}`);
        };
        navigator.serviceWorker.controller.postMessage(message, [messageChannel.port2])
    });
}

sw.js

self.addEventListener('install', function(event) {
    console.log("install");
});

self.addEventListener('fetch', function(event) {
    console.log('fetching ->', event.request);
    event.respondWith(
        fetch(event.request)
        .then((resp) =>{
             if(!resp.ok && self.getAuthHeaderDetails(resp.headers) =="invalid_token"){
               console.log(" token is revoked or expired trying to fetch a new access token");
               self.renewedToken("http://localhost:8080/auth/realms/Myrealm/protocol/openid-connect/token");
               customHeaderRequestFetch(event);
              }
            return resp;
        })
        .catch((err) =>{
            console.log("something went wrong: ", err);
        })
    );
});


function customHeaderRequestFetch(event) {
  var newRequest= event.request.clone();
  newRequest.header('x-my-custom-header','The Most Amazing Header Ever');
  }



self.addEventListener('message', function(event) {
    console.log(`Received a message from main thread: ${event.data}`);
    event.ports[0].postMessage(`Roger that! - "${event.data}"`);
});


function renewedToken(url){

          let formData = new FormData();
          formData.append('grant_type', 'refresh_token');
          formData.append('refresh_token', 'John123');
          formData.append('client_id','JFW-GWT');
          const dataf = new URLSearchParams(formData);
          fetch(url, {
          method: 'post',
          body: dataf,
          headers: {
             'Content-Type': 'application/x-www-form-urlencoded',
             'Sec-Fetch-Dest': 'empty',
             },
             })
            .then( res => res.json() )
            .then( data => console.log(data) );
 }


function getAuthHeaderDetails(headers){
           if(headers.get("WWW-Authenticate") !== null){
               console.log("not OK", headers.get("WWW-Authenticate"))

                var x= headers.get("WWW-Authenticate")
                var y = x.replace(/\"/g, "");
                const table =
                 y.split(", ") //["key:value","key:value"]
                  .map(pair => pair.split("=")); //[["key","value"],["key","value"]]

                console.log(table);

                const result = {};
                table.forEach(([key,value]) => result[key] = value);

                console.log( result.error );

                return result.error;
             }
                return "";
}