Push-Benachrichtigungen werden jetzt browserübergreifend unterstützt

Sie können Nutzern rechtzeitige und nützliche Benachrichtigungen senden.

Push-Benachrichtigungen wurden 2016 mit der Veröffentlichung der Push API und der Notification API standardisiert, die Teil der Arbeitsgruppe für Webanwendungen des W3C sind. Diese APIs bieten Webentwicklern die erforderlichen Funktionen, um Push-Benachrichtigungen in ihre Webanwendungen zu integrieren und Nutzer können Benachrichtigungen in ihren Webbrowsern empfangen und mit ihnen interagieren. Push-Nachrichten sind Benachrichtigungen, die von einer Website oder Anwendung an den Webbrowser eines Nutzers gesendet werden, der der Nutzer zuvor die Berechtigung zum Senden von Benachrichtigungen erteilt hat. Diese Nachrichten können verwendet werden, um Nutzer über neue Inhalte oder Updates zu informieren, sie an anstehende Ereignisse oder Fristen zu erinnern oder andere wichtige Informationen bereitzustellen. Push-Nachrichten sind besonders nützlich für Anwendungen, die ihren Nutzern aktuelle, relevante Informationen liefern müssen, wie Nachrichten- oder Sport-Apps, oder für E-Commerce-Websites, die Nutzern Benachrichtigungen zu Sonderangeboten oder Rabatten senden möchten.

Wenn Sie sich für Push-Benachrichtigungen registrieren möchten, prüfen Sie zuerst, ob Ihr Browser diese 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 Schlüsselwörter async und await, um den Service Worker zu registrieren und Push-Benachrichtigungen zu abonnieren. Hier ist ein Beispiel dafür, wie Sie dies 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.");
}

Unterstützte Browser

  • 42
  • 17
  • 44
  • 16

Quelle

Weitere Informationen

Teil der Videoreihe „Neu interoperable“