Notification Web Push JS : Guide complet pour votre site web

Aujourd’hui, le monde du web évolue rapidement et il devient essentiel pour tout propriétaire de site de rester connecté avec ses visiteurs. Les notifications web push sont un outil puissant qui permet d’alerter vos utilisateurs directement sur leur navigateur, qu’ils soient sur ordinateur ou mobile, sans avoir besoin d’ouvrir votre site.

Contrairement aux emails, elles sont instantanées et visibles même lorsque l’utilisateur navigue sur un autre site ou utilise d’autres applications.

Dans ce tutoriel, nous allons découvrir en détail ce que sont les notifications web push, leur utilité, leurs avantages et leurs limites, avant de passer à la mise en place concrète sur votre site.

Vous apprendrez à configurer un système complet de notifications web push, à comprendre le rôle de chaque élément technique, et enfin à envoyer vos premières alertes à vos visiteurs.

Les notifications web push sont devenues incontournables pour les sites souhaitant améliorer l’engagement des utilisateurs. Que ce soit pour annoncer une nouvelle publication, une promotion, ou rappeler un événement, elles permettent de toucher vos visiteurs au bon moment. Mais leur mise en place nécessite une compréhension claire de leur fonctionnement et des bonnes pratiques à suivre pour ne pas déranger vos utilisateurs. Nous allons aborder tout cela avec des explications simples et accessibles, afin que même si vous n’êtes pas un expert en développement, vous puissiez suivre et mettre en place ce système sur votre site.

Qu’est-ce qu’une notification web push ?
À quoi servent les notifications web push ?
Les avantages des notifications web push
- Les limites et contraintes des notifications web push
Installer et configurer les notifications web push
Exemple concret et bonnes pratiques pour vos notifications web push
Utiliser un plugin gratuit sur WordPress pour gérer les notifications

Qu’est-ce qu’une notification web push ?

Une notification web push est un message envoyé depuis un site web vers l’utilisateur, directement sur son navigateur. Elle apparaît généralement sous forme d’alerte visuelle, accompagnée d’un titre, d’un message et parfois d’une image ou d’un bouton. La particularité de cette notification est qu’elle peut être reçue même lorsque l’utilisateur n’a pas votre site ouvert.

Cela diffère des notifications classiques d’application mobile, car aucune installation d’application n’est nécessaire. L’utilisateur doit simplement accepter de recevoir ces notifications lors de la demande d’autorisation de votre site.

Techniquement, les notifications web push reposent sur un mécanisme appelé Service Worker. Il s’agit d’un script qui s’exécute en arrière-plan sur le navigateur et qui permet de recevoir et d’afficher les notifications même lorsque l’utilisateur ne navigue pas activement sur votre site. Le Service Worker fonctionne en lien avec la Push API et le Push Service fourni par le navigateur, qui se charge de transmettre le message à l’utilisateur.

La notification web push est un outil puissant qui permet à votre site de rester visible et pertinent auprès de vos visiteurs, sans dépendre des emails ou des réseaux sociaux.

Pour allez plus loin avec le services worker, consultez Les service workers : la mise en cache des fichiers d’un site web.

À quoi servent les notifications web push ?

Les notifications web push ont plusieurs utilisations concrètes et stratégiques. Elles permettent d’informer vos visiteurs en temps réel sur les nouveautés ou les actions importantes à effectuer sur votre site.

Par exemple, vous pouvez prévenir vos abonnés de la publication d’un nouvel article, d’une offre promotionnelle limitée, ou encore de l’évolution d’une commande ou d’un événement. L’objectif est d’améliorer l’engagement et la fidélisation des utilisateurs.

Une autre utilisation importante est la relance des visiteurs. Les notifications web push peuvent rappeler à un utilisateur qui n’est pas revenu sur votre site depuis un certain temps que de nouvelles informations ou offres l’attendent.

Cela contribue à augmenter le trafic et à renforcer la présence de votre site dans l’esprit des utilisateurs. Enfin, elles peuvent également servir à envoyer des messages ciblés, en fonction des préférences ou du comportement des visiteurs, ce qui améliore la pertinence des communications et la satisfaction utilisateur.

En pratique, bien utilisées, les notifications web push sont un levier de communication direct et immédiat. Elles permettent de maintenir un lien constant avec vos visiteurs et d’augmenter leur interaction avec votre contenu, vos produits ou vos services.

Les avantages des notifications web push

Les notifications web push offrent de nombreux avantages par rapport à d’autres canaux de communication. Tout d’abord, elles sont instantanées. Contrairement aux emails qui peuvent rester non lus pendant des heures ou des jours, une notification web push apparaît immédiatement sur le navigateur de l’utilisateur. Cela permet de transmettre des informations urgentes ou importantes avec efficacité.

Ensuite, elles sont visibles même lorsque l’utilisateur ne consulte pas activement votre site. Cette caractéristique est particulièrement précieuse pour les sites de commerce en ligne, les blogs ou les plateformes de contenu qui souhaitent maintenir un engagement constant.

De plus, les notifications web push sont simples à personnaliser. Vous pouvez adapter le message, l’image, le titre, et même ajouter des boutons d’action pour diriger l’utilisateur vers une page spécifique de votre site.

Un autre avantage est qu’elles n’exigent aucune installation d’application.

Contrairement aux notifications mobiles classiques, elles ne nécessitent pas le téléchargement d’une application dédiée. Cela réduit la barrière à l’entrée pour vos utilisateurs et permet d’élargir votre audience. Enfin, elles sont très mesurables. Vous pouvez suivre le taux d’ouverture, le clic et l’engagement des notifications, ce qui vous permet d’optimiser vos campagnes et d’adapter vos messages en fonction des résultats obtenus.

Les limites et contraintes des notifications web push

Malgré leurs nombreux avantages, les notifications web push présentent également certaines limites qu’il est important de connaître. La première limite est liée à l’autorisation utilisateur. L’utilisateur doit accepter explicitement de recevoir les notifications, et beaucoup choisissent de refuser. Il est donc crucial de présenter la demande de manière stratégique pour maximiser les abonnements.

Une autre limite concerne la compatibilité des navigateurs. Bien que la majorité des navigateurs modernes supportent les notifications web push, certains navigateurs mobiles, comme Safari sur iOS, ont des limitations spécifiques. Cela peut réduire la portée de vos notifications sur certains appareils.

Enfin, il est important de ne pas abuser des notifications. Un envoi trop fréquent ou non pertinent peut entraîner une désinscription rapide ou une mauvaise image de votre site. Les notifications doivent être ciblées, pertinentes et apporter une réelle valeur à vos visiteurs.

Installer et configurer les notifications web push

Avant de commencer, assurez-vous que votre site est en HTTPS, car les notifications web push ne fonctionnent pas sur une connexion non sécurisée. Si vous testez en local, vous pouvez utiliser localhost, qui est considéré comme sécurisé, ou installer un certificat SSL pour un environnement de test.

Ensuite, vous devez choisir un serveur capable d’exécuter vos scripts backend. Vous pouvez utiliser PHP, Node.js, Python ou tout autre langage côté serveur. Pour ce tutoriel, nous utiliserons PHP, car il est simple à mettre en place et largement utilisé.

Étape 1 : Créer le Service Worker

Le Service Worker est un script qui s’exécute en arrière-plan dans le navigateur. Il permet de recevoir et d’afficher les notifications même lorsque l’utilisateur ne navigue pas activement sur votre site.

Créez un fichier nommé sw.js à la racine de votre site et ajoutez le code suivant :

self.addEventListener('push', function(event) {
    const data = event.data.json();
    const options = {
        body: data.body,
        icon: data.icon || '/icon.png',
        badge: data.badge || '/badge.png',
        data: data.url
    };
    event.waitUntil(
        self.registration.showNotification(data.title, options)
    );
});

self.addEventListener('notificationclick', function(event) {
    event.notification.close();
    event.waitUntil(
        clients.openWindow(event.notification.data)
    );
});

L’événement push est déclenché lorsque le serveur envoie une notification.
event.data.json() récupère les données envoyées par le serveur.
showNotification affiche la notification avec un titre, un message, une icône et un lien de redirection.
L’événement notificationclick permet de réagir au clic de l’utilisateur et de l’orienter vers une page de votre site.

Étape 2 : Enregistrer le Service Worker sur le site

Pour que le Service Worker fonctionne, vous devez l’enregistrer depuis votre page principale avec un script JavaScript :

Formation web et informatique - Alban Guillier - Formateur

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

if ('serviceWorker' in navigator && 'PushManager' in window) {
    navigator.serviceWorker.register('/sw.js')
    .then(function(registration) {
        console.log('Service Worker enregistré avec succès.');
        return Notification.requestPermission();
    })
    .then(function(permission) {
        if (permission === 'granted') {
            console.log('Permission de notification accordée');
            subscribeUser();
        } else {
            console.log('Permission de notification refusée');
        }
    });
}

function subscribeUser() {
    navigator.serviceWorker.ready.then(function(registration) {
        const vapidPublicKey = '<VOTRE_CLE_PUBLIQUE_VAPID>';
        const convertedKey = urlBase64ToUint8Array(vapidPublicKey);

        registration.pushManager.subscribe({
            userVisibleOnly: true,
            applicationServerKey: convertedKey
        })
        .then(function(subscription) {
            console.log('Utilisateur abonné:', subscription);
            // Envoyer l'objet d'abonnement au serveur
            fetch('/save-subscription.php', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(subscription)
            });
        });
    });
}

function urlBase64ToUint8Array(base64String) {
    const padding = '='.repeat((4 - base64String.length % 4) % 4);
    const base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/');
    const rawData = window.atob(base64);
    return Uint8Array.from([...rawData].map(c => c.charCodeAt(0)));
}

On vérifie que le navigateur supporte les notifications et le Service Worker.
Notification.requestPermission() demande à l’utilisateur l’autorisation de recevoir les notifications.
PushManager.subscribe crée l’abonnement de l’utilisateur en utilisant la clé VAPID publique.
fetch envoie les données d’abonnement au serveur pour les sauvegarder et pouvoir envoyer des notifications ultérieurement.

Étape 3 : Générer les clés VAPID

Les clés VAPID servent à sécuriser la communication entre votre serveur et les navigateurs. Vous pouvez les générer avec des outils en ligne ou via des bibliothèques PHP. Elles sont composées d’une clé publique et d’une clé privée.

Ces clés seront utilisées pour :

Inscrire le navigateur de l’utilisateur à votre service de notifications.
Envoyer des notifications depuis votre serveur de manière sécurisée.

Étape 4 : Sauvegarder les abonnements côté serveur

Créez un fichier PHP save-subscription.php pour enregistrer les abonnements dans une base de données ou un fichier :

$data = json_decode(file_get_contents('php://input'), true);
if($data) {
    file_put_contents('subscriptions.json', json_encode($data) . PHP_EOL, FILE_APPEND);
}

file_get_contents('php://input') récupère les données envoyées par le navigateur.
json_decode transforme ces données en tableau PHP.
file_put_contents sauvegarde l’abonnement dans un fichier JSON pour pouvoir l’utiliser ultérieurement.

Il est préférable, dans un projet réel, de stocker les abonnements dans une base de données, afin de pouvoir gérer les désabonnements et segmenter vos notifications.

Étape 5 : Envoyer une notification depuis le serveur

Pour envoyer des notifications, vous pouvez utiliser la librairie PHP web-push-php :

Installez la librairie via Composer :

composer require minishlink/web-push

Créez un script PHP send-notification.php :

use Minishlink\WebPush\WebPush;
use Minishlink\WebPush\Subscription;

require 'vendor/autoload.php';

$auth = [
    'VAPID' => [
        'subject' => 'mailto:[email protected]',
        'publicKey' => '<VOTRE_CLE_PUBLIQUE_VAPID>',
        'privateKey' => '<VOTRE_CLE_PRIVEE_VAPID>',
    ],
];

$webPush = new WebPush($auth);

// Charger les abonnements
$subscriptions = file('subscriptions.json', FILE_IGNORE_NEW_LINES);
foreach($subscriptions as $subJson) {
    $sub = Subscription::create(json_decode($subJson, true));
    $webPush->sendNotification(
        $sub,
        json_encode(['title'=>'Nouvelle notification','body'=>'Voici votre première notification web push !','url'=>'https://votresite.fr'])
    );
}

foreach ($webPush->flush() as $report) {
    if ($report->isSuccess()) {
        echo "Notification envoyée à {$report->getEndpoint()}\n";
    } else {
        echo "Échec pour {$report->getEndpoint()}: {$report->getReason()}\n";
    }
}

WebPush est la classe principale pour envoyer des notifications.
Subscription::create transforme l’abonnement JSON en objet utilisable.
sendNotification envoie la notification avec les informations : titre, message et lien de redirection.
flush() traite toutes les notifications envoyées et retourne un rapport de succès ou d’échec.

Étape 6 : Tester votre système

Pour tester votre système :

Ouvrez votre site dans un navigateur compatible.
Acceptez la demande de notification.
Exécutez send-notification.php depuis votre serveur.
La notification devrait apparaître sur votre navigateur, même si vous êtes sur un autre site ou dans un autre onglet.

Cela confirme que votre Service Worker fonctionne correctement et que le serveur est capable d’envoyer des notifications aux utilisateurs abonnés.

Exemple concret et bonnes pratiques pour vos notifications web push

Imaginons que vous possédez un blog ou un site d’actualité et que vous souhaitez informer vos visiteurs chaque fois qu’un nouvel article est publié. Avec les notifications web push, vous pouvez envoyer un message instantané à tous les utilisateurs abonnés, les incitant à revenir lire votre contenu.

Étape 1 : Créer le contenu de la notification

Une notification doit être claire et concise. Elle doit contenir un titre, un message et un lien vers la page concernée. Par exemple :

Titre : « Nouvel article disponible ! »
Message : « Découvrez notre dernier article sur les bonnes pratiques en développement web. »
URL : lien direct vers l’article.

Vous pouvez également ajouter une icône ou un badge pour rendre la notification plus attractive visuellement.

Étape 2 : Adapter le script d’envoi

Reprenons notre script PHP send-notification.php et adaptons-le pour qu’il envoie des notifications pour un nouvel article :

use Minishlink\WebPush\WebPush;
use Minishlink\WebPush\Subscription;

require 'vendor/autoload.php';

$auth = [
    'VAPID' => [
        'subject' => 'mailto:[email protected]',
        'publicKey' => '<VOTRE_CLE_PUBLIQUE_VAPID>',
        'privateKey' => '<VOTRE_CLE_PRIVEE_VAPID>',
    ],
];

$webPush = new WebPush($auth);

// Charger les abonnements
$subscriptions = file('subscriptions.json', FILE_IGNORE_NEW_LINES);

foreach($subscriptions as $subJson) {
    $sub = Subscription::create(json_decode($subJson, true));
    $webPush->sendNotification(
        $sub,
        json_encode([
            'title'=>'Nouvel article disponible !',
            'body'=>'Découvrez notre dernier article sur les bonnes pratiques en développement web.',
            'url'=>'https://votresite.fr/nouvel-article',
            'icon'=>'/icon-article.png',
            'badge'=>'/badge-article.png'
        ])
    );
}

foreach ($webPush->flush() as $report) {
    if ($report->isSuccess()) {
        echo "Notification envoyée avec succès à {$report->getEndpoint()}\n";
    } else {
        echo "Échec pour {$report->getEndpoint()}: {$report->getReason()}\n";
    }
}

Chaque utilisateur abonné reçoit la notification avec le titre et le message personnalisés.
Le champ url permet de rediriger l’utilisateur vers la page de l’article lorsqu’il clique sur la notification.
Les champs icon et badge ajoutent un visuel à la notification, ce qui augmente le taux d’ouverture.
La boucle flush() garantit que toutes les notifications sont traitées et renvoie un rapport pour vérifier le succès de l’envoi.

Étape 3 : Automatiser l’envoi

Pour que vos notifications soient réellement efficaces, il est recommandé de les automatiser. Vous pouvez par exemple :

Ajouter un hook sur votre CMS ou site pour déclencher le script à chaque nouvelle publication.
Planifier un cron job pour envoyer des notifications régulières à des horaires optimaux.
Segmenter les utilisateurs en fonction de leurs préférences (ex. sujets qui les intéressent) pour envoyer uniquement les notifications pertinentes.

Cette automatisation permet de maintenir l’engagement des utilisateurs sans avoir à envoyer manuellement chaque notification.

Bonnes pratiques pour les notifications web push

Pour maximiser l’efficacité de vos notifications et éviter de déranger vos utilisateurs, certaines bonnes pratiques sont essentielles :

Demander la permission au bon moment
Ne demandez pas la permission dès que l’utilisateur arrive sur le site. Attendez qu’il ait consulté un contenu ou interagi avec votre site. Une demande trop tôt entraîne souvent un refus.
Segmenter vos notifications
Tous vos visiteurs ne sont pas intéressés par le même contenu. Proposez des catégories ou options de notifications pour que chaque utilisateur reçoive uniquement ce qui l’intéresse.
Limiter la fréquence
Trop de notifications peuvent rapidement fatiguer l’utilisateur et provoquer des désabonnements. Définissez une fréquence raisonnable, par exemple une notification par semaine ou par événement majeur.
Rédiger des messages clairs et attractifs
Le titre doit être concis et accrocheur. Le message doit aller droit au but et inciter l’utilisateur à cliquer. N’utilisez pas un langage trop promotionnel ou trompeur.
Suivre les performances
Analysez le taux de clics et le taux de désabonnement. Ces indicateurs permettent de savoir si vos notifications sont pertinentes et appréciées, et d’ajuster votre stratégie.
Prévoir la désinscription
Les utilisateurs doivent pouvoir se désabonner facilement. Cela peut être fait via un lien dans les paramètres du site ou en gérant la suppression des abonnements côté serveur.

Exemple complet d’utilisation

Pour illustrer tout ce que nous avons vu, imaginons que vous avez un site d’actualité et que vous souhaitez informer vos visiteurs lorsqu’un nouvel article est publié sur le développement web :

L’utilisateur visite votre site et consulte un article intéressant.
Après avoir lu l’article, une fenêtre apparaît pour demander l’autorisation de recevoir les notifications.
L’utilisateur accepte et son abonnement est enregistré dans votre base de données.
Le lendemain, un nouvel article est publié. Votre script PHP s’exécute automatiquement et envoie la notification à tous les abonnés.
L’utilisateur reçoit la notification sur son navigateur, voit le titre et le message, et clique pour lire l’article directement sur votre site.

Grâce à ce système, vous maintenez le lien avec vos visiteurs, augmentez le trafic sur votre site et améliorez l’engagement sans dépendre des emails ou des réseaux sociaux.

Utiliser un plugin gratuit sur WordPress pour gérer les notifications

Si votre site est construit avec WordPress, vous avez la chance de pouvoir simplifier grandement la mise en place des notifications web push grâce à des plugins gratuits. Ces extensions vous évitent d’avoir à écrire du code complexe et vous offrent une interface claire pour configurer et envoyer vos messages.

L’un des plugins gratuits les plus populaires est OneSignal Push Notifications. Ce plugin est largement utilisé, régulièrement mis à jour, et offre une version gratuite suffisante pour la plupart des projets. Avec lui, vous pouvez envoyer des notifications automatiques dès qu’un nouvel article est publié, ou même planifier des envois manuels pour mettre en avant une promotion ou un contenu spécifique.

L’installation est très simple. Depuis votre tableau de bord WordPress, allez dans la section des extensions, recherchez « OneSignal », puis installez et activez le plugin. Une fois activé, vous serez guidé pas à pas pour connecter votre site à la plateforme OneSignal. Cette étape est essentielle car elle permet de générer les clés d’API nécessaires au bon fonctionnement du service. Le processus est bien expliqué et ne demande pas de compétences techniques poussées.

Une fois la configuration terminée, les visiteurs de votre site verront apparaître une petite invitation leur proposant d’accepter les notifications. Ceux qui acceptent recevront ensuite vos messages directement dans leur navigateur, même lorsqu’ils ne sont plus sur votre site. Vous pouvez personnaliser le message d’invitation, choisir le style du bouton d’acceptation et même segmenter vos abonnés en fonction de leurs préférences.

Le grand avantage de ce plugin est qu’il vous permet de gérer vos notifications depuis WordPress, sans avoir besoin d’ouvrir un autre outil ou d’écrire du code JavaScript complexe. Pour les créateurs de contenu, les blogueurs ou les petites entreprises, cela représente un gain de temps considérable.

Bien entendu, la version gratuite présente certaines limites, comme le nombre maximal d’abonnés ou des options avancées de personnalisation réservées aux formules payantes. Cependant, pour débuter, c’est une solution idéale qui vous permettra de tester l’efficacité des notifications web push sans investir d’argent.

Une notification web push est un outil moderne et efficace pour communiquer directement avec vos visiteurs, augmenter l’engagement et fidéliser votre audience.

Leur installation, bien que technique, est accessible si l’on suit les étapes correctement : configuration du Service Worker, génération des clés VAPID, enregistrement des abonnements et envoi des notifications depuis le serveur.

La puissance de cet outil réside dans sa capacité à toucher l’utilisateur instantanément et de manière ciblée, même lorsqu’il ne consulte pas activement votre site. Bien utilisées, elles peuvent transformer votre site en un véritable canal de communication direct et améliorer significativement votre visibilité.

Enfin, les bonnes pratiques – demander la permission au bon moment, segmenter vos utilisateurs, limiter la fréquence des notifications et analyser les résultats – sont essentielles pour tirer le meilleur parti des notifications web push et offrir une expérience utilisateur agréable et pertinente.

En résumé, en intégrant correctement les notifications web push sur votre site, vous disposez d’un levier puissant pour informer, fidéliser et engager vos visiteurs, tout en restant moderne et compétitif sur le web.

Live on Twitch

Alban

Fondateur de l’agence Créa-troyes.
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr