Erste Schritte mit der Notifications API

In diesem Codelab nutzen Sie die grundlegenden Funktionen Benachrichtigungs-API auf:

  • Berechtigung zum Senden von Benachrichtigungen anfordern
  • Benachrichtigungen senden
  • Mit Benachrichtigungsoptionen experimentieren

Unterstützte Browser

  • Chrome: 20. <ph type="x-smartling-placeholder">
  • Edge: 14. <ph type="x-smartling-placeholder">
  • Firefox: 22. <ph type="x-smartling-placeholder">
  • Safari: 7. <ph type="x-smartling-placeholder">

Quelle

Beispiel-App neu zusammenstellen und in einem neuen Tab ansehen

Benachrichtigungen werden für die eingebettete Glitch App automatisch blockiert, sodass du auf dieser Seite keine Vorschau der App anzeigen kannst. Gehen Sie stattdessen wie folgt vor:

  1. Klicke auf Zum Bearbeiten Remix, damit das Projekt bearbeitet werden kann.
  2. Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann Vollbild Vollbild

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

Screenshot mit der Remix-Live-App in einem neuen Tab

Während du dieses Codelab durcharbeitest, kannst du den Code im eingebetteten Glitch auf dieser Seite ändern. Aktualisieren Sie den neuen Tab mit Ihrer Live-App, um die Änderungen zu sehen.

Mit der Start-App und ihrem Code vertraut machen

Sehen Sie sich als Erstes die Live-App im neuen Chrome-Tab an:

  1. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + 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, wird sich bald alles enthüllen!

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

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

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 aktuellen Berechtigungsstatus der Website an und protokollieren Sie ihn in der Konsole:

    // 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, lautet der Berechtigungsstatus „default“. Im Berechtigungsstatus default muss eine Website eine 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-Event-Listener ruft die showPermission-Funktion auf. beim Laden der Seite, wobei der aktuelle Berechtigungsstatus in der Konsole und auf der Seite angezeigt wird:

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

Berechtigung zum Senden von Benachrichtigungen anfordern

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

Mit der Methode Notification.requestPermission() können Sie ein Pop-up auslösen, 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. Aktualisieren Sie den Chrome-Tab, in dem Sie Ihre Live-App ansehen.

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

Der Nutzer kann eine von drei Antworten auf das Berechtigungs-Pop-up eingeben.

Nutzerantwort Berechtigungsstatus für Benachrichtigungen
Der Nutzer wählt Zulassen aus. granted
Der Nutzer wählt Blockieren aus. denied
Der Nutzer schließt das Pop-up, ohne eine Auswahl zu treffen default

Wenn der Nutzer auf „Zulassen“ klickt:

  • Notification.permission ist auf granted gesetzt.

  • Auf der Website können Benachrichtigungen angezeigt werden.

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

Wenn der Nutzer auf „Blockieren“ klickt:

  • Notification.permission ist auf denied gesetzt.

  • Die Website kann dem Nutzer keine Benachrichtigungen anzeigen.

  • Nachfolgende Notification.requestPermission-Aufrufe werden ohne Pop-up in 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 erzeugt.

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

    Zum Zeitpunkt der Erstellung dieses Dokuments kann sich das Browserverhalten bei geschlossenen Berechtigungs-Pop-ups noch ändern. Die beste Lösung besteht darin, immer die Berechtigung zum Senden von Benachrichtigungen als Reaktion auf eine vom Nutzer initiierte Interaktion anzufordern, damit er diese erwartet und weiß, was los ist.

Benachrichtigung senden

In diesem Schritt senden Sie eine Benachrichtigung an den Nutzer.

Mit dem Konstruktor Notification erstellen Sie eine neue Benachrichtigung und versuchen, sie anzuzeigen. Wenn der Berechtigungsstatus „granted“ ist, wird Ihre Benachrichtigung angezeigt.

  1. Ersetzen Sie den Funktions-Stub sendNotification 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 Notification-Konstruktor 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 Ihre Live-App ansehen. und klicken Sie auf Benachrichtigung senden. Eine Benachrichtigung mit dem Text Test body sollte angezeigt werden.

Was passiert, wenn du Benachrichtigungen ohne Berechtigung sendest?

In diesem Schritt fügen Sie ein paar Zeilen Code hinzu, um zu sehen, wenn Sie versuchen, eine Benachrichtigung ohne die Zustimmung des Nutzers anzuzeigen.

  • In public/index.js, am Ende der Funktion sendNotification, Definieren Sie den onerror-Event-Handler der neuen 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 stellst du einen Fehler bei der Berechtigung zum Senden von Benachrichtigungen fest:

  1. Klicken Sie auf das Schloss-Symbol neben der Chrome-URL-Leiste und setzen Sie die Einstellung für 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. Klicke auf Benachrichtigung senden und warte ab, 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 mehrmals versuchen, die Berechtigung anzufordern und das Pop-up zu schließen, um zu sehen, was passiert.

Mit Benachrichtigungsoptionen experimentieren

Jetzt wissen Sie, wie Sie eine Berechtigung anfordern und Benachrichtigungen senden. Außerdem hast du erfahren, welche Auswirkungen Nutzerantworten auf die Möglichkeit haben, Benachrichtigungen in deiner App anzuzeigen.

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 Dokumentation zu Benachrichtigungen auf MDN.

Beachten Sie, dass Browser und Geräte diese Optionen unterschiedlich implementieren, Daher empfiehlt es sich, die 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 Anregungen finden Sie im Benachrichtigungsgenerator von Peter Beverloo.

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

Im nächsten Codelab dieser Reihe, Benachrichtigungen mit einem Service Worker verarbeiten, erhalten Sie weitere Informationen.