La version 5 d'HTML implémente une API de notification. Ainsi, une page Web peut décider d'envoyer des messages sous forme de notification système, même si le site n'est pas en cours d'utilisation par l'internaute. L'implémentation est relativement simple mais le plugin Push.js nous permet d'améliorer sa mise en place.

Tous les navigateurs modernes permettent l'utilisation de cette API (à l'exception récurrente d'Internet Explorer 11...).

Comme je le disais en intro, la mise en place de l'API notification en Javascript est simple mais un peu pénible à écrire : il faut vérifier que l'utilisateur a bien autorisé l'affichage des notifications, etc, etc...

Push.js permet d'aller plus vite et de se passer de ce genre de contrôles. Vous n'avez plus qu'à gérer la création de vos notifications et le plugin se charge de tout le reste ! Le fonctionnement au sein du navigateur reste identique, c'est-à-dire que l'internaute devra autoriser ou non l'affichage des notifications.

Installation

L'installation de Push.js se fait soit via Bower ou le paquet NPM. Vous avez toujours la possibilité de récupérer le script Javascript sur le dépôt Github (push.min.js) et de l'installer dans votre environnement.

Installation via Bower :

bower install push.js --save

Via NPM :

npm install push.js --save

Création d'une notification

Pour créer une notification, rien de plus simple :

Push.create('Ma super notification !');

Au lancement de la page, le navigateur demande les autorisations nécessaires à l'affichage des notifications, pour le domaine concerné :

Push.js dispose de plusieurs options, la liste complète est ici. Vous pouvez gérer le temps de fermeture (timeout), l'affichage d'une icône (icon), etc...

Voici un exemple plus consistant :

Push.create("Un nouvel article a été publié sur ShevArezo`blog !", {
    body: "CanIUse en ligne de commande",
    icon: 'icon.png',
    timeout: 4000,
    onClick: function () {
        window.open('http://blog.shevarezo.fr/post/2015/08/13/caniuse-ligne-commande-css', '_self');
    }
});

Ce code a pour but d'afficher une notification durant 4 secondes. Au clic sur celle-ci, l'article en question se chargera.

Conclusion

Simple et terriblement efficace, Push.js vous permet d'économiser du code sur les vérifications des autorisations et vous permet de vous concentrer sur l'essentiel : afficher des notifications !