Diese Seite wurde von der Cloud Translation API übersetzt.

Anzeigen einer Benachrichtigung

Alexey Rodionov

Matt Gaunt

Die Benachrichtigungsoptionen sind in zwei Abschnitte unterteilt. In einem Abschnitt werden die visuellen Aspekte behandelt. Abschnitt) und in dem die verhaltensbezogenen Aspekte von Benachrichtigungen erläutert werden (nächster Abschnitt).

Du kannst verschiedene Benachrichtigungsoptionen in verschiedenen Browsern und auf verschiedenen Plattformen ausprobieren. von Peter Beverloo Notification Generator:

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. Folgende Optionen sind verfügbar:

{
  "//": "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:

Dissektion der Benutzeroberfläche einer Benachrichtigung.

Optionen für Titel und Text

So sieht eine Benachrichtigung ohne Titel und Optionen in Chrome unter Windows aus:

Benachrichtigung ohne Titel und Optionen in Chrome unter Windows.

Wie Sie sehen, wird der Browsername als Titel und unter „Neue Benachrichtigung“ Platzhalter ist Benachrichtigungstext verwendet.

Wenn eine progressive Web-App auf dem Gerät installiert ist, wird stattdessen der Name der Web-App verwendet. des Browsernamens:

Benachrichtigung mit dem Namen der Web-App anstelle des Browsernamens.

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 in Chrome unter Linux folgende Benachrichtigung erhalten:

Benachrichtigung mit Titel und Text in Chrome unter Linux.

In Firefox unter Linux würde das wie folgt aussehen:

Benachrichtigung mit Titel und Text in Firefox unter Linux.

So sieht die Benachrichtigung mit viel Text im Titel und Text in Chrome aus Linux:

Benachrichtigung mit langem Titel und Text in Chrome unter Linux.

Firefox unter Linux minimiert den Textkörper, bis Sie den Mauszeiger auf die Benachrichtigung bewegen. die Benachrichtigung zum Maximieren:

Benachrichtigung mit langem Titel und Text in Firefox unter Linux.

Benachrichtigung mit langem Titel und Textkörper in Firefox unter Linux, während die Maus über die Benachrichtigung bewegt wird.

Dieselben Benachrichtigungen in Firefox unter Windows sehen wie folgt aus:

Benachrichtigung mit Titel und Text in Firefox unter Windows.

Benachrichtigung mit langem Titel und Text in Firefox unter Windows.

Wie Sie sehen, kann eine Benachrichtigung in verschiedenen Browsern unterschiedlich aussehen. Möglicherweise sieht es auch so aus: im selben Browser auf verschiedenen Plattformen unterscheiden.

Chrome und Firefox nutzen die Systembenachrichtigungen und das Benachrichtigungscenter auf Plattformen, verfügbar sind.

Beispielsweise unterstützen Systembenachrichtigungen unter macOS keine Bilder und Aktionen (Schaltflächen und Inline-Elemente). Antworten).

Chrome bietet auch benutzerdefinierte Benachrichtigungen für alle Desktop-Plattformen. Sie können sie aktivieren, indem Sie die chrome://flags/#enable-system-notifications-Flag für den Status Disabled.

Symbol

Die Option icon ist im Grunde ein kleines Bild, das Sie neben dem Titel und Textkörper anzeigen können.

In Ihrem Code müssen Sie 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);

Sie erhalten diese Benachrichtigung in Chrome unter Linux:

und in Firefox unter Linux:

Leider gibt es keine festen Richtlinien dafür, welche Bildgröße als Symbol verwendet werden soll.

Android scheint ein 64-dp-Bild zu haben (d. h. ein 64-Pixel-Vielfaches des Geräte-Pixel-Verhältnisses).

Wenn das höchste Pixelverhältnis für ein Gerät 3 beträgt, ist eine Symbolgröße von 192 px oder mehr ein auf jeden Fall.

Badge

Das badge ist ein kleines einfarbiges Symbol, das dem Nutzer weitere Informationen Nutzer darüber, 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 Logos wurde es nur in Chrome auf Android-Geräten verwendet.

In anderen Browsern (oder in Chrome ohne Symbol) wird ein Symbol für den Browser angezeigt.

Wie bei der icon-Option gibt es auch hier keine echten Richtlinien dafür, welche Größe verwendet werden sollte.

Lesen Sie die Android-Richtlinien. Die empfohlene Größe beträgt 24 Pixel multipliziert mit dem Pixelverhältnis des Geräts.

Ein Bild mit 72 Pixeln oder mehr sollte also gut sein (bei einem maximalen Geräte-Pixelverhältnis von 3).

Bild

Mit der Option image kann dem Nutzer ein größeres Bild angezeigt werden. Dies gilt insbesondere für 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:

Benachrichtigung mit Bild in Chrome unter Linux.

In Chrome unter Android sind Zuschnitt und Seitenverhältnis unterschiedlich:

Benachrichtigung mit Bild in Chrome unter Android.

Angesichts der Unterschiede im Verhältnis zwischen Desktop-Computern und Mobilgeräten ist es äußerst schwierig, .

Da Chrome auf Desktop-Computern den verfügbaren Platz nicht ausfüllt und ein Verhältnis von 4:3 hat, stellen Sie ein Bild mit diesem Seitenverhältnis bereit, das dann von Android zugeschnitten werden kann. Allerdings Die Option „image“ kann sich noch ändern.

Unter Android ist die einzige Richtlinie: Breite von 450 dp.

In Anbetracht dieser Vorgaben wäre ein Bild mit einer Breite von 1.350 Pixel oder mehr eine gute Wahl.

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 können Sie eine title, ein action (das im Wesentlichen eine ID ist), ein icon und type. Den Titel und das Symbol sehen Sie in der Benachrichtigung. Die ID wird bei der Erkennung 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 dieser Unterstützung waren nur Supportaktionen für Chrome und Opera für Android verfügbar.

Im obigen Beispiel wurden vier Aktionen definiert, um zu veranschaulichen, dass Sie mehr Aktionen als angezeigt. Wenn Sie wissen möchten, wie viele Aktionen der Browser 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 sind die Symbole der Aktionsschaltflächen farbig dargestellt (siehe rosafarbener Ring):

Benachrichtigung mit Aktionsschaltflächen in Chrome unter Linux.

Unter Android 6 und niedriger werden die Symbole entsprechend dem Farbschema des Systems eingefärbt:

Benachrichtigung mit Aktionsschaltflächen in Chrome für Android.

Unter Android 7 und höher werden die Aktionssymbole gar nicht angezeigt.

Das Verhalten von Chrome auf Desktop-Computern wird an Android angepasst, ein geeignetes Farbschema wählen, damit die Symbole zum Design des Systems passen. In der Zwischenzeit können Sie kann der Textfarbe von Chrome entsprechen, indem du deinen Symbolen die Farbe #333333 festlegst.

Außerdem solltest du darauf hinweisen, dass die Symbole auf Android-Geräten übersichtlich aussehen, aber nicht auf Desktop-Computern.

Die beste Größe für Chrome für Desktop-Computer war 24 x 24 Pixel. Das sieht leider deplatziert aus für Android.

Best Practice, die wir aus diesen Unterschieden ziehen können:

Halten Sie sich an ein einheitliches Farbschema für Ihre Symbole, damit zumindest alle Symbole einheitlich sind. die der Nutzer sieht.
Achten Sie darauf, dass sie in Schwarz-Weiß funktionieren, da sie auf einigen Plattformen möglicherweise so angezeigt werden.
Testen Sie die Größe und finden Sie heraus, was für Sie funktioniert. 128 × 128 Pixel funktioniert gut auf Android, war aber schlecht für Desktop-Computer.
Deine Aktionssymbole werden voraussichtlich gar nicht angezeigt.

In der Benachrichtigungsspezifikation wird derzeit untersucht, wie mehrere Symbolgrößen definiert werden können. Es sieht jedoch so aus, bevor etwas vereinbart wird.

Aktionen (Inline-Antworten)

Sie können eine Inline-Antwort auf die Benachrichtigung 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 es auf Android-Geräten aus:

Benachrichtigung unter Android mit einer Aktionsschaltfläche zum Antworten.

Durch Klicken auf die Aktionsschaltfläche wird ein Texteingabefeld geöffnet:

Benachrichtigung auf Android mit einem geöffneten Texteingabefeld.

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);

Benachrichtigung unter Android mit benutzerdefiniertem Platzhalter für Texteingabefeld.

In Chrome unter Windows ist das Texteingabefeld immer sichtbar, ohne dass der Nutzer auf die Aktion klicken muss. Schaltfläche:

Benachrichtigung unter Windows mit Texteingabefeld und Aktionsschaltfläche „Antworten“.

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);

Benachrichtigung unter Windows mit einem Texteingabefeld und zwei Aktionsschaltflächen.

Richtung

Mit dem Parameter dir können Sie festlegen, in welche Richtung der Text angezeigt werden soll. von rechts nach links oder von links nach rechts.

Bei Tests schien die Richtung hauptsächlich durch den Text und nicht durch dieses . Laut Spezifikation sollen dadurch dem Browser Vorschläge für Layoutoptionen gemacht werden. Aktionen, aber ich sah keinen Unterschied.

Am besten definieren Sie, wenn möglich. Andernfalls sollte der Browser entsprechend den aus dem angegebenen Text.

Der Parameter sollte auf auto, ltr oder rtl festgelegt sein.

Eine linksläufige Sprache, die in Chrome unter Linux verwendet wird, sieht so aus:

Benachrichtigung mit linksläufiger Sprache in Chrome unter Linux.

Wenn du in Firefox den Mauszeiger darüber bewegst, erscheint Folgendes:

Benachrichtigung mit linksläufiger Sprache in Firefox unter Linux.

Vibrieren

Mit der Vibrationsoption kannst du ein Vibrationsmuster definieren, das ausgeführt wird, wenn eine Benachrichtigung wird angezeigt, vorausgesetzt, die aktuellen Einstellungen des Nutzers lassen Vibrationen zu, d.h. das Gerät befindet sich nicht in Lautlos-Modus).

Das Format der Vibrationsoption sollte ein Array mit Zahlen sein, die die Anzahl der Millisekunden, für die das Gerät vibrieren soll, gefolgt von der Anzahl der Millisekunden, nicht vibrieren.

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 „sound“ können Sie festlegen, dass ein Ton abgespielt wird, wenn die Benachrichtigung eingeht.

Zum Zeitpunkt der Entstehung dieses Artikels unterstützt kein Browser diese Option.

const title = 'Sound Notification';

const options = {
  sound: '/demos/notification-examples/audio/notification-sound.mp3',
};

registration.showNotification(title, options);

Zeitstempel

Anhand eines Zeitstempels können Sie der Plattform mitteilen, wann ein Ereignis aufgetreten ist, das zum Push-Vorgang geführt hat. Benachrichtigung gesendet.

timestamp sollte die Anzahl der Millisekunden seit 00:00:00 UTC entsprechen, also dem 1. Januar 1970. Das ist die 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, ist mangelnde Spezifität in den Informationen. durch eine Benachrichtigung angezeigt.

Überlegen Sie, warum Sie die Push-Nachricht überhaupt gesendet haben, und stellen Sie sicher, dass alle Mit Benachrichtigungsoptionen können Nutzer nachvollziehen, warum sie diese Benachrichtigung lesen.

Ehrlich gesagt, sind Beispiele ganz einfach zu sehen und man denkt: „Diesen Fehler mache ich nie“. Aber es ist einfacher, in diesen Fall zu geraten, als Sie vielleicht denken.

Einige häufige Fallstricke, die Sie vermeiden sollten:

Fügen Sie Ihre Website nicht in den Titel oder Text ein. Browser nehmen Ihre Domain in das und vervielfältigen Sie sie nicht.
Verwenden Sie alle Informationen, die Ihnen zur Verfügung stehen. Wenn Sie eine Push-Nachricht senden, hat eine Nachricht an einen Nutzer gesendet, anstatt den Titel "Neue Nachricht" zu verwenden. und Text von „Klicken Sie hier, lesen.“ verwenden Sie den Titel „John hat gerade eine neue Nachricht gesendet“. und legen Sie für den Text der Benachrichtigung Teil der Nachricht.

Browser- und Funktionserkennung

Zum Zeitpunkt der Entstehung dieses Artikels gab es einen ziemlich großen Unterschied zwischen Chrome und Firefox in Bezug auf für Benachrichtigungen.

Die Unterstützung für Benachrichtigungsfunktionen ist in den window.Notification zu sehen. Prototyp erstellen.

Wenn wir wissen möchten, ob eine Benachrichtigung Aktionsschaltflächen unterstützt, gehen wir folgendermaßen vor:

if ('actions' in window.Notification?.prototype) {
  // Action buttons are supported.
} else {
  // Action buttons are NOT supported.
}

Damit könnten wir die Benachrichtigung ändern, die wir unseren Nutzern anzeigen.

Führen Sie bei den anderen Optionen einfach dieselben Schritte wie oben aus und ersetzen Sie dabei 'actions' durch den gewünschten Wert. Parameternamen.