Les messages push constituent un moyen simple et efficace de réengager vos utilisateurs. Dans cet atelier de programmation, vous allez apprendre à ajouter des notifications push à votre application Web.
Points abordés
- S'abonner ou se désabonner aux messages push
- Gérer les messages push entrants
- Afficher une notification
- Répondre aux clics sur les notifications
Prérequis
- Chrome 52 ou version ultérieure
- Web Server for Chrome ou le serveur Web de votre choix
- Un éditeur de texte
- Connaissances de base en HTML, CSS, JavaScript et dans les outils pour les développeurs Chrome
- L'exemple de code (voir "Configurer")
Télécharger l'exemple de code
Deux options s'offrent à vous pour obtenir l'exemple de code de cet atelier de programmation :
- Clonez le dépôt Git :
git clone https://github.com/GoogleChrome/push-notifications.git
- Téléchargez le fichier ZIP :
Si vous téléchargez la source en tant que fichier ZIP, la décompression vous donne un dossier racine push-notifications-master.
Installer et valider le serveur Web
Bien que vous soyez libre d'utiliser votre propre serveur Web, cet atelier de programmation est conçu pour fonctionner correctement avec l'application Web Server for Chrome. Si vous n'avez pas encore installé cette application, vous pouvez la télécharger depuis le Chrome Web Store :
Installer le serveur Web pour Chrome
Après avoir installé l'application de serveur Web pour Chrome, cliquez sur le raccourci Applications dans la barre des favoris :
Dans la fenêtre "Applications", cliquez sur l'icône "Serveur Web" :
La boîte de dialogue suivante s'affiche. Elle vous permet de configurer votre serveur Web local :
Cliquez sur le bouton Choisir un dossier, puis sélectionnez le dossier app dans le dossier push-notifications que vous avez téléchargé. Cela vous permet de diffuser votre travail en cours via l'URL indiquée dans la section Web Server URL(s) de la boîte de dialogue.
Sous Options, cochez la case Afficher automatiquement l'index.html, comme indiqué ci-dessous :
Arrêtez ensuite le serveur et redémarrez-le en faisant glisser le bouton Web Server: STARTED (Serveur Web : DÉMARRÉ) vers la gauche, puis de nouveau vers la droite.
Cliquez sur l'URL du serveur Web pour accéder à votre site dans votre navigateur Web. Une page semblable à celle-ci devrait s'afficher. Toutefois, il est possible que l'adresse 127.0.0.1:8887 s'affiche :
Mettre à jour le service worker
Lors du développement, il est utile de s'assurer que votre service worker est toujours à jour et qu'il intègre les dernières modifications.
Pour configurer cette fonctionnalité dans Chrome :
- Accédez à l'onglet Push Codelab.
- Ouvrez les outils de développement : Ctrl+Maj+I sous Windows et Linux, Cmd+Option+I sous macOS.
- Sélectionnez le panneau Application, cliquez sur l'onglet Service Workers, puis cochez la case Update on Reload (Mettre à jour lors du rechargement). Lorsque cette case est cochée, le service worker est mis à jour de force chaque fois que la page est rechargée.
Dans votre répertoire app, vous devriez voir un fichier vide nommé sw.js. Ce fichier sera votre service worker. Pour le moment, vous pouvez le laisser vide. Vous y ajouterez du code plus tard.
Tout d'abord, vous devez enregistrer ce fichier en tant que service worker.
La page app/index.html se charge scripts/main.js. Vous enregistrez votre service worker dans ce fichier JavaScript.
Ajoutez le code suivant à scripts/main.js :
if ('serviceWorker' in navigator && 'PushManager' in window) {
console.log('Service Worker and Push are supported');
navigator.serviceWorker.register('sw.js')
.then(function(swReg) {
console.log('Service Worker is registered', swReg);
swRegistration = swReg;
})
.catch(function(error) {
console.error('Service Worker Error', error);
});
} else {
console.warn('Push messaging is not supported');
pushButton.textContent = 'Push Not Supported';
}Ce code vérifie si les service workers et la messagerie push sont compatibles avec votre navigateur. S'ils sont compatibles, le code enregistre votre fichier sw.js.
Essayer
Vérifiez vos modifications en actualisant l'onglet Atelier de programmation Push dans le navigateur.
Consultez la console dans les outils pour les développeurs Chrome pour trouver un Service Worker is registered message, comme suit :
Obtenir les clés du serveur d'application
Pour suivre cet atelier de programmation, vous devez générer des clés de serveur d'application. Vous pouvez le faire sur le site associé : web-push-codelab.glitch.me.
Vous pouvez générer une paire de clés publique et privée.
Copiez votre clé publique dans scripts/main.js en remplaçant la valeur <Your Public Key> :
const applicationServerPublicKey = '<Your Public Key>';Important : Vous ne devez jamais placer votre clé privée dans votre application Web.
Pour le moment, le bouton Activer de l'application Web est désactivé et ne peut pas être cliqué. En effet, il est recommandé de désactiver le bouton-poussoir par défaut et de l'activer une fois que vous savez que la messagerie push est compatible avec le navigateur et que vous pouvez vérifier si l'utilisateur est actuellement abonné à la messagerie ou non.
Vous devrez créer deux fonctions dans scripts/main.js :
initializeUIpour vérifier si l'utilisateur est actuellement abonnéupdateBtnpour activer votre bouton et modifier le texte selon que l'utilisateur est abonné ou non.
Ajoutez une fonction initializeUI à main.js, comme suit :
function initializeUI() {
// Set the initial subscription value
swRegistration.pushManager.getSubscription()
.then(function(subscription) {
isSubscribed = !(subscription === null);
if (isSubscribed) {
console.log('User IS subscribed.');
} else {
console.log('User is NOT subscribed.');
}
updateBtn();
});
}Votre nouvelle méthode utilise le swRegistration de l'étape précédente, obtient la propriété pushManager et appelle getSubscription() sur celle-ci.
pushManager. getSubscription() renvoie une promesse qui se résout avec l'abonnement en cours, le cas échéant. Sinon, elle renvoie null. Vous pouvez ainsi vérifier si l'utilisateur est déjà abonné, définir la valeur de isSubscribed, puis appeler updateBtn() pour mettre à jour le bouton.
Ajoutez la fonction updateBtn() à main.js :
function updateBtn() {
if (isSubscribed) {
pushButton.textContent = 'Disable Push Messaging';
} else {
pushButton.textContent = 'Enable Push Messaging';
}
pushButton.disabled = false;
}Cette fonction active le bouton et modifie le texte du bouton selon que l'utilisateur est abonné ou non.
La dernière chose à faire est d'appeler initializeUI() lorsque votre service worker est enregistré dans main.js :
navigator.serviceWorker.register('sw.js')
.then(function(swReg) {
console.log('Service Worker is registered', swReg);
swRegistration = swReg;
initializeUI();
})Essayer
Actualisez l'onglet Push Codelab. Vous devriez voir que le bouton Enable Push Messaging (Activer la messagerie push) est maintenant activé (vous pouvez cliquer dessus) et que User is NOT subscribed s'affiche dans la console.
À mesure que vous progresserez dans cet atelier de programmation, vous devriez voir le texte du bouton changer chaque fois que vous vous abonnez ou vous désabonnez.
Pour le moment, le bouton Enable Push Messaging (Activer la messagerie push) ne fait pas grand-chose. Nous allons résoudre ce problème.
Dans la fonction initializeUI(), ajoutez un écouteur de clics pour votre bouton :
function initializeUI() {
pushButton.addEventListener('click', function() {
pushButton.disabled = true;
if (isSubscribed) {
// TODO: Unsubscribe user
} else {
subscribeUser();
}
});
// Set the initial subscription value
swRegistration.pushManager.getSubscription()
.then(function(subscription) {
isSubscribed = !(subscription === null);
updateSubscriptionOnServer(subscription);
if (isSubscribed) {
console.log('User IS subscribed.');
} else {
console.log('User is NOT subscribed.');
}
updateBtn();
});
}Lorsque l'utilisateur clique sur le bouton, vous le désactivez pour vous assurer qu'il ne peut pas cliquer dessus une deuxième fois, car l'abonnement aux messages push peut prendre un certain temps.
Appelez ensuite subscribeUser() si l'utilisateur n'est pas actuellement abonné. Pour ce faire, vous devez coller le code suivant dans scripts/main.js :
function subscribeUser() {
const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
swRegistration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: applicationServerKey
})
.then(function(subscription) {
console.log('User is subscribed.');
updateSubscriptionOnServer(subscription);
isSubscribed = true;
updateBtn();
})
.catch(function(error) {
console.error('Failed to subscribe the user: ', error);
updateBtn();
});
}Examinons ce que fait ce code et comment il abonne l'utilisateur aux messages push.
Tout d'abord, vous prenez la clé publique du serveur d'application, qui est encodée en Base64 URL-safe, et vous la convertissez en UInt8Array, car il s'agit de l'entrée attendue de l'appel subscribe(). La fonction urlB64ToUint8Array() se trouve en haut de scripts/main.js.
Une fois la valeur convertie, vous appelez la méthode subscribe() sur le pushManager de votre service worker, en transmettant la clé publique de votre serveur d'application et la valeur userVisibleOnly: true.
const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
swRegistration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: applicationServerKey
})Le paramètre userVisibleOnly vous assure qu'une notification s'affichera chaque fois qu'un message push sera envoyé. Actuellement, cette valeur est obligatoire et doit être définie sur "true".
L'appel de subscribe() renvoie une promesse qui sera résolue après les étapes suivantes :
- L'utilisateur a autorisé l'affichage des notifications.
- Le navigateur a envoyé une requête réseau à un service de notifications push pour obtenir les données nécessaires à la génération d'un
PushSubscription.
La promesse subscribe() sera résolue avec un PushSubscription si ces étapes ont réussi. Si l'utilisateur n'accorde pas l'autorisation ou si un problème survient lors de l'abonnement de l'utilisateur, la promesse sera rejetée avec une erreur. Vous obtenez ainsi la chaîne de promesses suivante dans votre atelier de programmation :
swRegistration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: applicationServerKey
})
.then(function(subscription) {
console.log('User is subscribed.');
updateSubscriptionOnServer(subscription);
isSubscribed = true;
updateBtn();
})
.catch(function(err) {
console.log('Failed to subscribe the user: ', err);
updateBtn();
});Vous obtenez ainsi un abonnement et traitez l'utilisateur comme abonné, ou vous détectez une erreur et l'enregistrez dans la console. Dans les deux scénarios, vous appelez updateBtn() pour vous assurer que le bouton est réactivé et qu'il contient le texte approprié.
Dans une application réelle, la fonction updateSubscriptionOnServer() est l'endroit où vous enverriez vos données d'abonnement à un backend. Toutefois, pour l'atelier de programmation, vous affichez simplement l'abonnement dans votre UI. Ajoutez la fonction suivante à scripts/main.js :
function updateSubscriptionOnServer(subscription) {
// TODO: Send subscription to application server
const subscriptionJson = document.querySelector('.js-subscription-json');
const subscriptionDetails =
document.querySelector('.js-subscription-details');
if (subscription) {
subscriptionJson.textContent = JSON.stringify(subscription);
subscriptionDetails.classList.remove('is-invisible');
} else {
subscriptionDetails.classList.add('is-invisible');
}
}Essayer
Accédez à l'onglet Push Codelab, actualisez la page, puis cliquez sur le bouton. Une invite d'autorisation semblable à celle-ci doit s'afficher :
Si vous accordez l'autorisation, User is subscribed devrait s'afficher dans la console. Le texte du bouton devient Disable Push Messaging (Désactiver la messagerie push). Vous pouvez alors afficher l'abonnement sous forme de données JSON en bas de la page.
Il reste une chose que vous n'avez pas encore traitée : que se passe-t-il si l'utilisateur bloque la demande d'autorisation ? Cela nécessite une attention particulière, car si l'utilisateur bloque l'autorisation, votre application Web ne pourra pas afficher à nouveau l'invite d'autorisation ni abonner l'utilisateur. Vous devez au moins désactiver le bouton-poussoir pour que l'utilisateur sache qu'il ne peut pas l'utiliser.
L'endroit idéal pour gérer ce scénario est la fonction updateBtn(). Il vous suffit de vérifier la valeur Notification.permission, comme suit :
function updateBtn() {
if (Notification.permission === 'denied') {
pushButton.textContent = 'Push Messaging Blocked';
pushButton.disabled = true;
updateSubscriptionOnServer(null);
return;
}
if (isSubscribed) {
pushButton.textContent = 'Disable Push Messaging';
} else {
pushButton.textContent = 'Enable Push Messaging';
}
pushButton.disabled = false;
}Vous savez que si l'autorisation est denied, l'utilisateur ne peut pas s'abonner et vous ne pouvez rien faire d'autre. La meilleure approche consiste donc à désactiver définitivement le bouton.
Essayer
Étant donné que vous avez déjà accordé l'autorisation à votre application Web lors de l'étape précédente, vous devez cliquer sur le i dans un cercle de la barre d'URL et définir l'autorisation Notifications sur Utiliser la valeur par défaut globale (Demander).
Une fois ce paramètre modifié, actualisez la page, puis cliquez sur le bouton Activer la messagerie push et sélectionnez Bloquer dans la boîte de dialogue d'autorisation. Le bouton sera désactivé et le texte Messagerie push bloquée s'affichera.
Grâce à ce changement, vous pouvez désormais abonner l'utilisateur, après avoir géré les différents scénarios d'autorisation.
Avant d'apprendre à envoyer un message push depuis votre backend, vous devez réfléchir à ce qui se passera réellement lorsqu'un utilisateur abonné recevra un message push.
Lorsque vous déclenchez un message push, le navigateur le reçoit, détermine le service worker auquel il est destiné, réactive ce service worker et distribue un événement push. Vous devez écouter cet événement et afficher une notification en conséquence.
Ajoutez le code suivant au fichier sw.js :
self.addEventListener('push', function(event) {
console.log('[Service Worker] Push Received.');
console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);
const title = 'Push Codelab';
const options = {
body: 'Yay it works.',
icon: 'images/icon.png',
badge: 'images/badge.png'
};
event.waitUntil(self.registration.showNotification(title, options));
});Examinons ce code. Vous écoutez les événements push dans votre service worker en ajoutant un écouteur d'événements :
self.addEventListener('push', ... );(À moins que vous n'ayez déjà utilisé les Web Workers, self est probablement nouveau. Dans un fichier Service Worker, self fait référence au Service Worker lui-même.)
Lorsqu'un message push est reçu, l'écouteur d'événements est appelé et vous créez une notification en appelant showNotification() sur la propriété registration du service worker. showNotification() nécessite un title. Vous pouvez également lui fournir un objet options pour définir un message, une icône et un badge. (Au moment de la rédaction de cet article, le badge n'est utilisé que sur Android.)
const title = 'Push Codelab';
const options = {
body: 'Yay it works.',
icon: 'images/icon.png',
badge: 'images/badge.png'
};
self.registration.showNotification(title, options);La dernière chose à aborder dans la gestion des événements push est event.waitUntil(). Cette méthode utilise une promesse pour permettre au navigateur de maintenir votre service worker actif et en cours d'exécution jusqu'à ce que la promesse transmise ait été résolue.
Pour faciliter la compréhension du code ci-dessus, vous pouvez le réécrire comme suit :
const notificationPromise = self.registration.showNotification(title, options);
event.waitUntil(notificationPromise);Maintenant que vous avez parcouru l'événement push, testons-en un.
Essayer
Avec la gestion des événements push dans le service worker, vous pouvez déclencher un faux événement push pour tester ce qui se passe lorsqu'un message est reçu.
Dans votre application Web, abonnez-vous aux messages push et assurez-vous que User IS subscribed s'affiche dans la console. Dans le panneau Application des outils de développement, sous l'onglet Service Workers, cliquez sur le bouton Push :
Après avoir cliqué sur Push, une notification semblable à celle-ci devrait s'afficher :
Remarque : Si cette étape ne fonctionne pas, essayez de désenregistrer votre service worker à l'aide du lien Unregister (Désenregistrer) dans le panneau "Application" des outils de développement. Attendez que le service worker soit arrêté, puis rechargez la page.
Si vous cliquez sur l'une de ces notifications, vous remarquerez que rien ne se passe. Vous pouvez gérer les clics sur les notifications en écoutant les événements notificationclick dans votre service worker.
Commencez par ajouter un écouteur notificationclick dans sw.js :
self.addEventListener('notificationclick', function(event) {
console.log('[Service Worker] Notification click received.');
event.notification.close();
event.waitUntil(
clients.openWindow('https://developers.google.com/web')
);
});Lorsque l'utilisateur cliquera sur la notification, l'écouteur d'événements notificationclick sera appelé.
Le code ferme d'abord la notification sur laquelle l'utilisateur a cliqué :
event.notification.close();Une nouvelle fenêtre ou un nouvel onglet s'ouvre alors, chargeant l'URL https://developers.google.com/web. N'hésitez pas à le modifier.
event.waitUntil(
clients.openWindow('https://developers.google.com/web/')
);event.waitUntil() garantit que le navigateur ne met pas fin au service worker avant que la nouvelle fenêtre ou le nouvel onglet ne s'affiche.
Essayer
Réessayez de déclencher un message push dans les outils de développement, puis cliquez sur la notification. La notification se ferme et un nouvel onglet s'ouvre.
Vous avez vu que votre application Web est capable d'afficher une notification à l'aide des outils pour les développeurs et vous avez appris à fermer la notification en cliquant dessus. L'étape suivante consiste à envoyer un message push réel.
Normalement, cela nécessiterait d'envoyer un abonnement d'une page Web à un backend. Le backend déclenche ensuite un message push en effectuant un appel d'API au point de terminaison de l'abonnement.
Cela ne fait pas partie de cet atelier de programmation, mais vous pouvez utiliser le site associé (web-push-codelab.glitch.me) pour déclencher un véritable message push. Collez l'abonnement en bas de votre page :
Collez ensuite cette adresse dans la zone de texte Abonnement à Envoyer à du site associé :
Sous Texte à envoyer, ajoutez la chaîne de caractères que vous souhaitez envoyer avec le message push.
Cliquez sur le bouton Envoyer un message push.
Vous devriez alors recevoir un message push. Le texte que vous avez utilisé sera consigné dans la console.
Cela devrait vous permettre de tester l'envoi et la réception de données, et de manipuler les notifications en conséquence.
L'application associée n'est qu'un serveur de nœuds qui utilise la bibliothèque web-push pour envoyer des messages. Il est utile de consulter l'organisation web-push-libs sur GitHub pour voir quelles bibliothèques sont disponibles pour vous permettre d'envoyer des messages push. Cela gère de nombreux détails pour déclencher les messages push.
Vous trouverez l'intégralité du code du site associé ici.
La seule chose qui manque est la possibilité de désabonner un utilisateur des notifications push. Pour ce faire, vous devez appeler unsubscribe() sur un PushSubscription.
De retour dans votre fichier scripts/main.js, remplacez le code du listener de clic pushButton dans initializeUI() par le code suivant :
pushButton.addEventListener('click', function() {
pushButton.disabled = true;
if (isSubscribed) {
unsubscribeUser();
} else {
subscribeUser();
}
});Notez que vous allez maintenant appeler une nouvelle fonction unsubscribeUser(). Dans cette fonction, vous obtenez l'abonnement actuel et appelez unsubscribe() dessus. Ajoutez le code suivant à scripts/main.js :
function unsubscribeUser() {
swRegistration.pushManager.getSubscription()
.then(function(subscription) {
if (subscription) {
return subscription.unsubscribe();
}
})
.catch(function(error) {
console.log('Error unsubscribing', error);
})
.then(function() {
updateSubscriptionOnServer(null);
console.log('User is unsubscribed.');
isSubscribed = false;
updateBtn();
});
}Examinons cette fonction.
Tout d'abord, vous obtenez l'abonnement actuel en appelant getSubscription() :
swRegistration.pushManager.getSubscription()Cela renvoie une promesse qui se résout avec un PushSubscription s'il en existe un. Sinon, elle renvoie null. S'il existe un abonnement, vous appelez unsubscribe(), ce qui rend PushSubscription non valide.
swRegistration.pushManager.getSubscription()
.then(function(subscription) {
if (subscription) {
// TODO: Tell application server to delete subscription
return subscription.unsubscribe();
}
})
.catch(function(error) {
console.log('Error unsubscribing', error);
})L'appel unsubscribe() renvoie une promesse, car l'opération peut prendre un certain temps. Vous renvoyez cette promesse afin que le prochain then() de la chaîne attende la fin de unsubscribe(). Vous ajoutez également un gestionnaire catch au cas où l'appel de unsubscribe() générerait une erreur. Vous pouvez ensuite mettre à jour votre UI.
.then(function() {
updateSubscriptionOnServer(null);
console.log('User is unsubscribed.');
isSubscribed = false;
updateBtn();
})Essayer
Vous devriez pouvoir appuyer sur Enable Push Messaging (Activer la messagerie push) ou Disable Push Messaging (Désactiver la messagerie push) dans votre application Web. Les journaux indiqueront alors que l'utilisateur est abonné ou désabonné.
Félicitations, vous avez terminé cet atelier de programmation !
Cet atelier de programmation vous a montré comment ajouter des notifications push à votre application Web. Pour en savoir plus sur les possibilités offertes par les notifications Web, consultez ces documents.
Si vous souhaitez déployer des notifications push sur votre site, vous pouvez ajouter la compatibilité avec les anciens navigateurs ou les navigateurs non conformes aux normes qui utilisent GCM. En savoir plus
Complément d'informations
- Notification push Web : documentation sur les principes de base du Web.
- Bibliothèques Web Push : bibliothèques Web Push, y compris Node.js, PHP, Java, Python, C et C#.