Clients: openWindow()-Methode

Syntax

openWindow(url)

Parameter

url

Ein String, der die URL des Clients darstellt, den Sie im Fenster ffnen mchten. Im Allgemeinen muss dieser Wert eine URL derselben Origin wie das aufrufende Skript sein.

Rckgabewert

Ein Promise, das zu einem WindowClient-Objekt aufgelst wird, wenn die URL dieselbe Origin wie der Service Worker hat, oder andernfalls zu einem null-Wert.

Ausnahmen

InvalidAccessError DOMException

Das Promise wird mit dieser Ausnahme abgelehnt, wenn keines der Fenster in der Origin der App ber eine transiente Aktivierung verfgt.

Sicherheitsanforderungen

• Mindestens ein Fenster in der Origin der App muss ber eine transiente Aktivierung verfgen.

Beispiele

ffnen eines Fensters bei einem Klick auf eine Benachrichtigung

In diesem Beispiel erstellt ein Service Worker eine Benachrichtigung mit einer zugeordneten URL, die innerhalb des Geltungsbereichs des Service Workers liegt, und zeigt sie anschlieend an. Wenn der Benutzer auf die Benachrichtigung klickt:

• Wenn die Seite unter der URL der Benachrichtigung bereits geffnet ist, fokussiert der Service Worker sie.
• Andernfalls ffnet der Service Worker die Seite in einem neuen Fenster.

Beachten Sie, dass die Eigenschaft Client.url nicht aktualisiert wird, sofern nicht tatschlich eine neue Seite geladen wird. Das bedeutet, dass sie nicht aktualisiert wird, wenn der Benutzer innerhalb derselben Seite mithilfe eines URL-Fragments navigiert oder wenn eine Single-Page-App (SPA) ein Navigationsereignis abfngt (beispielsweise mithilfe der Navigation API) und den Seiteninhalt mithilfe von clientseitigem Code aktualisiert. Daher ist diese Technik nicht fr SPAs geeignet.

// Create and show notification
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,
  );
}

// Handle notification click
self.addEventListener("notificationclick", (e) => {
  // Close the notification popout
  e.notification.close();
  e.waitUntil(
    // Get all the Window clients
    clients.matchAll({ type: "window" }).then((clientsArr) => {
      const windowToFocus = clientsArr.find(
        (windowClient) => windowClient.url === e.notification.data.url,
      );
      if (windowToFocus) {
        // If a Window tab matching the targeted URL already exists, focus that;
        windowToFocus.focus();
      } else {
        // Otherwise, open a new tab to the applicable URL and focus it.
        clients
          .openWindow(e.notification.data.url)
          .then((windowClient) => (windowClient ? windowClient.focus() : null));
      }
    }),
  );
});

Spezifikationen

Browser-Kompatibilitt