How to bring chrome to foreground from a web app

Question

Is there any windows apps/google chrome flags/google chrome extension/javascript methods or any other thing that would allow to bring a chrome window from background(minimized) to foreground when something happens inside a website. I do have access to the client computer, I could set chrome flags/kiosk mode or anything that would prevent it from opening to foreground if it's possible.

For example I am trying to bring the window to foreground when an order comes in, through a notification (I'm using firebase messages). I tried to do window.open() in setBackgroundMessageHandler() in the service worker but I get an error in console saying window is not defined

If there isn't anything available for chrome to achieve this, would creating a Microsoft Progressive Web App with the appropriate permissions allow me to bring that window to foreground from a minimized state?

Answer 1

I solved it by adding this in the service worker file:

   self.addEventListener('push', function (e) {
        if (e.data) {
            var payloadData = e.data.json();
            self.clients.matchAll({includeUncontrolled: true}).then(function (clients) {
                clients[0].postMessage(payloadData); // you can do foreach but I only needed one client to open one window
            });
        }
    });

And this in the main.js file:

function openNotificationWindow(url) {
    var myWindow = window.open(url);   // Opens a new window
    myWindow.focus();
    myWindow.location.reload(true);
}

navigator.serviceWorker.addEventListener('message', function (event) {
    if (typeof event.data.data !== 'undefined') {
        openNotificationWindow(url);
    }
});

Now everytime I send a notification either with the window in foreground or in the background the push event fires in the serviceworker and then is using postMessage() to comunicate with the some main.js file where you have access to the window DOM component.