Erste Schritte mit der Notifications API

In diesem Codelab verwenden Sie die grundlegenden Funktionen der Notifications API, um Folgendes zu tun:

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

Unterstützte Browser

  • Chrome: 20.
  • Edge: 14.
  • Firefox: 22.
  • Safari: 7.

Quelle

Benachrichtigungen von der eingebetteten Glitch-App werden automatisch blockiert. Sie können sich die App auf dieser Seite also nicht in der Vorschau ansehen. Gehen Sie stattdessen so vor:

  1. Klicke auf Remix zum Bearbeiten, um das Projekt bearbeitbar zu machen.
  2. Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann Vollbild Vollbild.

Der Glitch sollte in einem neuen Chrome-Tab geöffnet werden:

Screenshot der Remix-Live-App in einem neuen Tab

Nehmen Sie während dieses Codelabs Änderungen am Code im eingebetteten Glitch auf dieser Seite vor. Aktualisieren Sie den neuen Tab mit Ihrer Live-App, um die Änderungen zu sehen.

Start-App und 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

    Keine Sorge, wenn du nicht weißt, was das bedeutet. Bald wird alles gelüftet.

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

    Die Konsole gibt „TODO“-Nachrichten von einigen Funktions-Stücklisten aus: requestPermission und sendNotification. Das sind die Funktionen, die Sie in diesem Codelab implementieren werden.

Sehen wir uns nun den Code der Beispiel-App im eingebetteten Glitch auf dieser Seite 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;
    }

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

  • Die Funktion requestPermission ist ein Stub:

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

    Diese Funktion implementieren Sie im nächsten Schritt.

  • Die Funktion sendNotification 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-Ereignis-Listener ruft beim Laden der Seite die showPermission-Funktion auf und zeigt den aktuellen Berechtigungsstatus in der Console und auf der Seite an:

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

Berechtigung zum Senden von Benachrichtigungen anfordern

In diesem Schritt fügen Sie eine Funktion hinzu, mit der Sie die Berechtigung des Nutzers zum Senden von Benachrichtigungen anfordern.

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 Funktions-Stub requestPermission 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, in dem Sie die Live-App ansehen, neu.

  3. Klicken Sie in der Live-App-Benutzeroberfläche auf Berechtigung zum Senden von Benachrichtigungen anfordern. Ein Pop-up wird angezeigt.

Der Nutzer kann auf das Pop-up für Berechtigungen eine von drei Antworten geben.

Nutzerreaktion Status der Berechtigung zum Senden von Benachrichtigungen
Der Nutzer wählt Zulassen aus. granted
Der Nutzer wählt Blockieren aus. denied
Nutzer schließt Pop-up ohne Auswahl default

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 auf granted geleitet.

Wenn der Nutzer auf „Blockieren“ klickt:

  • Notification.permission ist auf denied gesetzt.

  • Die Website kann dem Nutzer keine Benachrichtigungen anzeigen.

  • Nachfolgende Aufrufe von Notification.requestPermission werden ohne Pop-up auf denied geleitet.

Wenn der Nutzer das Pop-up schließt:

  • Notification.permission bleibt default.

  • Die Website kann dem Nutzer keine Benachrichtigungen anzeigen.

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

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

    Zum Zeitpunkt der Erstellung dieses Artikels kann sich das Browserverhalten bei geschlossenen Pop-ups für Benachrichtigungsberechtigungen noch ändern. Am besten fordern Sie die Berechtigung für Benachrichtigungen immer als Reaktion auf eine vom Nutzer initiierte Interaktion an, damit er sie erwartet und weiß, was passiert.

Benachrichtigung senden

In diesem Schritt senden Sie dem Nutzer eine Benachrichtigung.

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

  1. Ersetzen Sie den sendNotification-Funktions-Stub 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 aufnehmen können. Weitere Informationen finden Sie in der MDN-Dokumentation zu Benachrichtigungsparametern.

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

Was passiert, wenn ich Benachrichtigungen ohne Erlaubnis sende?

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 Ereignis-Handler onerror 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 prüfen Sie, ob ein Fehler bei der Berechtigung zum Senden von Benachrichtigungen vorliegt:

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

  2. Klicken Sie auf Erlaubnis zum Senden von Benachrichtigungen anfordern und wählen Sie 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 noch einmal 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 kennen jetzt die Grundlagen zum Anfordern von Berechtigungen und zum Senden von Benachrichtigungen. Außerdem haben Sie gesehen, welche Auswirkungen die Antworten der Nutzer auf die Möglichkeit Ihrer App haben, Benachrichtigungen anzuzeigen.

Sie können jetzt die vielen visuellen und Datenoptionen ausprobieren, die beim Erstellen einer Benachrichtigung verfügbar sind. Unten finden Sie eine vollständige Liste der verfügbaren Optionen. Weitere Informationen zu diesen Optionen finden Sie in der Dokumentation zu Benachrichtigungen in der MDN.

Beachten Sie, dass diese Optionen von Browsern und Geräten unterschiedlich implementiert werden. Daher sollten Sie Ihre Benachrichtigungen auf verschiedenen Plattformen 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 findest du im Benachrichtigungsgenerator von Peter Beverloo.

Wenn Sie nicht weiterkommen, finden Sie hier den vollständigen Code für dieses Codelab: glitch.com/edit/#!/codelab-notifications-get-started-completed

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