Freigeben über

Erneutes Einbinden von Benutzern mit Pushnachrichten

  • Artikel

Pushnachrichten sind ein nützlicher Kommunikationskanal, mit dem Anwendungen ihre Benutzer mit relevanten und zeitnahen Inhalten aktualisieren können. Pushnachrichten können verwendet werden, um Benutzer erneut mit Ihrer App zu interagieren.

Einer der wichtigsten Vorteile von Pushnachrichten besteht darin, dass sie vom Server Ihrer App übermittelt werden können, auch wenn der Benutzer Ihre App nicht aktiv verwendet.

Pushnachrichten-Benachrichtigungen nehmen an der Benachrichtigungszentrale des Systems teil und können Bilder und Textinformationen anzeigen. Benachrichtigungen sind nützlich, um den Benutzer über wichtige Updates in Ihrer App zu informieren. Benachrichtigungen sollten jedoch selten verwendet werden, da sie den Workflow des Benutzers stören.

So erstellen Sie eine PWA, die Pushbenachrichtigungen unterstützt:

  1. Fordern Sie die Berechtigung des Benutzers zum Empfangen von Pushbenachrichtigungen im clientseitigen Code Ihrer PWA an.
  2. Abonnieren Sie die Pushnachrichten Ihres Servers.
  3. Senden Sie Pushnachrichten aus dem serverseitigen Code Ihrer PWA.
  4. Anzeigen von Benachrichtigungen, wenn Pushnachrichten empfangen werden.

Schritt 1: Anfordern der Berechtigung des Benutzers zum Empfangen von Pushbenachrichtigungen

Bevor Sie Pushbenachrichtigungen an Ihre PWA senden können, müssen Sie vom Benutzer die Berechtigung zum Empfangen von Nachrichten anfordern. Verwenden Sie zum Anfordern der Berechtigung die Notification.requestPermission-API in Ihrem clientseitigen Code, z. B. wenn der Benutzer auf eine Schaltfläche klickt:

button.addEventListener("click", () => {
  Notification.requestPermission().then(permission => {
    if (permission === "granted") {
      console.log("The user accepted to receive notifications");
    }
  });
});

Sie können die Berechtigung status später erneut überprüfen:

if (Notification.permission === "granted") {
  console.log("The user already accepted");
}

Schritt 2: Abonnieren von Pushbenachrichtigungen

Um Pushereignisse von Ihrem Server zu empfangen, abonnieren Sie Pushbenachrichtigungen mithilfe der Push-API.

Bevor ein neues Pushabonnement erstellt wird, überprüft Microsoft Edge, ob der Benutzer der PWA-Berechtigung zum Empfangen von Benachrichtigungen erteilt hat.

Wenn der Benutzer die PWA-Berechtigung zum Empfangen von Benachrichtigungen nicht erteilt hat, wird der Benutzer vom Browser zur Berechtigung aufgefordert. Wenn der Benutzer dem Browser keine Berechtigung erteilt, löst die Anforderung eine registration.pushManager.subscribe aus DOMException.

Der folgende Codeausschnitt zeigt, wie Sie Pushbenachrichtigungen in Ihrer PWA abonnieren:

async function subscribeToPushMessages() {
  const serviceWorkerRegistration = await navigator.serviceWorker.ready;

  // Check if the user has an existing subscription
  let pushSubscription = serviceWorkerRegistration.pushManager.getSubscription();
  if (pushSubscription) {
    // The user is already subscribed to push notifications
    return;
  }

  try {
    // Subscribe the user to push notifications
    pushSubscription = await serviceWorkerRegistration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: urlBase64ToUint8Array("YOUR PUBLIC VAPID KEY HERE")
    });
  } catch (err) {
    // The subscription wasn't successful.
    console.log("Error", err);
  }
}

// Utility function for browser interoperability
function urlBase64ToUint8Array(base64String) {
  var padding = '='.repeat((4 - base64String.length % 4) % 4);
  var base64 = (base64String + padding)
      .replace(/\-/g, '+')
      .replace(/_/g, '/');
  
  var rawData = window.atob(base64);
  var outputArray = new Uint8Array(rawData.length);
  
  for (var i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

Der im vorherigen Codeausschnitt erwähnte VAPID-Schlüssel ist ein öffentlicher Schlüssel, der verwendet wird, um den Server zu identifizieren, der die Pushnachrichten sendet und die Nutzlast der Pushnachricht verschlüsselt. Weitere Informationen zu VAPID-Schlüsseln finden Sie unter Schritt 3 : Senden von Pushnachrichten von Ihrem Server .

Die userVisibleOnly Konfigurationsoption der registration.pushManager.subscribe Funktion muss vorhanden sein und auf truefestgelegt sein. Diese Option gibt an, dass die Pushnachricht für den Benutzer angezeigt werden muss. Microsoft Edge unterstützt keine Pushnachrichten, die dem Benutzer nicht angezeigt werden.

Schritt 3: Senden von Pushnachrichten von Ihrem Server

Ihre Anwendung benötigt VAPID-Schlüssel (Voluntary Application Server Identification), um Pushnachrichten von Ihrem Server an Ihre PWA-Clients zu senden. Es sind mehrere VAPID-Schlüsselgeneratoren online verfügbar (z. B. Vapidkeys.com).

Sobald Sie über einen VAPID-Schlüssel verfügen, können Sie Pushnachrichten mithilfe des Webpushprotokolls an Ihre PWA-Clients senden.

Sie können eine Bibliothek verwenden, um Pushnachrichten von Ihrem Server zu senden, je nachdem, welche Programmiersprache Sie verwenden. Sie können beispielsweise die Webpushbibliothek verwenden, wenn Ihr Server Node.js verwendet. Andere Bibliotheken sind im WebPush-Bibliotheksrepository verfügbar.

Schritt 4: Anzeigen von Benachrichtigungen beim Empfang von Pushnachrichten

Nachdem ein Abonnement in Ihrer PWA erstellt wurde (wie in Schritt 2 – Abonnieren von Pushbenachrichtigungen gezeigt), fügen Sie ihrem Service Worker einen push Ereignishandler hinzu, um Pushnachrichten zu verarbeiten, die von Ihrem Server gesendet werden.

Der folgende Codeausschnitt zeigt, wie eine Benachrichtigung angezeigt wird, wenn eine Pushnachricht empfangen wird:

// Listen to push events.
self.addEventListener('push', event => {
  // Check if the user has granted permission to display notifications.
  if (Notification.permission === "granted") {
    // Get the notification data from the server.
    const notificationText = event.data.text();

    // Display a notification.
    const showNotificationPromise = self.registration.showNotification('Sample PWA', {
      body: notificationText,
      icon: 'images/icon512.png'
    });

    // Keep the service worker running until the notification is displayed.
    event.waitUntil(showNotificationPromise);
  }
});

Wenn Ihre PWA keine Benachrichtigung anzeigt, wenn eine Pushnachricht empfangen wird, zeigt Microsoft Edge eine generische Benachrichtigung an, die angibt, dass eine Pushnachricht empfangen wurde.

Siehe auch