The openWindow()
method of the Clients
interface creates a new top level browsing context and loads a given URL. If the calling script doesn't have permission to show popups, openWindow()
will throw an InvalidAccessError
.
In Firefox, the method is allowed to show popups only when called as the result of a notification click event.
In Chrome for Android, the method may instead open the URL in an existing browsing context provided by a standalone web app previously added to the user's home screen. As of recently, this also works on Chrome for Windows.
A Promise
that resolves to a WindowClient
object if the URL is from the same origin as the service worker or a null value otherwise.
if (self.Notification.permission === "granted") {
const notificationObject = {
body: "Click here to view your messages.",
data: { url: `${self.location.origin}/some/path` },
};
self.registration.showNotification(
"You've got messages!",
notificationObject,
);
}
self.addEventListener("notificationclick", (e) => {
e.notification.close();
e.waitUntil(
clients.matchAll({ type: "window" }).then((clientsArr) => {
const hadWindowToFocus = clientsArr.some((windowClient) =>
windowClient.url === e.notification.data.url
? (windowClient.focus(), true)
: false,
);
if (!hadWindowToFocus)
clients
.openWindow(e.notification.data.url)
.then((windowClient) => (windowClient ? windowClient.focus() : null));
}),
);
});