En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de cookies pour réaliser des statistiques de visites. X

Contact

N'hésitez pas si vous avez une questions, une idée ou tout à autres choses à nous dire ! Vous pouvez également directement nous envoyer un mail à contact@lilleweb.fr.

Pour moi, les web app mobiles ont un très gros point faible : les notifications. J’ai découvert (d’après Can I use ) en écrivant ce tuto qu’elles commencent à être supportées partiellement sur Android KitKat ( Android 4.4 ).

Malgré cela, elles sont disponibles sur les applications desktop Chrome, Firefox et Safari.

On va découvrir comment les utiliser et surtout comment aller plus loin avec !

Les bases

Qu’est ce qu’une notification ?

Les notifications sont très populaires depuis leur arrivée sur iOS dans les applications natives. Omniprésentes dans nos systèmes mobiles, elles nous informent d’énormément de choses plus ou moins utiles. Elles sont cependant beaucoup moins utilisées sur les navigateurs car pour qu’une notification arrive, le site doit nécessairement être ouvert.

Une notification se présente sous la forme d’un bandeau rectangulaire d’aspect différent selon les navigateurs et qui présente l’avantage de venir se placer sur le bureau courant (sur mac) au-dessus de toutes les autres fenêtres. Une notification se compose d’un titre et d’une description, elle peut se fermer automatiquement (4s par défaut sur Firefox, il est possible comme on va le voir de définir soit même cette durée) ou manuellement. Il est également possible de tagger des notifications comme nous le verrons plus tard.

Visuel d'exemple d'une notification chrome Visuel d'exple d'une notification Firefox

A quoi servent-elles ?

Beaucoup moins utilisées que sur mobiles, elles restent cependant très utiles. Voici une liste non exhaustive de quelques idées d’utilisation :

  • Gmail les utilise très bien pour informer de l’arrivée d’un nouveau mail quand le site est déjà ouvert.
  • Slack informe de l’arrivée d’un nouveau message.
  • Tweetdeck prévient aussi des interactions que vous avez définies au préalable : mentions, messages privés, …

Comment faire apparaître une notification ?

Demander l’autorisation

Avant de pouvoir pousser une notification à l’utilisateur, il faut lui demander la permission. Durant cette étape obligatoire, un bandeau apparaîtra en haut du navigateur pour demander à l’utilisateur s’il les souhaite ou non.

Visuel d'exple d'une demande d'autorisation des notifications Chrome

Il faut pour cela appeler requestPermission de Notification, vérifier que la réponse est différente de l’état actuel et setter Notification.permission avec le nouveau status.

*Voici comment demander facilement la permission à l’utilisateur : *

  function requestPermission(){
    if (window.Notification && Notification.permission !== "granted") {
      Notification.requestPermission(function (status) {
        if (Notification.permission !== status) {
          Notification.permission = status;
        }
      });
    }
  }

On retrouve la vérification du support des notifications grâce à window.Notification et si l’utilisateur ne les pas encore acceptées. Après on retrouve l’apparition du bandeau de demande avec requestPermission(), la vérification que le statut change et sa modification.

Soulever une notification

Une notification est extrêmement simple à soulever. Il vous suffit de la créer grâce à new Notification() et de passer en paramètre les éléments essentiels : le titre et le contenu.

if (window.Notification && Notification.permission === "granted") {
  var notif = new Notification('Le Titre de ma notif', {body: 'Contenu de la notification qui pourra prendre deux lignes'});
}

Allons plus loin

Nous venons de voir qu’il est extrêmement simple de faire apparaître une notification, il serait donc dommage de s’arrêter là.

Donner une icône à votre notification

Une notification peut contenir une icône pour être facilement identifiable dans un flot important. Cette icône peut représenter le site d’où elle vient, une information sur son propriétaire ou même le contenu d’un message.

if (window.Notification && Notification.permission === "granted") {
  var notif = new Notification('Titre', {body: 'Contenu ', icon : 'http://lilleweb.fr/src/img/Logo/Solo/solo-avec-fond.png'});
}

Récupérer le click sur la notification

Le click se gère grâce à onclick sur votre notification :

this.notification.onclick = function(){
  console.log('vous avez cliqué sur la notification');
}

Vous pouvez remplacer le console.log() par l’action de votre choix, par exemple une redirection :

var url = 'http://www.lilleweb.fr';

this.notification.onclick = function(){
  if(url.indexOf('http://') != -1){
    document.location.href = url;
  } else{
    document.location.href = "http://"+url;
  }
}

Ici, vous vérifiez que l’URL cible commence bien par “http://”, si c’est le cas vous redirigez vers cette dernière, si ce n’est pas le cas, vous la parsez correctement.

Tager vos notifications

A mes yeux, l’attribut tag est le plus pratique. Les notifications ont le défaut de toutes se réafficher dès qu’il y en a une nouvelle si vous ne les avez pas fermées, comme sur Tweetdeck ou Slack.

Une nouvelle notification ayant le même attribut tag qu’une plus ancienne supprimera cette dernière. Les notifications affichent donc le dernier élément intéressant au lieu d’afficher tout ce qui n’a pas été fermé. Encore une fois, la web API notification permet cela très facilement.

if (window.Notification && Notification.permission === "granted") {
  var notif = new Notification('Titre', {body: 'Contenu ', tag : 'js'});
}

Dans cet exemple, toute nouvelle notification ayant un tag ‘js’ supprimera les anciennes ayant également le tag ‘js’.

Conclusion

Nous venons de découvrir comment faire apparaître une notification enrichie avec un tag et une icône après avoir demandé la permission de l’utilisateur. Un bout de code résumant tout cela s’impose :

if (window.Notification && Notification.permission !== "granted") {
  Notification.requestPermission(function (status) {
    if (Notification.permission !== status) {
      Notification.permission = status;
    }
  });
}

if (window.Notification && Notification.permission === "granted") {
  var notif = new Notification('Lille Web', {body: 'Un article sur les notifications est disponibles !', tag : 'js', icon : 'http://lilleweb.fr/src/img/Logo/Solo/solo-avec-fond.png'});
}

Vous pouvez retrouver aussi un repo où je fais quelques “expériences” sur GitHub.

Johnathan MEUNIER Johnathan MEUNIER Profil Github de Johnathan MEUNIER

Développeur front-end à altima° dans le pôle optimisation et offres innovantes, Johnathan est passionné de web depuis plusieurs années. Spécialisé en JavaScript, il est ouvert à toutes les technos tant qu'elles apportent un plus à la communauté.
Il vous donnera aussi son avis sur l'actu High-Tech.

comments powered by Disqus

Partager