Clients: openWindow()-Methode
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.
Hinweis: Dieses Feature ist nur verfügbar in Service Workers.
Die openWindow()
-Methode des Clients
-Interfaces erstellt einen neuen Top-Level-Browsing-Kontext und lädt eine gegebene URL. Wenn das aufrufende Skript keine Berechtigung hat, Popups anzuzeigen, wirft openWindow()
einen InvalidAccessError
.
In Firefox ist die Methode nur erlaubt, Popups anzuzeigen, wenn sie als Ergebnis eines Benachrichtigungsklickereignisses aufgerufen wird.
In Chrome für Android kann die Methode stattdessen die URL in einem vorhandenen Browsing-Kontext öffnen, der von einer zuvor zur Startseite des Nutzers hinzugefügten Standalone-Web-App bereitgestellt wird. Seit kurzem funktioniert dies auch in Chrome für Windows.
Syntax
openWindow(url)
Parameter
url
-
Ein String, der die URL des Clients darstellt, den Sie im Fenster öffnen möchten. Im Allgemeinen muss dieser Wert eine URL aus dem gleichen Ursprung wie das aufrufende Skript sein.
Rückgabewert
Ein Promise
, der zu einem WindowClient
-Objekt aufgelöst wird, wenn die URL aus dem gleichen Ursprung wie der Service Worker stammt, oder andernfalls einen Nullwert.
Ausnahmen
InvalidAccessError
DOMException
-
Das Versprechen wird mit dieser Ausnahme abgelehnt, wenn keines der Fenster im Ursprung der App eine flüchtige Aktivierung hat.
Sicherheitsanforderungen
- Mindestens ein Fenster im Ursprung der App muss eine flüchtige Aktivierung haben.
Beispiele
// 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));
}),
);
});
Spezifikationen
Specification |
---|
Service Workers # clients-openwindow |
Browser-Kompatibilität
BCD tables only load in the browser