Notification.navigate — Eigenschaft · JavaScript-Referenz

Signatur

get Notification.prototype.navigate

Beschreibung

Die Eigenschaft navigate einer Notification-Instanz gibt die URL zurück, die beim Erzeugen über die Option navigate gesetzt wurde. Aktiviert der Benutzer die Benachrichtigung, öffnet der Browser diese URL selbst. Dafür braucht es keinen notificationclick-Handler im Service Worker.

Die Eigenschaft gehört zum Vorschlag Declarative Web Push. Dabei beschreibt der Server eine Push-Nachricht vollständig als JSON mit Titel, Text und Ziel-URL. Der Browser kann die Benachrichtigung dann anzeigen, ohne Skript auszuführen. Das ist sparsamer, datenschutzfreundlicher und funktioniert auch dann, wenn der Service Worker gerade nicht läuft oder entfernt wurde.

Relative URLs werden beim Erzeugen gegen die Basis-URL des Dokuments bzw. Service Workers aufgelöst. Die Eigenschaft liefert also immer die vollständige, serialisierte URL. Wurde keine navigate-Option übergeben, ist der Wert null. In diesem Fall gilt das klassische Verhalten: Klicks werden über click bzw. notificationclick behandelt.

Rückgabewert

Typ

string | null

Beschreibung

Die absolute URL, zu der beim Aktivieren navigiert wird, oder null, wenn keine Ziel-URL festgelegt wurde.

Beispiele

Benachrichtigung mit Ziel-URL erzeugen und auslesen

const permission = await Notification.requestPermission();

if (permission === 'granted') {
  const n = new Notification('Neue Bestellung', {
    body: 'Bestellung #4711 ist eingegangen.',
    navigate: '/bestellungen/4711' // relativ – wird aufgelöst
  });

  console.log(n.navigate);
}

https://shop.example/bestellungen/4711

Funktionserkennung mit Rückfall auf den Klick-Handler

const supportsNavigate = 'navigate' in Notification.prototype;

const zeigeHinweis = (titel, url) => {
  const n = new Notification(titel, supportsNavigate ? { navigate: url } : {});

  if (!supportsNavigate) {
    // Klassischer Weg für Browser ohne Declarative Web Push
    n.addEventListener('click', () => {
      window.open(url, '_blank');
      n.close();
    });
  }
  return n;
};

zeigeHinweis('Artikel veröffentlicht', '/blog/neuer-artikel');

Im Service Worker per showNotification()

// sw.js
self.addEventListener('push', (event) => {
  const data = event.data?.json() ?? {};

  event.waitUntil(
    self.registration.showNotification(data.title ?? 'Hinweis', {
      body: data.body,
      navigate: data.url ?? '/'
    }).then(async () => {
      const [n] = await self.registration.getNotifications();
      console.log('Ziel:', n?.navigate);
    })
  );
});

Ziel: https://app.example/nachrichten/42

Declarative-Web-Push-Payload vom Server (Node.js)

// Nutzlast, die der Browser ohne Service-Worker-Code anzeigen kann
const payload = JSON.stringify({
  web_push: 8030, // Kennung für Declarative Web Push
  notification: {
    title: 'Neue Nachricht von Anna',
    body: 'Hast du heute Zeit?',
    navigate: 'https://app.example/chat/anna'
  }
});

console.log(payload.length > 0 ? 'Payload bereit' : 'leer');

Payload bereit

// Wichtig · Fallstricke

Experimentell: Bisher unterstützt nur WebKit/Safari (ab 18.4, im Rahmen von Declarative Web Push) die Eigenschaft. Chromium und Firefox ignorieren die Option navigate, und die Eigenschaft ist dort nicht vorhanden. Vorher mit 'navigate' in Notification.prototype prüfen und einen click- bzw. notificationclick-Handler als Rückfall bereitstellen.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wie n.navigate = '/x' hat keine Wirkung (im Strict Mode kommt ein TypeError). Die Ziel-URL lässt sich nur beim Erzeugen festlegen.
Eine ungültige URL in der Option führt beim Erzeugen zu einem TypeError. Relative Pfade werden gegen die Basis-URL aufgelöst, deshalb liefert die Eigenschaft immer absolute URLs.
Sicherheit: Nur vertrauenswürdige, vom eigenen Server bestimmte URLs verwenden. Ungeprüft aus der Push-Nutzlast übernommene URLs können Benutzer auf Phishing-Seiten leiten (offene Weiterleitung).
Benachrichtigungen brauchen einen sicheren Kontext (HTTPS) und die Berechtigung granted.

Siehe auch

Notification ServiceWorkerRegistration.showNotification() Notification.data Notification.requestPermission() Notification.vibrate