Service Worker: Send message to client before redirect

Question

I wish to give the client feedback before a redirect occurs, so they can store it in session storage, then when the cached page arrive from the service worker, they check session storage while the page is being rendered (not after!), and can handle the cached response accordingly.

I tried:

1. Adding a custom header to the response, but the client JavaScript can't read it for security reasons.
2. I have tried to edit the response directly. This only works for GET requests. Unfortunately when I sync a POST request, because it returns a redirect, so then it looks like a normal GET. So I need some additional way of saying, this is a GET after a sync POST, tell the user the POST was saved, its not just a normal "get the page"
3. Post Message, but slow as.
4. LocalStorage and SessionStorage is forbidden for the service worker
5. I could write to IndexedDB in the service worker, and then read from the client. But IndexedDB is such a confusing beast I really don't want to go down this route.
6. URL search parameters, redirect and url cleaning strategy became spaghetti code very quickly. The server would have to clean up URLs, and so would the service worker for the injected query args.

Is there any recommended machanism for relaying information to a client that would suite this purpose?

Side note about the post message being slow:

I currently use post message, but the problem is its really slow, and the reason I think is this:

1. Client attempts offline POST
2. Service worker serializes and stores it for when online again. In the fetch interrupt it responds with the cached response. It also calls an async postmessage to tell the client it was saved. Unfortunately if I await the postmessage, it errors out the fetch. So then one has to leave it to be async. Which means the post message happens only after the redirect
3. Client receive redirect response
4. Client redirects
5. Client paints the page
6. The cahed paged is showed
7. Only after about two seconds later it shows the 'was saved banner'

Heres some code if applicable:

Note: Orginally the code would set a value in the session storage when receiving the message (assumed it would receive the message before the redirect), and then pop it after the redirect at page render. However because the post message was coming so much later, I changed to performing the change on the page directly.

async function msgClientSyncSaved(event) {
    const data = {
        type: 'MSG_SYNC_SAVED',
    };
    const client = await getClient(event);
    client.postMessage(data);
}

// Applicable parts of runFetch:
async function runFetch(event) {
    const urlObj = new URL(event.request.url);
    if (utils.getIsMethodTx(event.request.method)) {
        // If a Sync URL
        const clonedRequest = event.request.clone();
        const response = await new strategies.NetworkOnlyStratey(log, event, cacheMutator).run();
        if (!response.isDefaultResponse && !response.isCachedResponse) {
            event.waitUntil(syncAllRequests());
            return response;
        } else {
            const [syncKey, syncValue] = settings.PWA_SYNC_POST_URL_PARAM.split("=");
            if (urlObj.searchParams.get(syncKey) === syncValue) {
                // A failed POST, that requires SYNCING
                console.log(`SW: Sync later: ${event.request.method} to ${event.request.url}`);
                event.waitUntil(storeRequest(clonedRequest)); // no need to wait for this to finish before returning response
                event.waitUntil(msgClientSyncSaved(event)); <--- HERE message client
                // After a post, return a redirect
                urlObj.searchParams.delete(syncKey);
                const redirectUrl = String(urlObj);
                // 302 means GET the redirect, 307 means POST to the redirect
                console.log('REDIRECT TO', redirectUrl)
                return Response.redirect(redirectUrl, 302);
            }
        }
    }
}


function handleFetch(event) {
    event.respondWith(runFetch(event));
}
self.addEventListener("fetch", handleFetch);

Reciever on client side:

async function handleMessage(event) {
    switch (event.data.type) {
        case 'MSG_SYNC_SAVED':
            document.body.setAttribute('data-pwa-cached-page', 'true data-tx')
            break;
    }
}
navigator.serviceWorker.addEventListener("message", handleMessage);