Erste Schritte mit der Notifications API

In diesem Codelab nutzen Sie die grundlegenden Funktionen der Notifications API, um:

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

Unterstützte Browser

  • 20
  • 14
  • 22
  • 7

Quelle

Remix der Beispiel-App erstellen und in einem neuen Tab ansehen

Benachrichtigungen werden von der eingebetteten Glitch-App automatisch blockiert, sodass du auf dieser Seite keine Vorschau der App ansehen kannst. Gehen Sie stattdessen so vor:

  1. Klicke auf Zum Bearbeiten Remix, damit das Projekt bearbeitet werden kann.
  2. Wenn Sie eine Vorschau der Website ansehen möchten, klicken Sie auf View App (App anzeigen) und dann auf Fullscreen (Vollbild) Vollbild.

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

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

Nimm beim Durcharbeiten 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.

Mit der Start-App und ihrem Code vertraut machen

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

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

    In der Console sollten Sie die folgende Meldung sehen:

    Notification permission is default

    Wenn du nicht weißt, was das bedeutet, keine Sorge – bald wird alles enthüllt werden!

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

    Die Konsole gibt "TODO"-Nachrichten aus einigen Funktions-Stubs aus: requestPermission und sendNotification. Die folgenden Funktionen implementieren Sie in diesem Codelab.

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 ruft mit der Notifications API den aktuellen Berechtigungsstatus der Website ab und protokolliert ihn in der Console:

    // 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. Mit dem Berechtigungsstatus default muss eine Website die Berechtigung anfordern und erhalten haben, bevor sie Benachrichtigungen senden kann.

  • Die requestPermission-Funktion 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 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 Event-Listener window.onload ruft die Funktion showPermission beim Seitenaufbau 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, um die Berechtigung des Nutzers zum Senden von Benachrichtigungen anzufordern.

Mit der Methode Notification.requestPermission() lösen Sie ein Pop-up aus, 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 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, auf dem Sie die Live-App sehen.

  3. Klicken Sie in 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 ausführen.

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

Wenn der Nutzer auf „Zulassen“ klickt:

  • Notification.permission ist auf granted gesetzt.

  • Die Website kann Benachrichtigungen anzeigen.

  • Nachfolgende Aufrufe von Notification.requestPermission 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 Aufrufe von Notification.requestPermission 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 keine Benachrichtigungen für den Nutzer angezeigt werden.

  • Nachfolgende Aufrufe von Notification.requestPermission führen zu mehr Pop-ups.

    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 Dokuments kann sich das Browserverhalten als Reaktion auf geschlossene Pop-up-Fenster für Benachrichtigungen noch ändern. Der beste Weg zur Bewältigung besteht darin, als Reaktion auf eine vom Nutzer initiierte Interaktion immer die Berechtigung zum Senden von Benachrichtigungen anzufordern, damit der Nutzer sie erwartet und weiß, was passiert.

Benachrichtigung senden

In diesem Schritt senden Sie eine Benachrichtigung an den Nutzer.

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

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

  2. Aktualisieren Sie den Chrome-Tab, auf dem Sie die Live-App sehen, und klicken Sie auf die Schaltfläche Benachrichtigung senden. Nun 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, ohne die Zustimmung des Nutzers eine Benachrichtigung anzuzeigen.

  • Definieren Sie in public/index.js am Ende der sendNotification-Funktion 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 tritt ein Fehler bei der Benachrichtigungsberechtigung auf:

  1. Klicken Sie auf das Schloss-Symbol neben der URL-Leiste von Chrome und setzen Sie die Standardeinstellung für die Berechtigung zum Senden von Benachrichtigungen der Website auf die Standardeinstellungen zurück.

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

  3. Klicken Sie auf Benachrichtigung senden und warten Sie 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-Fenster zu schließen, um zu sehen, was passiert.

Benachrichtigungsoptionen testen

Sie wissen jetzt, wie Sie Berechtigungen anfordern und Benachrichtigungen senden. Sie haben auch gesehen, wie sich die Reaktionen der Nutzer auf die Anzeige von Benachrichtigungen in Ihrer App auswirken.

Du kannst jetzt mit den vielen visuellen und Datenoptionen experimentieren, die beim Erstellen einer Benachrichtigung verfügbar sind. Die vollständige Liste der verfügbaren Optionen finden Sie unten. Weitere Informationen zu diesen Optionen finden Sie in der MDN-Dokumentation zu Benachrichtigungen.

Da diese Optionen von Browsern und Geräten unterschiedlich implementiert werden, lohnt es sich, die Benachrichtigungen auf verschiedenen Plattformen zu testen.

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.

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, erfahren Sie mehr darüber.