Die Benachrichtigungsoptionen sind in zwei Abschnitte unterteilt: einen, der sich mit den visuellen Aspekten befasst (dieser Abschnitt), und einen, der die Verhaltensaspekte von Benachrichtigungen erläutert (der nächste Abschnitt).
Mit dem Notification Generator von Peter Beverloo können Sie verschiedene Benachrichtigungsoptionen in verschiedenen Browsern auf verschiedenen Plattformen ausprobieren.
Anzeigeoptionen
Die API zum Anzeigen einer Benachrichtigung ist einfach:
<ServiceWorkerRegistration>.showNotification(<title>, <options>);
Beide Argumente, title und options, sind optional.
Der Titel ist ein String und die Optionen können Folgendes sein:
{
"//": "Visual Options",
"body": "<String>",
"icon": "<URL String>",
"image": "<URL String>",
"badge": "<URL String>",
"dir": "<String of 'auto' | 'ltr' | 'rtl'>",
"timestamp": "<Long>"
"//": "Both visual & behavioral options",
"actions": "<Array of Strings>",
"data": "<Anything>",
"//": "Behavioral Options",
"tag": "<String>",
"requireInteraction": "<boolean>",
"renotify": "<Boolean>",
"vibrate": "<Array of Integers>",
"sound": "<URL String>",
"silent": "<Boolean>",
}
Sehen wir uns die visuellen Optionen an:
Optionen für Titel und Text
So sieht eine Benachrichtigung ohne Titel und Optionen in Chrome unter Windows aus:
Wie Sie sehen, wird der Browsername als Titel und der Platzhalter „Neue Benachrichtigung“ als Benachrichtigungstext verwendet.
Wenn eine progressive Web-App auf dem Gerät installiert ist, wird anstelle des Browsernamens der Name der Web-App verwendet:
Wenn wir den folgenden Code ausführen:
const title = 'Simple Title';
const options = {
body: 'Simple piece of body text.\nSecond line of body text :)',
};
registration.showNotification(title, options);
würden wir diese Benachrichtigung in Chrome unter Linux erhalten:
In Firefox unter Linux sieht das so aus:
So sieht die Benachrichtigung mit viel Text im Titel und Textkörper in Chrome unter Linux aus:
Firefox unter Linux minimiert den Textkörper, bis Sie den Mauszeiger auf die Benachrichtigung bewegen. Dadurch wird die Benachrichtigung maximiert:
Dieselben Benachrichtigungen in Firefox unter Windows sehen so aus:
Wie Sie sehen, kann dieselbe Benachrichtigung in verschiedenen Browsern unterschiedlich aussehen. Es kann auch im selben Browser auf verschiedenen Plattformen unterschiedlich aussehen.
Chrome und Firefox verwenden die Systembenachrichtigungen und das Benachrichtigungscenter auf Plattformen, auf denen diese verfügbar sind.
Beispielsweise werden in Systembenachrichtigungen unter macOS keine Bilder und Aktionen (Buttons und Inline-Antworten) unterstützt.
Chrome bietet außerdem benutzerdefinierte Benachrichtigungen für alle Desktopplattformen. Sie können sie aktivieren, indem Sie das Flag chrome://flags/#enable-system-notifications auf den Status Disabled setzen.
Symbol
Die Option icon ist im Wesentlichen ein kleines Bild, das Sie neben dem Titel und dem Textkörper einblenden können.
In Ihrem Code müssen Sie eine URL für das Bild angeben, das Sie laden möchten:
const title = 'Icon Notification';
const options = {
icon: '/images/demos/icon-512x512.png',
};
registration.showNotification(title, options);
Sie erhalten diese Benachrichtigung in Chrome unter Linux:
und in Firefox unter Linux:
Leider gibt es keine festen Richtlinien für die Größe von Bildern, die für Symbole verwendet werden.
Android scheint ein 64-dp-Bild zu benötigen (64 px multipliziert mit dem Pixelverhältnis des Geräts).
Wenn das höchste Pixelverhältnis für ein Gerät 3 ist, ist eine Symbolgröße von mindestens 192 Pixeln eine gute Wahl.
Badge
Das badge ist ein kleines einfarbiges Symbol, das dem Nutzer weitere Informationen darüber liefert, woher die Benachrichtigung stammt:
const title = 'Badge Notification';
const options = {
badge: '/images/demos/badge-128x128.png',
};
registration.showNotification(title, options);
Zum Zeitpunkt der Erstellung dieses Artikels wird das Badge nur in Chrome für Android verwendet.
In anderen Browsern (oder in Chrome ohne das Logo) wird ein Symbol des Browsers angezeigt.
Wie bei der Option icon gibt es keine festen Richtlinien für die Größe.
In den Android-Richtlinien wird als empfohlene Größe 24 Pixel multipliziert mit dem Pixelverhältnis des Geräts angegeben.
Das bedeutet, dass ein Bild mit mindestens 72 Pixeln ausreichen sollte (bei einem maximalen Pixelverhältnis des Geräts von 3).
Bild
Mit der Option image kann dem Nutzer ein größeres Bild angezeigt werden. Dies ist besonders nützlich, um dem Nutzer ein Vorschaubild anzuzeigen.
const title = 'Image Notification';
const options = {
image: '/images/demos/unsplash-farzad-nazifi-1600x1100.jpg',
};
registration.showNotification(title, options);
In Chrome unter Linux sieht die Benachrichtigung so aus:
In Chrome für Android sind Zuschnitt und Seitenverhältnis anders:
Aufgrund der unterschiedlichen Verhältnisse zwischen Desktop- und Mobilgeräten ist es extrem schwierig, Richtlinien vorzuschlagen.
Da Chrome auf dem Computer den verfügbaren Platz nicht ausfüllt und ein Seitenverhältnis von 4:3 hat, ist es am besten, ein Bild mit diesem Seitenverhältnis bereitzustellen und Android das Bild zuschneiden zu lassen. Die Option image kann sich jedoch noch ändern.
Unter Android ist die einzige Richtlinie eine Breite von 450 dp.
Gemäß dieser Richtlinie wäre ein Bild mit einer Breite von mindestens 1.350 Pixeln eine gute Wahl.
Aktionen (Schaltflächen)
Sie können actions definieren, um Schaltflächen mit einer Benachrichtigung anzuzeigen:
const title = 'Actions Notification';
const options = {
actions: [
{
action: 'coffee-action',
type: 'button',
title: 'Coffee',
icon: '/images/demos/action-1-128x128.png',
},
{
action: 'doughnut-action',
type: 'button',
title: 'Doughnut',
icon: '/images/demos/action-2-128x128.png',
},
{
action: 'gramophone-action',
type: 'button',
title: 'Gramophone',
icon: '/images/demos/action-3-128x128.png',
},
{
action: 'atom-action',
type: 'button',
title: 'Atom',
icon: '/images/demos/action-4-128x128.png',
},
],
};
registration.showNotification(title, options);
Für jede Aktion können Sie einen title, eine action (im Wesentlichen eine ID), eine icon und eine type definieren. Titel und Symbol sind in der Benachrichtigung zu sehen. Die ID wird verwendet, um zu erkennen, dass auf den Aktionsbutton geklickt wurde (mehr dazu im nächsten Abschnitt). Der Typ kann weggelassen werden, da 'button' der Standardwert ist.
Zum Zeitpunkt der Erstellung dieses Artikels werden Aktionen nur von Chrome und Opera für Android unterstützt.
Im obigen Beispiel sind vier Aktionen definiert, um zu veranschaulichen, dass Sie mehr Aktionen definieren können, als angezeigt werden. Wenn Sie wissen möchten, wie viele Aktionen im Browser angezeigt werden, können Sie window.Notification?.maxActions prüfen:
const maxVisibleActions = window.Notification?.maxActions;
if (maxVisibleActions) {
options.body = `Up to ${maxVisibleActions} notification actions can be displayed.`;
} else {
options.body = 'Notification actions are not supported.';
}
Auf dem Computer werden die Symbole der Aktionsschaltflächen in ihren Farben angezeigt (siehe rosa Donut):
Unter Android 6 und niedriger sind die Symbole farblich auf das Farbschema des Systems abgestimmt:
Unter Android 7 und höher werden die Aktionssymbole überhaupt nicht angezeigt.
Chrome wird hoffentlich sein Verhalten auf dem Computer an das von Android anpassen, d.h. das entsprechende Farbschema anwenden, damit die Symbole zum Erscheinungsbild des Systems passen. In der Zwischenzeit können Sie die Textfarbe von Chrome übernehmen, indem Sie Ihren Symbolen die Farbe #333333 geben.
Außerdem ist zu beachten, dass die Symbole auf Android-Geräten scharf dargestellt werden, auf Computern jedoch nicht.
Die beste Größe, die ich für Chrome auf dem Computer finden konnte, war 24 × 24 Pixel. Das sieht auf Android leider fehl am Platz aus.
Best Practice, die wir aus diesen Unterschieden ableiten können:
- Verwenden Sie ein einheitliches Farbschema für Ihre Symbole, damit zumindest alle Ihre Symbole einheitlich dargestellt werden.
- Achte darauf, dass sie auch in Schwarz-Weiß funktionieren, da sie auf einigen Plattformen so angezeigt werden können.
- Testen Sie die Größe und finden Sie heraus, was für Sie am besten funktioniert. 128 × 128 Pixel funktioniert bei mir unter Android gut, hatte aber auf dem Computer eine schlechte Qualität.
- Ihre Aktionssymbole werden überhaupt nicht angezeigt.
In der Benachrichtigungsspezifikation wird eine Möglichkeit untersucht, mehrere Größen von Symbolen zu definieren. Es wird jedoch wahrscheinlich noch einige Zeit dauern, bis eine Einigung erzielt wird.
Aktionen (Inline-Antworten)
Sie können der Benachrichtigung eine Inline-Antwort hinzufügen, indem Sie eine Aktion mit dem Typ 'text' definieren:
const title = 'Alexey Rodionov';
const options = {
body: 'How are you doing? )',
image: '/images/demos/avatar-512x512.jpg',
icon: '/images/demos/icon-512x512.png',
badge: '/images/demos/badge-128x128.png',
actions: [
{
action: 'reply',
type: 'text',
title: 'Reply',
icon: '/images/demos/action-5-128x128.png',
}
],
};
registration.showNotification(title, options);
So sieht das auf Android-Geräten aus:
Wenn Sie auf den Aktionsbutton klicken, wird ein Texteingabefeld geöffnet:
Sie können den Platzhalter für das Texteingabefeld anpassen:
const title = 'Alexey Rodionov';
const options = {
body: 'How are you doing? )',
icon: '/images/demos/avatar-512x512.jpg',
badge: '/images/demos/badge-128x128.png',
actions: [
{
action: 'reply',
type: 'text',
title: 'Reply',
icon: '/images/demos/action-5-128x128.png',
placeholder: 'Type text here',
}
],
};
registration.showNotification(title, options);
In Chrome unter Windows ist das Texteingabefeld immer sichtbar, ohne dass der Aktionsbutton angeklickt werden muss:
Sie können mehrere Inline-Antworten hinzufügen oder Schaltflächen und Inline-Antworten kombinieren:
const title = 'Poll';
const options = {
body: 'Do you like this photo?',
image: '/images/demos/cat-image.jpg',
icon: '/images/demos/icon-512x512.png',
badge: '/images/demos/badge-128x128.png',
actions: [
{
action: 'yes',
type: 'button',
title: '👍 Yes',
},
{
action: 'no',
type: 'text',
title: '👎 No (explain why)',
placeholder: 'Type your explanation here',
},
],
};
registration.showNotification(title, options);
Richtung
Mit dem Parameter dir können Sie festlegen, in welcher Richtung der Text angezeigt werden soll, von rechts nach links oder von links nach rechts.
In Tests wurde festgestellt, dass die Richtung weitgehend durch den Text und nicht durch diesen Parameter bestimmt wird. Laut Spezifikation soll dies dem Browser vorschlagen, wie Optionen wie Aktionen angeordnet werden sollen, aber ich habe keinen Unterschied gesehen.
Am besten definieren Sie sie, wenn möglich. Andernfalls sollte der Browser die richtige Aktion gemäß dem bereitgestellten Text ausführen.
Der Parameter sollte auf auto, ltr oder rtl festgelegt sein.
Eine von rechts nach links geschriebene Sprache sieht in Chrome unter Linux so aus:
In Firefox (wenn Sie den Mauszeiger darauf bewegen) wird Folgendes angezeigt:
Vibrieren
Mit der Option „Vibrieren“ kannst du ein Vibrationsmuster festlegen, das ausgeführt wird, wenn eine Benachrichtigung angezeigt wird, sofern die aktuellen Einstellungen des Nutzers Vibrationen zulassen (d.h. das Gerät befindet sich nicht im Lautlos-Modus).
Das Format der Option „vibrate“ sollte ein Array von Zahlen sein, die die Anzahl der Millisekunden beschreiben, die das Gerät vibrieren soll, gefolgt von der Anzahl der Millisekunden, die das Gerät nicht vibrieren soll.
const title = 'Vibrate Notification';
const options = {
// Star Wars shamelessly taken from the awesome Peter Beverloo
// https://tests.peter.sh/notification-generator/
vibrate: [
500, 110, 500, 110, 450, 110, 200, 110, 170, 40, 450, 110, 200, 110, 170,
40, 500,
],
};
registration.showNotification(title, options);
Dies betrifft nur Geräte, die Vibration unterstützen.
Ton
Mit dem Parameter „sound“ können Sie einen Ton definieren, der abgespielt wird, wenn die Benachrichtigung empfangen wird.
Zum Zeitpunkt der Erstellung dieses Artikels wird diese Option von keinem Browser unterstützt.
const title = 'Sound Notification';
const options = {
sound: '/demos/notification-examples/audio/notification-sound.mp3',
};
registration.showNotification(title, options);
Zeitstempel
Mit dem Zeitstempel können Sie der Plattform mitteilen, wann ein Ereignis aufgetreten ist, das zum Senden der Push-Benachrichtigung geführt hat.
timestamp sollte die Anzahl der Millisekunden seit dem 1. Januar 1970, 00:00:00 Uhr UTC (der UNIX-Epoche) sein.
const title = 'Timestamp Notification';
const options = {
body: 'Timestamp is set to "01 Jan 2000 00:00:00".',
timestamp: Date.parse('01 Jan 2000 00:00:00'),
};
registration.showNotification(title, options);
UX Best Practices
Der größte UX-Fehler, den ich bei Benachrichtigungen gesehen habe, ist ein Mangel an Spezifität in den Informationen, die in einer Benachrichtigung angezeigt werden.
Überlegen Sie, warum Sie die Push-Benachrichtigung überhaupt gesendet haben, und achten Sie darauf, dass alle Benachrichtigungsoptionen verwendet werden, damit Nutzer verstehen, warum sie diese Benachrichtigung lesen.
Ehrlich gesagt ist es leicht, Beispiele zu sehen und zu denken: „Diesen Fehler werde ich nie machen.“ Aber es ist einfacher, in diese Falle zu tappen, als Sie vielleicht denken.
Häufige Fehler, die es zu vermeiden gilt:
- Geben Sie Ihre Website nicht im Titel oder im Text an. Browser fügen Ihre Domain in die Benachrichtigung ein. Duplizieren Sie sie also nicht.
- Nutzen Sie alle verfügbaren Informationen. Wenn du eine Push-Benachrichtigung sendest, weil jemand einem Nutzer eine Nachricht gesendet hat, verwende nicht den Titel „Neue Nachricht“ und den Text „Hier klicken, um sie zu lesen“, sondern den Titel „John hat gerade eine neue Nachricht gesendet“ und lege einen Teil der Nachricht als Text der Benachrichtigung fest.
Browser und Featureerkennung
Zum Zeitpunkt der Erstellung dieses Artikels gibt es einen ziemlich großen Unterschied zwischen Chrome und Firefox, was die Unterstützung von Funktionen für Benachrichtigungen betrifft.
Glücklicherweise können Sie die Unterstützung für Benachrichtigungsfunktionen anhand des window.Notification-Prototyps erkennen.
Wenn wir wissen möchten, ob eine Benachrichtigung Aktionsschaltflächen unterstützt, gehen wir so vor:
if ('actions' in window.Notification?.prototype) {
// Action buttons are supported.
} else {
// Action buttons are NOT supported.
}
Damit können wir die Benachrichtigung ändern, die wir unseren Nutzern anzeigen.
Gehen Sie bei den anderen Optionen genauso vor wie oben und ersetzen Sie 'actions' durch den gewünschten Parameternamen.
Weitere Informationen
- Web-Push-Benachrichtigungen – Übersicht
- Funktionsweise von Push
- Nutzer abonnieren
- UX für Berechtigungen
- Nachrichten mit Web-Push-Bibliotheken senden
- Web-Push-Protokoll
- Push-Ereignisse verarbeiten
- Benachrichtigung anzeigen
- Benachrichtigungsverhalten
- Häufige Benachrichtigungsmuster
- Häufig gestellte Fragen zu Push-Benachrichtigungen
- Häufige Probleme und Fehler melden