Erste Schritte mit der Notifications API

In diesem Codelab verwenden Sie grundlegende Funktionen der Notifications API, um:

• Berechtigung zum Senden von Benachrichtigungen anfordern
• Benachrichtigungen senden
• Benachrichtigungsoptionen ausprobieren

Ausgangs-App und zugehörigen Code kennenlernen

Sehen Sie sich zuerst die Live-App auf dem neuen Chrome-Tab an:

1. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Optionstaste + J“ auf einem Mac), um die Entwicklertools zu öffnen. Klicken Sie auf den Tab Console.

   In der Console sollte die folgende Meldung angezeigt werden:

   Notification permission is default
   

   Wenn Sie nicht wissen, was das bedeutet, machen Sie sich keine Sorgen. Wir werden es Ihnen bald verraten.

2. Klicken Sie in der Live-App auf die Schaltflächen Berechtigung zum Senden von Benachrichtigungen anfordern und Benachrichtigung senden.

   In der Konsole werden „TODO“-Nachrichten aus einigen Funktions-Stubs ausgegeben: requestPermission und sendNotification. Das sind die Funktionen, die Sie in diesem Codelab implementieren werden.

Sehen wir uns nun den Code der Beispiel-App an. Öffnen Sie public/index.js und sehen Sie sich einige wichtige Teile des vorhandenen Codes an:

• Die Funktion showPermission verwendet die Notifications API, um den aktuellen Berechtigungsstatus der Website abzurufen und in der Konsole zu protokollieren:

  // Print current permission state to console;
  // update onscreen message.
  function showPermission() {
    let permission = Notification.permission;
    console.log('Notification permission is ' + permission);
    let p = document.getElementById('permission');
    p.textContent = 'Notification permission is ' + permission;
  }
  

  Bevor die Berechtigung angefordert wird, ist der Berechtigungsstatus default. Im Berechtigungsstatus default muss eine Website die Berechtigung anfordern und erhalten, bevor sie Benachrichtigungen senden kann.

• Die requestPermission-Funktion ist ein Platzhalter:

  // Use the Notification API to request permission to send notifications.
  function requestPermission() {
    console.log('TODO: Implement requestPermission()');
  }
  

  Sie implementieren diese Funktion im nächsten Schritt.

• Die sendNotification-Funktion ist ein Stub:

  // Use the Notification constructor to create and send a new Notification.
  function sendNotification() {
    console.log('TODO: Implement sendNotification()');
  }
  

  Sie implementieren diese Funktion, nachdem Sie requestPermission implementiert haben.

• Der window.onload-Event-Listener ruft beim Laden der Seite die Funktion showPermission auf und zeigt den aktuellen Berechtigungsstatus in der Konsole und auf der Seite an:

  window.onload = () => { showPermission(); };
  

Berechtigung zum Senden von Benachrichtigungen anfordern

In diesem Schritt fügen Sie die Funktion hinzu, mit der die Berechtigung zum Senden von Benachrichtigungen angefordert wird.

Mit der Methode Notification.requestPermission() wird ein Pop-up ausgelöst, in dem der Nutzer aufgefordert wird, Benachrichtigungen von Ihrer Website zuzulassen oder zu blockieren.

1. Ersetzen Sie den requestPermission-Funktionsstub in public/index.js durch den folgenden Code:

   // Use the Notification API to request permission to send notifications.
   function requestPermission() {
     Notification.requestPermission()
       .then((permission) => {
         console.log('Promise resolved: ' + permission);
         showPermission();
       })
       .catch((error) => {
         console.log('Promise was rejected');
         console.log(error);
       });
   }
   

2. Laden Sie den Chrome-Tab neu, in dem Sie Ihre Live-App ansehen.

3. Klicken Sie in der Live-App-Oberfläche auf Berechtigung zum Senden von Benachrichtigungen anfordern. Ein Pop‑up-Fenster wird geöffnet.

Der Nutzer kann auf das Berechtigungs-Pop-up auf drei Arten reagieren.

Wenn der Nutzer auf „Zulassen“ klickt:

• Notification.permission ist auf granted gesetzt.

• Die Website kann dann Benachrichtigungen anzeigen.

• Nachfolgende Aufrufe von Notification.requestPermission werden ohne Pop-up zu granted aufgelöst.

Wenn der Nutzer auf „Blockieren“ klickt:

• Notification.permission ist auf denied gesetzt.

• Auf der Website können dem Nutzer keine Benachrichtigungen angezeigt werden.

• Nachfolgende Aufrufe von Notification.requestPermission werden ohne Pop-up zu denied aufgelöst.

Wenn der Nutzer das Pop-up schließt:

• Notification.permission bleibt default.

• Auf der Website können dem Nutzer keine Benachrichtigungen angezeigt werden.

• Bei nachfolgenden Aufrufen von Notification.requestPermission werden weitere Pop-ups angezeigt.

  Wenn der Nutzer die Pop-ups jedoch weiterhin schließt, blockiert der Browser die Website möglicherweise und setzt Notification.permission auf denied. Weder Pop-ups für Berechtigungsanfragen noch Benachrichtigungen können dem Nutzer dann angezeigt werden.

  Zum Zeitpunkt der Erstellung dieses Artikels kann sich das Browserverhalten in Reaktion auf Pop-ups für die Berechtigung für abgelehnte Benachrichtigungen noch ändern. Am besten fordern Sie die Berechtigung für Benachrichtigungen immer als Reaktion auf eine Interaktion an, die der Nutzer initiiert hat. So weiß er, was passiert.

Benachrichtigung senden

In diesem Schritt senden Sie eine Benachrichtigung an den Nutzer.

Sie verwenden den Notification-Konstruktor, um eine neue Benachrichtigung zu erstellen und zu versuchen, sie anzuzeigen. Wenn der Berechtigungsstatus granted ist, wird Ihre Benachrichtigung angezeigt.

1. Ersetzen Sie den sendNotification-Funktionsstub in index.js durch den folgenden Code:

   // Use the Notification constructor to create and send a new Notification.
   function sendNotification() {
     let title = 'Test';
     let options = {
       body: 'Test body',
       // Other options can go here
     };
     console.log('Creating new notification');
     let notification = new Notification(title, options);
   }
   

   Der Konstruktor Notification verwendet zwei Parameter: title und options. options ist ein Objekt mit Eigenschaften, die visuelle Einstellungen und Daten darstellen, die Sie in eine Benachrichtigung einfügen können. Weitere Informationen finden Sie in der MDN-Dokumentation zu Benachrichtigungsparametern.

2. Aktualisieren Sie den Chrome-Tab, in dem Sie Ihre Live-App ansehen, und klicken Sie auf die Schaltfläche Benachrichtigung senden. Eine Benachrichtigung mit dem Text Test body sollte angezeigt werden.

Was passiert, wenn Sie Benachrichtigungen ohne Erlaubnis senden?

In diesem Schritt fügen Sie einige Codezeilen hinzu, mit denen Sie sehen können, was passiert, wenn Sie versuchen, eine Benachrichtigung ohne die Erlaubnis des Nutzers anzuzeigen.

• Definieren Sie in public/index.js am Ende der Funktion sendNotification den onerror-Ereignishandler für die neue Benachrichtigung:

// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
  let title = 'Test';
  let options = {
    body: 'Test body',
    // Other options can go here
  };
  console.log('Creating new notification');
  let notification = new Notification(title, options);
  notification.onerror = (event) => {
    console.log('Could not send notification');
    console.log(event);
  };
}

So sehen Sie einen Fehler bei der Berechtigung zum Senden von Benachrichtigungen:

1. Klicken Sie neben der Chrome-Adressleiste auf das Schlosssymbol und setzen Sie die Benachrichtigungsberechtigung der Website auf die Standardeinstellung zurück.

2. Klicken Sie auf Berechtigung zum Senden von Benachrichtigungen anfordern und wählen Sie diesmal im Pop-up-Fenster Blockieren aus.

3. Klicken Sie auf Benachrichtigung senden und sehen Sie, was passiert. Der Fehlertext (Could not send notification) und das Ereignisobjekt werden in der Konsole protokolliert.

Optional können Sie die Benachrichtigungsberechtigungen der Website zurücksetzen. Sie können versuchen, die Berechtigung anzufordern und das Pop-up mehrmals zu schließen, um zu sehen, was passiert.

Benachrichtigungsoptionen ausprobieren

Sie haben jetzt die Grundlagen für das Anfordern von Berechtigungen und das Senden von Benachrichtigungen kennengelernt. Außerdem haben Sie gesehen, wie sich die Antworten der Nutzer auf die Möglichkeit Ihrer App auswirken, Benachrichtigungen zu präsentieren.

Sie können jetzt mit den vielen visuellen und Datenoptionen experimentieren, die beim Erstellen einer Benachrichtigung verfügbar sind. Unten finden Sie alle verfügbaren Optionen. Weitere Informationen zu diesen Optionen finden Sie in der Benachrichtigungsdokumentation auf MDN.

Browser und Geräte implementieren diese Optionen unterschiedlich. Es empfiehlt sich daher, Ihre Benachrichtigungen auf verschiedenen Plattformen zu testen, um zu sehen, wie sie aussehen.

let options = {
  dir: 'auto',              // Text direction
  lang: 'en-US',            // A language tag
  badge: '/orange-cat.png', // Display when insufficient room
  body: 'Hello World',      // Body text
  tag: 'mytag',             // Tag for categorization
  icon: '/line-cat.png',    // To display in the notification
  image: '/orange-cat.png', // To display in the notification
  data: {                   // Arbitrary data; any data type
    cheese: 'I like cheese',
    pizza: 'Excellent cheese delivery mechanism',
    arbitrary: {
      faveNumber: 42,
      myBool: true
    }},
  vibrate: [200, 100, 200], // Vibration pattern for hardware
  renotify: false,          // Notify if replaced? Default false
  requireInteraction: false,// Active until click? Default false
  /*
    actions:   // Array of NotificationActions
               // Only usable with a service worker
    [{
      action: 'shop',
      title: 'Shop!',
      icon: '/bags.png'
    },],
  */
}

Weitere Ideen finden Sie im Benachrichtigungsgenerator von Peter Beverloo.

Im nächsten Codelab dieser Reihe, Benachrichtigungen mit einem Service Worker verarbeiten, erfahren Sie mehr.