In diesem Codelab nutzen Sie die grundlegenden Funktionen der Notifications API, um:
- Berechtigung zum Senden von Benachrichtigungen anfordern
- Benachrichtigungen senden
- Benachrichtigungsoptionen testen
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:
- Klicke auf Zum Bearbeiten Remix, damit das Projekt bearbeitet werden kann.
- Wenn Sie eine Vorschau der Website ansehen möchten, klicken Sie auf View App (App anzeigen) und dann auf Fullscreen (Vollbild)
.
Die Glitch sollte in einem neuen Chrome-Tab geöffnet werden:
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:
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!
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
undsendNotification
. 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 Berechtigungsstatusdefault
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 FunktionshowPermission
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.
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); }); }
Aktualisieren Sie den Chrome-Tab, auf dem Sie die Live-App sehen.
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 aufgranted
gesetzt.Die Website kann Benachrichtigungen anzeigen.
Nachfolgende Aufrufe von
Notification.requestPermission
werden ohne Pop-up ingranted
aufgelöst.
Wenn der Nutzer auf „Blockieren“ klickt:
Notification.permission
ist aufdenied
gesetzt.Die Website kann dem Nutzer keine Benachrichtigungen anzeigen.
Nachfolgende Aufrufe von
Notification.requestPermission
werden ohne Pop-up indenied
aufgelöst.
Wenn der Nutzer das Pop-up schließt:
Notification.permission
bleibtdefault
.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
aufdenied
. 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.
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
undoptions
.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.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 dersendNotification
-Funktion denonerror
-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:
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.
Klicken Sie auf Berechtigung zum Senden von Benachrichtigungen anfordern und wählen Sie diesmal Blockieren im Pop-up aus.
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.