Guide de préparation à l'évaluation

4.3.1 Présentation des notifications Web push

Quelles fonctionnalités d'appareil mobile manque-t-il sur le Web ? Posez cette question à des développeurs, et vous verrez que la réponse qui reviendra le plus est les notifications push.

Lorsqu'ils activent les notifications Web push, les utilisateurs peuvent recevoir des actualités provenant de sites qu'ils aiment particulièrement. Les notifications push vous permettent ainsi de raviver l'intérêt des internautes en envoyant des contenus pertinents et personnalisés.

L'API Push et l'API Notification offrent tout un nouveau champ de possibilités pour susciter à nouveau l'intérêt de vos utilisateurs.

Deux technologies

La technologie push et la technologie de notification utilisent deux API différentes, mais complémentaires : la technologie push est invoquée lorsqu'un serveur fournit des informations à un service worker, tandis que la technologie de notification correspond à l'action d'un service worker ou d'un script de page Web qui affiche des informations à l'utilisateur.

Les service workers jouent-ils un rôle ?

Oui. La technologie push se base sur les service workers qui fonctionnent en arrière-plan. Ainsi, la seule fois qu'un code est exécuté pour une notification push (en d'autres termes, la seule fois que la batterie est utilisée) correspond au moment où l'utilisateur interagit avec la notification en cliquant dessus ou en la fermant.

Si vous ne connaissez pas bien les service workers, consultez l'article en anglais Service Workers: an Introduction. Par la suite, nous utiliserons le codage des service workers pour vous montrer comment mettre en œuvre les push et les notifications.

Morphologie d'une notification

Dans la prochaine section, nous vous présenterons tout un tas de photos. Mais, pour le moment, nous vous avons promis du codage. Alors, le voilà. Lors de l'enregistrement du service worker, faites appel à une fonctionnalité "showNotification" sur un objet d'enregistrement.

serviceWorkerRegistration.showNotification(title, options);

L'argument "title" apparaît sous la forme d'un titre dans la notification. L'argument "options" est un littéral d'objet qui définit les autres propriétés d'une notification. En général, un objet "options" ressemble à cela :

{
  "body": "Did you make a $1,000,000 purchase at Dr. Evil...",
  "icon": "images/ccard.png",
  "vibrate": [200, 100, 200, 100, 200, 100, 400],
  "tag": "request",
  "actions": [
    { "action": "yes", "title": "Yes", "icon": "images/yes.png" },
    { "action": "no", "title": "No", "icon": "images/no.png" }
  ]
}

Ce code génère une notification telle que celle présentée dans l'image. Il offre en général les mêmes capacités qu'une application native. Avant d'étudier plus en détail les caractéristiques de mise en œuvre de ces capacités, je vais vous montrer comment utiliser ces dernières efficacement. Nous allons décrire les mécaniques de mise en œuvre des notifications push, y compris le traitement des autorisations et des abonnements, l'envoi de messages et la réponse à ces derniers.

Qu'est-ce qu'une bonne notification ?

N'inondez pas vos utilisateurs de notifications, ou vous les perdrez à tout jamais. Faut-il vous en dire plus ? Oui, car ce n'est pas si simple.

Les notifications push sont une des capacités les plus utiles des applications natives, et elles sont désormais disponibles sur le Web. Pour en tirer le meilleur parti possible, les notifications doivent être opportunes, précises et pertinentes.

  1. Opportune : une notification est opportune quand elle apparaît au moment où les utilisateurs le souhaitent, quand elle survient à propos.
  2. Précise : une notification est précise quand elle contient des informations spécifiques qui permettent d'agir immédiatement.
  3. Pertinente : le message est pertinent quand il traite de personnes ou de sujets qui importent à l'utilisateur.

Comment essayer ?

Il existe différentes manières de se familiariser avec ces fonctionnalités avant de vraiment comprendre comment elles fonctionnent et de les mettre en œuvre pour de bon. Commencez par consulter notre propre exemple. Vous pouvez également utiliser le Notification Generator de Peter Beverloo. 

Ces informations vous-ont elles été utiles ?
Comment pouvons-nous l'améliorer ?