ServiceWorker Notification Click - 如何刷新页面并跳转到锚链接？

Question

Basically, on my 'notificationclick' event, I am trying to open the notifications URL. It works perfectly for normal URLs. But if the URL has an anchor tag (#), it will then just try to jump to the specified anchor (which doesn't exist yet.)

I can easily cut out the anchor part of the url, and that works for the base page, it will then refresh the page successfully, but it wont jump to the comment.

So i tried doing this:

                if (cleanedClientUrl === cleanedUrl && 'focus' in client) {
                    //focus and reload the window that has this page open
                    client.focus();

                    //if the url had a # in it, first navigate to the cleaned url (otherwise it wont refresh)
                    if (url.indexOf('#'))
                        client.navigate(cleanedUrl);

                    client.navigate(url);

                    return;
                }

Which I was hoping would first redirect it to the URL without the cleanedUrl (without the anchor), and then navigate to the original url, which include the anchor, to make it jump down. But it seems the second client.navigate cancels the first one.

Is there any way to wait until the first one is loaded, or tell the page to reload even if there's an anchor specified in the URL?

Here is my full code:

//user clicked / tapped a push notification
self.addEventListener('notificationclick', function(event) {
    const clickedNotification = event.notification;
    clickedNotification.close();

    //exit if the url could not be found
    if (!event.notification.data || !event.notification.data.url) return;

    //get url from event
    var url = event.notification.data.url;
    //if the url contains a #, remove it and everything after it
    var cleanedUrl = url.indexOf('#') ? url.substring(0, url.indexOf('#')) :url;

    event.waitUntil(
        self.clients.matchAll({type: 'window', includeUncontrolled: true}).then( windowClients => {
            console.log('opening window', windowClients.length, 'windows')
            // Check if there is already a window/tab open with the target URL
            for (var i = 0; i < windowClients.length; i++) {
                var client = windowClients[i];

                //if the page url contains a #, remove it and everything after it
                var cleanedClientUrl;
                if (client.url.indexOf('#') !== -1)
                    cleanedClientUrl = client.url.substring(0, client.url.indexOf('#'));
                else cleanedClientUrl = client.url;

                // if the cleaned URLs match
                if (cleanedClientUrl === cleanedUrl && 'focus' in client) {
                    //focus and reload the window that has this page open
                    client.focus();

                    //if the url had a # in it, first navigate to the cleaned url (otherwise it wont refresh)
                    if (url.indexOf('#'))
                        client.navigate(cleanedUrl);

                    client.navigate(url);

                    return;
                }
            }
            // If not, then open the target URL in a new window/tab.
            if (self.clients.openWindow) {
                return self.clients.openWindow(url);
            }
        })
    );
});

Answer 1

Could you quickly jump to the anchor and then immediately reload the page?

main JS thread

window.location = '#my-anchor-value';
window.location.reload();

ServiceWorker

if you need to chain navigation in a SW, you'll need to await the promise completion of the first navigate()

if (url.indexOf('#')) {
  return client.navigate(cleanedUrl)
  .then(() => client.navigate(url));
} else {
  return client.navigate(url);
}