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
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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:
- Klicke auf Zum Bearbeiten Remix, damit das Projekt bearbeitet werden kann.
- Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann Vollbild
Der Glitch sollte in einem neuen Chrome-Tab geöffnet werden:
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:
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!
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
undsendNotification
. 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 Berechtigungsstatusdefault
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 dieshowPermission
-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.
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); }); }
Aktualisieren Sie den Chrome-Tab, in dem Sie Ihre Live-App ansehen.
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 aufgranted
gesetzt.Auf der Website können Benachrichtigungen angezeigt werden.
Nachfolgende
Notification.requestPermission
-Aufrufe 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
Notification.requestPermission
-Aufrufe werden ohne Pop-up indenied
aufgelöst.
Wenn der Nutzer das Pop-up schließt:
Notification.permission
bleibtdefault
.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
aufdenied
. 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.
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
undoptions
.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.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 FunktionsendNotification
, Definieren Sie 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 stellst du einen Fehler bei der Berechtigung zum Senden von Benachrichtigungen fest:
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.
Klicken Sie auf Berechtigung zum Senden von Benachrichtigungen anfordern und wählen Sie diesmal im Pop-up-Fenster Blockieren aus.
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.