Die Benachrichtigungsoptionen sind in zwei Abschnitte unterteilt. In einem Abschnitt geht es um die visuellen Aspekte (dieser Abschnitt) und in einem Abschnitt zur Erläuterung der Verhaltensaspekte von Benachrichtigungen (nächster Abschnitt).
Sie können mit dem Benachrichtigungsgenerator von Peter Beverloo in verschiedenen Browsern auf verschiedenen Plattformen verschiedene Benachrichtigungsoptionen ausprobieren.
Visuelle Optionen
Die API zum Anzeigen einer Benachrichtigung ist einfach:
<ServiceWorkerRegistration>.showNotification(<title>, <options>);
Die Argumente title und options sind optional.
Der Titel ist ein String und es gibt folgende Optionen:
{
"//": "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 Webanwendung auf dem Gerät installiert ist, wird anstelle des Browsernamens der Name der Web-App verwendet:
Angenommen, wir hätten den folgenden Code ausgeführt:
const title = 'Simple Title';
const options = {
body: 'Simple piece of body text.\nSecond line of body text :)',
};
registration.showNotification(title, options);
würden wir in Chrome unter Linux folgende Benachrichtigung erhalten:
In Firefox unter Linux würde das so aussehen:
So sieht die Benachrichtigung mit viel Text im Titel und Text in Chrome unter Linux aus:
Firefox unter Linux blendet den Textkörper ein, 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. Sie kann im selben Browser auf verschiedenen Plattformen auch unterschiedlich aussehen.
Chrome und Firefox verwenden die Systembenachrichtigungen und das Benachrichtigungscenter auf Plattformen, auf denen diese verfügbar sind.
Beispielsweise unterstützen Systembenachrichtigungen unter macOS keine Bilder und Aktionen (Schaltflächen und Inline-Antworten).
Chrome bietet auch benutzerdefinierte Benachrichtigungen für alle Desktop-Plattformen. Sie können sie aktivieren, indem Sie das Flag chrome://flags/#enable-system-notifications auf den Status Disabled setzen.
Icon
Die Option icon ist im Wesentlichen ein kleines Bild, das neben dem Titel und Textkörper angezeigt werden kann.
Sie müssen in Ihrem Code eine URL zu dem Bild angeben, das Sie laden möchten:
const title = 'Icon Notification';
const options = {
icon: '/images/demos/icon-512x512.png',
};
registration.showNotification(title, options);
In Chrome unter Linux erhalten Sie diese Benachrichtigung:
und in Firefox unter Linux:
Leider gibt es keine soliden Richtlinien für die Bildgröße für ein Symbol.
Android scheint ein Bild mit einer Auflösung von 64 dp zu verlangen (das 64-Pixel-Vielfache geteilt durch das Pixel-Verhältnis des Geräts).
Wenn das höchste Pixelverhältnis für ein Gerät 3 beträgt, ist eine Symbolgröße von 192 Pixeln oder mehr sicher.
Badge
Das badge ist ein kleines monochromes Symbol, mit dem dem Nutzer weitere Informationen darüber angezeigt werden, 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 Dokuments wurde das Logo nur in Chrome unter Android verwendet.
Bei anderen Browsern (oder Chrome ohne Symbol) sehen Sie ein Browsersymbol.
Wie bei der Option icon gibt es auch bei der Verwendung keine echten Vorgaben.
In den Android-Richtlinien wird als Größe 24 Pixel multipliziert mit dem Pixelverhältnis des Geräts empfohlen.
Ein Bild mit mindestens 72 Pixeln sollte also gut sein (bei einem maximalen Geräte-Pixel-Verhältnis von 3).
Bild
Die Option image kann verwendet werden, um dem Nutzer ein größeres Bild anzuzeigen. Dies ist besonders nützlich, um Nutzern 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 unter Android unterscheiden sich der Zuschnitt und das Seitenverhältnis:
Angesichts des unterschiedlichen Verhältnisses zwischen Computern und Mobilgeräten ist es äußerst schwierig, Richtlinien vorzuschlagen.
Da Chrome auf Desktop-Computern nicht den verfügbaren Platz ausfüllt und ein Verhältnis von 4:3 hat, empfiehlt es sich, ein Bild mit diesem Seitenverhältnis bereitzustellen und es Android zu erlauben, das Bild zuzuschneiden. Die Option image kann sich jedoch noch ändern.
Unter Android ist die einzige Richtlinie eine Breite von 450 dp.
Ein Bild mit einer Breite von mindestens 1.350 Pixeln ist empfehlenswert.
Aktionen (Schaltflächen)
Sie können actions so definieren, dass Schaltflächen mit einer Benachrichtigung angezeigt werden:
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 kannst du eine title, eine action (die im Wesentlichen eine ID ist), eine icon und eine type definieren. Den Titel und das Symbol sehen Sie in der Benachrichtigung. Die ID wird verwendet, wenn erkannt wird, dass auf die Aktionsschaltfläche 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 nur Supportaktionen für Chrome und Opera für Android unterstützt.
Im Beispiel oben sind vier Aktionen definiert, die zeigen, dass Sie mehr Aktionen definieren können, als angezeigt werden. Wenn Sie wissen möchten, wie viele Aktionen vom 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 Desktop werden die Symbole der Aktionsschaltflächen in Farbe angezeigt (siehe rosa Ring):
Unter Android 6 und niedriger werden die Symbole eingefärbt, damit sie dem Farbschema des Systems entsprechen:
Unter Android 7 und höher werden die Aktionssymbole überhaupt nicht angezeigt.
Das Verhalten auf Computern wird hoffentlich an Android angepasst (d.h. es wird das entsprechende Farbschema angewendet, damit die Symbole dem Erscheinungsbild des Systems entsprechen). In der Zwischenzeit können Sie die Textfarbe von Chrome anpassen, indem Sie für Ihre Symbole die Farbe #333333 festlegen.
Erwähnen Sie auch, dass Symbole auf Android-Geräten scharf aussehen, auf Desktops jedoch nicht.
Die beste Größe für Chrome bei der Arbeit war 24 x 24 Pixel. Das sieht leider fehl am Platz aus.
Die Best Practice, die wir aus diesen Unterschieden ziehen können:
- Verwende für deine Symbole ein einheitliches Farbschema, damit den Nutzern zumindest alle Symbole einheitlich angezeigt werden.
- Stellen Sie sicher, dass sie in monochromer Schrift funktionieren, da sie auf einigen Plattformen möglicherweise so angezeigt werden.
- Testen Sie die Größe und finden Sie heraus, was für Sie am besten funktioniert. Die Auflösung von 128 × 128 Pixel funktioniert auf Android gut, auf Desktop-Computern aber schlechter.
- Ihre Aktionssymbole werden überhaupt nicht angezeigt.
In der Notification-Spezifikation wird eine Möglichkeit untersucht, mehrere Größen von Symbolen zu definieren. Es scheint jedoch einige Zeit zu dauern, bis etwas vereinbart wird.
Aktionen (Inline-Antworten)
Du kannst eine Inline-Antwort auf die Benachrichtigung hinzufügen, indem du eine Aktion mit dem Typ 'text' definierst:
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:
Durch Klicken auf die Aktionsschaltfläche 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 Sie auf die Aktionsschaltfläche klicken müssen:
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.
Beim Testen schien es, dass die Richtung hauptsächlich durch den Text und nicht durch diesen Parameter bestimmt wurde. Laut Spezifikation soll dies dem Browser vorschlagen, wie Optionen wie Aktionen angeordnet werden sollen, aber ich habe keinen Unterschied gesehen.
Am besten definieren Sie, wenn möglich. Andernfalls führt der Browser gemäß dem bereitgestellten Text alles richtig aus.
Der Parameter sollte auf auto, ltr oder rtl festgelegt sein.
Eine linksläufige Sprache, die in Chrome unter Linux verwendet wird, sieht so aus:
In Firefox sehen Sie Folgendes:
Vibrieren
Mit der Vibrationsoption können Sie ein Vibrationsmuster definieren, das angewendet wird, wenn eine Benachrichtigung angezeigt wird. Dabei wird vorausgesetzt, dass die aktuellen Einstellungen des Nutzers Vibrationen zulassen (d. h. das Gerät ist nicht im Lautlos-Modus).
Das Format der Vibrationsoption sollte aus einem Zahlenarray bestehen, das die Anzahl der Millisekunden angibt, 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 die Vibration unterstützen.
Ton
Mit dem Parameter "ton" können Sie einen Ton definieren, der abgespielt werden soll, wenn die Benachrichtigung eingeht.
Zum Zeitpunkt der Erstellung dieses Dokuments 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 00:00:00 UTC sein, also dem 1. Januar 1970 (UNIX-Epoche).
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);
Best Practices für die Nutzererfahrung
Der größte UX-Fehler, den ich bei Benachrichtigungen festgestellt habe, sind die mangelnden Spezifität der Informationen, die in einer Benachrichtigung angezeigt werden.
Sie sollten überlegen, warum Sie die Push-Nachricht überhaupt gesendet haben, und darauf achten, dass alle Benachrichtigungsoptionen verwendet werden, damit die Nutzer verstehen, warum sie die Benachrichtigung lesen.
Ehrlich gesagt ist es leicht, Beispiele zu sehen und denken: „Diesen Fehler mache ich nie“. Aber in diese Falle gefallen, als Sie denken.
Einige häufige Fallstricke, die Sie vermeiden sollten:
- Fügen Sie Ihre Website nicht in den Titel oder den Text ein. Browser fügen Ihre Domain in die Benachrichtigung ein, sodass Sie sie nicht duplizieren.
- Verwenden Sie alle Informationen, die Ihnen zur Verfügung stehen. Wenn Sie eine Push-Nachricht senden, weil jemand eine Nachricht an einen Nutzer gesendet hat, verwenden Sie nicht den Titel "Neue Nachricht" und den Text "Zum Lesen hier klicken". Verwenden Sie den Titel "John hat gerade eine neue Nachricht gesendet" und legen Sie den Text der Benachrichtigung als Teil der Nachricht fest.
Browser und Funktionserkennung
Zum Zeitpunkt der Entstehung dieses Artikels gab es große Unterschiede zwischen Chrome und Firefox, was die Unterstützung von Funktionen für Benachrichtigungen betrifft.
Glücklicherweise erkennen Sie die Unterstützung von Benachrichtigungsfunktionen, indem Sie sich den window.Notification-Prototyp ansehen.
Wenn wir wissen möchten, ob eine Benachrichtigung Aktionsschaltflächen unterstützt, würden wir so vorgehen:
if ('actions' in window.Notification?.prototype) {
// Action buttons are supported.
} else {
// Action buttons are NOT supported.
}
Damit könnten wir die Benachrichtigung ändern, die unseren Nutzern angezeigt wird.
Führen Sie mit den anderen Optionen die oben genannten Schritte aus und ersetzen Sie dabei 'actions' durch den gewünschten Parameternamen.
Weitere Informationen
- Übersicht über Web-Push-Benachrichtigungen
- Funktionsweise von Push
- Nutzer abonnieren
- UX-Berechtigung
- Nachrichten mit Web Push-Bibliotheken senden
- Web Push-Protokoll
- Push-Ereignisse verarbeiten
- Anzeigen einer Benachrichtigung
- Benachrichtigungsverhalten
- Gängige Benachrichtigungsmuster
- Häufig gestellte Fragen zu Push-Benachrichtigungen
- Häufige Probleme und Fehler melden