Clients: openWindow() method
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.
Syntax
Parameters
-
url
-
A string representing the URL of the client you want to open in the window. Generally this value must be a URL from the same origin as the calling script.
Return value
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.
Exceptions
InvalidAccessError
DOMException
-
The promise is rejected with this exception if none of the windows in the app's origin have transient activation.
Security requirements
Examples
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));
}),
);
});
Specifications
Browser compatibility
|
Desktop |
Mobile |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
WebView Android |
Chrome Android |
Firefox for Android |
Opera Android |
Safari on IOS |
Samsung Internet |
openWindow |
40["Before Chrome 43, this method could only open URLs on the same origin.", "Since Chrome 51, URLs may open inside an existing browsing context provided by a standalone web app."]
|
17 |
44 |
No |
38 |
11.1 |
40["Before Chrome 43, this method could only open URLs on the same origin.", "Since Chrome 51, URLs may open inside an existing browsing context provided by a standalone web app."]
|
40["Before Chrome 43, this method could only open URLs on the same origin.", "Since Chrome 51, URLs may open inside an existing browsing context provided by a standalone web app."]
|
44 |
41 |
11.3 |
4.0["Before Samsung Internet 4.0, this method could only open URLs on the same origin.", "Since Samsung Internet 5.0, URLs may open inside an existing browsing context provided by a standalone web app."]
|