Push-Benachrichtigungen werden jetzt browserübergreifend unterstützt

Senden Sie rechtzeitig nützliche Benachrichtigungen an Ihre Nutzer.

Thomas Steiner

Push-Benachrichtigungen wurden 2016 mit der Veröffentlichung der Push API und der Notification API standardisiert, die Teil der Web Applications Working Group des W3C sind. Diese APIs bieten die erforderlichen Funktionen für Webentwickler, um Push-Benachrichtigungen in ihre Webanwendungen einzubinden, und für Nutzer, um Benachrichtigungen in ihren Webbrowsern zu empfangen und mit ihnen zu interagieren. Push-Nachrichten sind Benachrichtigungen, die von einer Website oder Anwendung, der der Nutzer zuvor die Berechtigung zum Senden von Benachrichtigungen erteilt hat, an den Webbrowser des Nutzers gesendet werden. Mit diesen Nachrichten können Nutzer über neue Inhalte oder Updates informiert, an bevorstehende Termine oder Fristen erinnert oder über andere wichtige Informationen benachrichtigt werden. Push-Benachrichtigungen können besonders nützlich für Anwendungen sein, die ihren Nutzern zeitnah relevante Informationen liefern müssen, z. B. Nachrichten- oder Sport-Apps, oder für E-Commerce-Websites, die Nutzern Benachrichtigungen über Sonderangebote oder Aktionen 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 Service Worker zu registrieren und Push-Benachrichtigungen zu abonnieren. Hier ein Beispiel dafür, wie Sie das mit JavaScript tun können:

// 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-Benachrichtigungen für Web-Apps unter iOS und iPadOS