Clients: openWindow() Methode

Syntax

openWindow(url)

Parameter

url

Ein String, der die URL des Clients darstellt, den Sie im Fenster öffnen möchten. In der Regel muss dieser Wert eine URL aus demselben Ursprungsort wie das aufrufende Skript sein.

Rückgabewert

Ein Promise, das zu einem WindowClient-Objekt aufgelöst wird, wenn die URL aus demselben Ursprung wie der Service Worker stammt, oder andernfalls ein Null-Wert.

Ausnahmen

InvalidAccessError DOMException

Das Versprechen wird mit dieser Ausnahme abgelehnt, wenn keines der Fenster im Ursprung der App vorübergehende Aktivierung hat.

Sicherheitsanforderungen

• Mindestens ein Fenster im Ursprung der App muss vorübergehende Aktivierung haben.

Beispiele

Öffnen eines Fensters bei einem Benachrichtigungsklick

In diesem Beispiel erstellt und zeigt ein Service Worker eine Benachrichtigung an, die eine zugehörige URL enthält, die unter den Geltungsbereich des Service Workers fällt. Wenn der Benutzer auf die Benachrichtigung klickt:

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

Beachten Sie, dass die Client.url Eigenschaft nicht aktualisiert wird, es sei denn, eine neue Seite wird tatsächlich geladen. Dies bedeutet, dass sie nicht aktualisiert wird, wenn der Benutzer innerhalb derselben Seite mit einem URL-Fragment navigiert oder wenn eine Single-Page-App (SPA) ein Navigationsevent abfängt (zum Beispiel mit der Navigation API) und den Seiteninhalt mit clientseitigem Code aktualisiert. Folglich ist diese Technik nicht für 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-Kompatibilität