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
self.clients.openWindow(url).then(function(windowClient) { // Do something with your WindowClient });
Parameters
url
- A
USVString
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 aWindowClient
object if the URL is from the same origin as the service worker or a null value otherwise.
Examples
// Send notification to OS if applicable if (self.Notification.permission === 'granted') { const notificationObject = { body: 'Click here to view your messages.', data: { url: self.location.origin + '/some/path' }, // data: { url: 'http://example.com' }, }; self.registration.showNotification('You\'ve got messages!', notificationObject); } // Notification click event listener self.addEventListener('notificationclick', e => { // Close the notification popout e.notification.close(); // Get all the Window clients e.waitUntil(clients.matchAll({ type: 'window' }).then(clientsArr => { // If a Window tab matching the targeted URL already exists, focus that; const hadWindowToFocus = clientsArr.some(windowClient => windowClient.url === e.notification.data.url ? (windowClient.focus(), true) : false); // Otherwise, open a new tab to the applicable URL and focus it. if (!hadWindowToFocus) clients.openWindow(e.notification.data.url).then(windowClient => windowClient ? windowClient.focus() : null); })); });
Specifications
Specification | Status | Comment |
---|---|---|
Service Workers The definition of 'Clients: openWindow' in that specification. |
Working Draft | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
openWindow | Chrome
Full support
40
| Edge
Full support
≤79
| Firefox
Full support
45
| IE No support No | Opera Full support 38 | Safari No support No | WebView Android
Full support
40
| Chrome Android
Full support
40
| Firefox Android Full support 45 | Opera Android Full support 41 | Safari iOS No support No | Samsung Internet Android
Full support
4.0
|
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- See implementation notes.