Cette page a été traduite par l'API Cloud Translation.

Affichage d'une notification

Alexey Rodionov

Matt Gaunt

Les options de notification sont divisées en deux sections, l'une qui traite des aspects visuels (cela ) et une autre qui explique les aspects comportementaux des notifications (la section suivante).

Vous pouvez tester différentes options de notification dans différents navigateurs et sur diverses plates-formes. avec l'aide de Peter Beverloo Générateur de notifications.

Options visuelles

L'API permettant d'afficher une notification est simple:

<ServiceWorkerRegistration>.showNotification(<title>, <options>);

Les deux arguments title et options sont facultatifs.

Le titre est une chaîne et les options peuvent être l'une des options suivantes:

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

Examinons les options visuelles:

Dissection de l'interface utilisateur d'une notification

Options pour le titre et le corps

Voici à quoi ressemble une notification sans le titre ni les options dans Chrome sous Windows:

Notification sans titre ni options dans Chrome sous Windows.

Comme vous pouvez le voir, le nom du navigateur est utilisé comme titre et le libellé "Nouvelle notification" l'espace réservé est utilisé comme corps de la notification.

Si une progressive web app est installée sur l'appareil, le nom de l'application Web est utilisé à la place du nom du navigateur:

Notification avec le nom de l'application Web au lieu du nom du navigateur.

Si nous exécutons le code suivant:

const title = 'Simple Title';

const options = {
  body: 'Simple piece of body text.\nSecond line of body text :)',
};

registration.showNotification(title, options);

nous recevrons cette notification dans Chrome sous Linux:

Notification avec titre et corps du texte dans Chrome sous Linux.

Dans Firefox sous Linux, cela ressemblerait à ceci:

Notification avec titre et corps du texte dans Firefox sous Linux.

Voici à quoi ressemble une notification avec beaucoup de texte dans le titre et le corps du message dans Chrome sur Linux:

Notification avec titre long et corps du texte dans Chrome sous Linux.

Firefox sous Linux réduit le corps du texte jusqu'à ce que vous pointiez sur la notification. pour développer la notification:

Notification avec titre long et corps du texte dans Firefox sous Linux.

Notification avec un titre long et un corps de texte dans Firefox sous Linux en pointant sur la notification avec le curseur de la souris

Dans Firefox sous Windows, les notifications se présentent comme suit:

Notification avec titre et corps du texte dans Firefox sous Windows.

Notification avec titre long et corps du texte dans Firefox sous Windows.

Comme vous pouvez le voir, la présentation d'une même notification peut varier d'un navigateur à l'autre. Il peut aussi sembler différentes dans le même navigateur sur des plateformes différentes.

Chrome et Firefox utilisent les notifications système et le centre de notifications sur les plates-formes où ces sont disponibles.

Par exemple, les notifications système sous macOS ne sont pas compatibles avec les images ni les actions (boutons et actions réponses).

Chrome propose également des notifications personnalisées pour toutes les plates-formes de bureau. Vous pouvez l'activer en paramétrant le l'indicateur chrome://flags/#enable-system-notifications à l'état Disabled.

Icône

L'option icon est essentiellement une petite image que vous pouvez afficher à côté du titre et du corps du texte.

Dans votre code, vous devez fournir l'URL de l'image à charger:

const title = 'Icon Notification';

const options = {
  icon: '/images/demos/icon-512x512.png',
};

registration.showNotification(title, options);

Cette notification s'affiche dans Chrome sous Linux:

et dans Firefox sous Linux:

Malheureusement, il n'existe aucune consigne fiable concernant la taille d'image à utiliser pour une icône.

Android semble souhaiter une image de 64 dp (soit des multiples de 64 pixels par rapport au ratio de pixels de l'appareil).

En supposant que le rapport de pixels le plus élevé pour un appareil soit de 3, une taille d'icône de 192 pixels ou plus correspond à pari sécurisé.

Badge

badge est une petite icône monochrome qui permet de présenter un peu plus d'informations aux utilisateurs. sur l'origine de la notification:

const title = 'Badge Notification';

const options = {
  badge: '/images/demos/badge-128x128.png',
};

registration.showNotification(title, options);

Au moment de la rédaction de ce document, le badge n'est utilisé que dans Chrome sur Android.

Sur les autres navigateurs (ou dans Chrome sans le badge), une icône de navigateur s'affiche.

Comme pour l'option icon, il n'existe pas de règles précises concernant la taille à utiliser.

Consulter les consignes Android la taille recommandée est de 24 pixels multipliés par le rapport en pixels de l'appareil.

En d'autres termes, une image de 72 pixels ou plus est appropriée (en supposant un ratio de pixels maximal de l'appareil de 3).

Image

L'option image peut être utilisée pour présenter une image plus grande à l'utilisateur. C'est particulièrement utile pour présenter une image d'aperçu à l'utilisateur.

const title = 'Image Notification';

const options = {
  image: '/images/demos/unsplash-farzad-nazifi-1600x1100.jpg',
};

registration.showNotification(title, options);

Dans Chrome sous Linux, la notification se présente comme suit:

Notification avec image dans Chrome sous Linux.

Dans Chrome sur Android, le recadrage et le format sont différents:

Notification avec image dans Chrome sur Android.

Compte tenu des différences de ratio entre les ordinateurs et les mobiles, il est extrêmement difficile consignes.

Chrome pour ordinateur ne remplit pas l'espace disponible et offre un format de 4:3, ce qui est sans doute le meilleur consiste à diffuser une image avec ce format et à laisser Android la recadrer. Cela étant, l'option image peut encore changer.

Sur Android, la seule consignes est de de 450 dp.

À l'aide de cette consigne, nous vous recommandons d'utiliser une image d'une largeur de 1 350 pixels ou plus.

Actions (boutons)

Vous pouvez définir actions pour afficher les boutons avec une notification:

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

Pour chaque action, vous pouvez définir un title, un action (qui est essentiellement un ID), un icon et type. Le titre et l'icône sont ce que vous pouvez voir dans la notification. L'ID est utilisé lors de la détection que le bouton d'action avait enregistré un clic (plus d'informations à ce sujet dans la section suivante). Le type peut être omise, car 'button' est la valeur par défaut.

Au moment de la rédaction de ce document, seules les actions compatibles avec Chrome et Opera pour Android sont acceptées.

Dans l'exemple ci-dessus, quatre actions sont définies pour illustrer le fait que vous pouvez définir plus d'actions que s'affiche. Si vous voulez connaître le nombre d'actions qui seront affichées par le navigateur, vous pouvez vérifier window.Notification?.maxActions:

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.';
}

Sur un ordinateur de bureau, les icônes des boutons d'action affichent leurs couleurs (voir l'anneau rose):

Notification avec des boutons d'action dans Chrome sous Linux.

Sur Android 6 et versions antérieures, les icônes sont colorées pour correspondre au jeu de couleurs du système:

Notification avec des boutons d'action dans Chrome pour Android.

Sur Android 7 et versions ultérieures, les icônes d'action ne s'affichent pas du tout.

Nous espérons que Chrome modifiera son comportement sur les ordinateurs de bureau pour qu'il corresponde à celui d'Android (par exemple, jeu de couleurs approprié pour que les icônes correspondent à l’apparence du système). En attendant, vous peut correspondre à la couleur du texte de Chrome en attribuant à vos icônes une couleur de #333333.

Il convient également de souligner que les icônes sont nettes sur Android, mais pas sur les ordinateurs.

La taille optimale pour Chrome pour les ordinateurs de bureau était de 24 x 24 pixels. Cet affichage a l'air hors de propos sur Android.

Voici les bonnes pratiques que nous pouvons tirer de ces différences:

Conservez un jeu de couleurs cohérent pour vos icônes afin qu'au moins toutes vos icônes soient cohérentes visibles par l'utilisateur.
Assurez-vous qu'elles fonctionnent en monochrome, car certaines plates-formes peuvent les afficher ainsi.
Testez la taille pour voir ce qui vous convient le mieux. La taille 128 x 128 pixels fonctionne bien sur Android, mais n'est pas satisfaisante sur ordinateur.
Attendez-vous à ce que vos icônes d'action ne s'affichent pas du tout.

Les spécifications de notification étudient un moyen de définir plusieurs tailles d'icônes, un certain temps avant que tout ne soit convenu.

Actions (réponses intégrées)

Vous pouvez ajouter une réponse intégrée à la notification en définissant une action avec le type 'text':

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

Voici ce à quoi cela ressemblera sous Android:

Notification sur Android avec un bouton d'action "Répondre".

Cliquez sur le bouton d'action pour ouvrir un champ de saisie de texte:

Notification sur Android avec un champ de saisie de texte ouvert.

Vous pouvez personnaliser l'espace réservé pour le champ de saisie de texte:

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

Notification sur Android avec un espace réservé personnalisé pour le champ de saisie de texte.

Dans Chrome sous Windows, le champ de saisie de texte est toujours visible sans que vous ayez besoin de cliquer sur l'action bouton:

Notification sous Windows avec un champ de saisie de texte et un bouton d'action de réponse.

Vous pouvez ajouter plusieurs réponses intégrées ou combiner des boutons et des réponses intégrées:

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

Notification sous Windows avec un champ de saisie de texte et deux boutons d'action.

Direction

Le paramètre dir vous permet de définir le sens d'affichage du texte. de droite à gauche ou de gauche à droite.

Lors des tests, il semblait que la direction était en grande partie déterminée par le texte plutôt que par cette . Selon la spécification, il s'agit d'une suggestion pour le navigateur sur la façon de mettre en page les options comme les actions, mais je n'ai vu aucune différence.

Il vaut probablement mieux définir si c'est possible. Sinon, le navigateur doit procéder comme il se doit le texte fourni.

Le paramètre doit être défini sur auto, ltr ou rtl.

Voici à quoi ressemble une langue s'écrivant de droite à gauche dans Chrome sous Linux:

Notification dans la langue qui s'écrit de droite à gauche sur Chrome sous Linux.

Dans Firefox (en passant la souris dessus), vous obtenez le résultat suivant:

Notification avec les langues s'écrivant de la droite vers la gauche dans Firefox sous Linux.

Vibreur

L'option "Vibreur" vous permet de définir un type de vibration à exécuter lorsqu'une notification est s'affiche, à condition que les paramètres actuels de l'utilisateur autorisent les vibrations (c'est-à-dire que l'appareil n'est pas mode silencieux).

Le format de l'option "Vibreur" doit être un tableau de nombres décrivant le nombre nombre de millisecondes pendant lesquelles l'appareil doit vibrer, puis pas le vibreur.

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

Cela ne concerne que les appareils compatibles avec le vibreur.

Son

Le paramètre de son vous permet de définir un son à émettre à la réception de la notification.

Au moment de la rédaction de ce document, aucun navigateur n'est compatible avec cette option.

const title = 'Sound Notification';

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

registration.showNotification(title, options);

Horodatage

L'horodatage vous permet d'indiquer à la plate-forme l'heure à laquelle un événement ayant entraîné le transfert s'est produit. notification en cours d'envoi.

timestamp doit être le nombre de millisecondes écoulées depuis 00:00:00 UTC, soit le 1er janvier 1970. (qui correspond à l'époque UNIX).

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

Bonnes pratiques concernant l'expérience utilisateur

Le plus grand échec de l'UX que j'ai vu avec les notifications est un manque de spécificité dans les informations affiché dans une notification.

Vous devez réfléchir au motif de l'envoi du message push en premier lieu et vous assurer que tous les les options de notification sont utilisées pour aider les utilisateurs à comprendre pourquoi ils lisent cette notification.

Pour être honnête, il est facile de voir des exemples et de se dire : « Je ne ferai jamais cette erreur ». Mais il est plus facile de tomber dans ce piège que vous ne le pensez.

Voici quelques pièges courants à éviter:

N'incluez pas l'URL de votre site dans le titre ni dans le corps du texte. Les navigateurs incluent votre domaine et ne les dupliquez pas.
Utilisez toutes les informations dont vous disposez. Si vous envoyez un message push parce qu'un utilisateur a envoyé un message à un utilisateur, plutôt que d'utiliser le titre "Nouveau message" et le corps de "Cliquez ici pour le lire." utiliser le titre "John vient d'envoyer un nouveau message" et définir le corps de la notification sur une partie du message.

Navigateurs et détection de fonctionnalités

Au moment de la rédaction de ce document, il existe une grande disparité entre Chrome et Firefox en termes de la prise en charge des fonctionnalités pour les notifications.

Heureusement, vous pouvez détecter la compatibilité des fonctionnalités de notification en consultant la window.Notification un prototype.

Supposons que nous voulions savoir si une notification prend en charge les boutons d'action. Voici comment procéder:

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

Cela nous a permis de modifier la notification que nous présentons à nos utilisateurs.

Avec les autres options, procédez comme ci-dessus, en remplaçant 'actions' par la valeur nom du paramètre.