Push-Benachrichtigungen werden jetzt browserübergreifend unterstützt

Senden Sie Ihren Nutzern zeitnahe und nützliche Benachrichtigungen.

Thomas Steiner

Push-Benachrichtigungen wurden 2016 mit der Veröffentlichung der Push API und der Notification API standardisiert. Diese APIs sind Teil der Web Applications Working Group des W3C. Diese APIs bieten Webentwicklern die erforderlichen Funktionen, um Push-Benachrichtigungen in ihre Webanwendungen einzubinden und Nutzern die Möglichkeit zu geben, Benachrichtigungen in ihren Webbrowsern zu erhalten und mit ihnen zu interagieren. Push-Nachrichten sind Benachrichtigungen, die von einer Website oder Anwendung an den Webbrowser eines Nutzers gesendet werden, dem der Nutzer zuvor die Berechtigung zum Senden von Benachrichtigungen erteilt hat. Mit diesen Nachrichten können Nutzer über neue Inhalte oder Updates informiert, an anstehende Termine oder Fristen erinnert oder über andere wichtige Informationen informiert werden. Push-Nachrichten können besonders nützlich sein für Anwendungen, die Nutzern aktuelle, relevante Informationen zur Verfügung stellen müssen, z. B. Nachrichten- oder Sport-Apps, oder für E-Commerce-Websites, die Nutzern Benachrichtigungen zu Sonderangeboten oder Verkäufen senden möchten.

Wenn Sie sich für Push-Benachrichtigungen registrieren möchten, prüfen Sie zuerst, ob Ihr Browser sie unterstützt. Suchen Sie dazu in den Objekten navigator und window nach den Objekten serviceWorker und PushManager.

Wenn Push-Benachrichtigungen unterstützt werden, verwenden Sie die Keywords async und await, um den Dienst-Worker zu registrieren und Push-Benachrichtigungen zu abonnieren. Hier ein Beispiel für die Verwendung von JavaScript:

// Check if the browser supports push notifications.
if ("serviceWorker" in navigator && "PushManager" in window) {
  try {
    // Register the service worker.
    const swReg = await navigator.serviceWorker.register("/sw.js");

    // Subscribe for push notifications.
    const pushSubscription = await swReg.pushManager.subscribe({
      userVisibleOnly: true
    });

    // Save the push subscription to the database.
    savePushSubscription(pushSubscription);
  } catch (error) {
    // Handle errors.
    console.error("Error subscribing for push notifications.", error);
  }
} else {
  // Push notifications are not supported by the browser.
  console.error("Push notifications are not supported by the browser.");
}

Weitere Informationen

• Push-Benachrichtigungen – Übersicht
• Push API
• Web-Push für Webanwendungen unter iOS und iPadOS