Comment afficher les notifications de mise à jour dans l'onglet Navigateur

Les sites Web et les applications Web avec un contenu fréquemment mis à jour doivent trouver un moyen d'attirer l'attention des utilisateurs pour les informer des mises à jour, en particulier lorsque les utilisateurs peuvent s'être éloignés de l'onglet où le site ou l'application est actif.. 

Il y a quelques modèles communs que vous verrez à l'état sauvage. Les sites Web sociaux tels que Facebook, Twitter et LinkedIn, qui reçoivent potentiellement un nouveau contenu toutes les quelques secondes, insèrent le numéro correspondant dans le titre de la page, indiquant le nombre de nouvelles mises à jour dans l'onglet. Trello, d'autre part, montre un minuscule badge rouge sur le favicon.

Notifications Trello, Facebook et Twitter

Dans ce tutoriel, nous allons reproduire cette forme de conception de commentaires en utilisant l'onglet du navigateur comme moyen de notifier les mises à jour aux utilisateurs. Regarde la démo alors voyons comment ça se passe.

Utilisation du titre du document

Nous allons commencer par ajouter le nombre de nouvelles mises à jour au titre de la page, comme le font Facebook et Twitter..

Dans un scénario réel, nous pourrions extraire des données de différentes manières (parlez-en à votre développeur convivial). Dans ce cas, nous supposerons que nous avons récupéré le nombre de mises à jour et que nous disposons du chiffre avec lequel nous pouvons jouer en JavaScript. Pour l'instant, il semble que nous n'ayons actuellement aucune mise à jour. Nous allons donc transmettre ce nombre à une variable:

var count = 0;

La prochaine sera la base de notre code où nous modifierons le titre du document. Tout d'abord, nous ajoutons titre du document qui récupérera le titre actuel de notre document:

var title = document.title;

Ensuite, nous créons une nouvelle fonction pour changer la chaîne dans ce titre:

function changeTitle () count ++; var newTitle = '(' + count + ')' + title; document.title = newTitle; 

Ici vous pouvez voir que nous utilisons le JavaScript ++ opérateur. Aux fins de notre démonstration, le ++ augmentera notre compter nombre par 1 pour chaque itération. Comme nous avons commencé avec 0, la prochaine itération reviendra 1. Nous utilisons le ++ opérateur pour simuler l'incrément de nombre, car nous n'avons pas accès à une API pour nous alimenter avec un nombre réel.

Ensuite, nous créons une autre nouvelle fonction qui exécutera le changeTitle () une fonction:

function newUpdate () update = setInterval (changeTitle, 2000);  var docBody = document.getElementById ('site-body'); docBody.onload = newUpdate; 

La fonction ci-dessus suppose que nous devons vérifier chaque nouvelle mise à jour. 2000 millisecondes (2 secondes). Notre fonction, changeTitle (), sera continuellement exécuté dans l'intervalle. Nous exécutons cette fonction dès que la page est chargée.

La première méthode est assez simple. Nous récupérons le numéro et le passons dans le titre. Vous pouvez changer les parenthèses qui entourent le numéro de () à [] ou en les changeant dans le changeTitle () une fonction.

Utiliser le favicon

Maintenant, nous allons essayer la deuxième approche, qui consiste à changer la favicon comme le fait l'application Web Trello. Pour cela, nous devrons préparer deux variantes de favicon, la deuxième variante étant l'alternative que nous afficherons chaque fois que nous recevons de nouvelles mises à jour..

Commencez par lier le premier favicon dans le document.

Puis définissez le chemin du nouveau favicon dans une variable JavaScript.

var iconNew = 'img / favicon-dot.gif'; 

Comme pour la première approche, nous allons également créer deux fonctions:

function changeFavicon () document.getElementById ('favicon'). href = iconNew;  function newUpdate () update = setInterval (changeFavicon, 3000); setTimeout (function () clearInterval (update);, 3100);  var docBody = document.getElementById ('site-body'); docBody.onload = newUpdate; 

La première fonction, changeFavicon (), remplacera notre favicon initial par celui qui porte l'insigne rouge. La deuxième fonction, nouvelle mise à jour(), exécutera la première fonction dans le délai spécifié.

Il semble qu'il y ait quelque chose de nouveau à regarder!

La seconde approche n’est pas aussi compliquée que vous l’auriez peut-être pensé au départ; il est en fait plus simple que le premier où nous avons mis à jour la chaîne de titre de la page. De plus, nous pouvons apporter plus de créativité dans le favicon alternatif. Par exemple, nous pourrions faire le badge rouge clignotant plutôt que toujours (soyez prudent maintenant…), ou peut-être changer la couleur et l'icône de favicon.

Remarque: Chrome ne prend pas en charge les favicons avec un GIF animé.

Utiliser Favico.js

Pour finir, nous allons maintenant utiliser une bibliothèque JavaScript appelée Favico.js, développée par Miroslav Magda. La bibliothèque fournit une API pratique avec une multitude d'options pour modifier le favicon, telles que l'affichage d'un badge ainsi que le nombre de mises à jour ensemble..

Pour commencer, en utilisant JavaScript, nous définissons un nouveau Favico instance qui définit la position du badge, l’animation, la couleur de fond ainsi que la couleur du texte.

var favicon = new Favico (position: 'up', animation: 'popFade', bgColor: '# dd2c00', textColor: '# fff0e2'); 

Ensuite, nous ajoutons quelques fonctions pour exécuter cette nouvelle instance et finalement afficher le badge dans la favicon..

var num = 0; function generateNum () num ++; return num;  function showFaviconBadge () var num = generateNum (); favicon.badge (num);  function newUpdate () update = setInterval (showFaviconBadge, 2000);  var docBody = document.getElementById ('site-body'); docBody.onload = newUpdate; 

Le code ressemble un peu à la première méthode que nous avons faite plus tôt. Nous commençons par créer la fonction qui simuler le nombre de mises à jour que nous allons afficher dans le badge. La deuxième fonction, showFaviconBadge (), est d'insérer le numéro dans le badge et d'afficher le badge dans la favicon. La dernière fonction nouvelle mise à jour() exécutera la deuxième fonction dans l'intervalle de temps spécifié, nous donnant ainsi l'impression de recevoir de nouvelles mises à jour.

Conclusion

Dans ce didacticiel, nous avons utilisé l'onglet du navigateur comme moyen de notification aux utilisateurs. Nous avons répliqué des méthodes qui sont couramment appliquées dans les sites Web populaires tels que Facebook, Twitter et Trello, tout en évaluant leurs limites..

Encore une fois, vous devrez probablement apporter quelques modifications pour l'adapter à votre application Web particulière, mais les exemples ci-dessous vous donnent un bon départ.!