Cet atelier de programmation vous explique pas à pas comment créer un client de notifications push. À la fin de l'atelier de programmation, vous aurez un client qui:
- Abonne l'utilisateur aux notifications push.
- Reçoit des messages push et les affiche en tant que notifications.
- Désabonne l'utilisateur des notifications push.
Cet atelier de programmation est conçu pour vous aider à apprendre par la pratique et ne parle pas beaucoup de concepts. Pour en savoir plus sur les concepts liés aux notifications push, consultez Comment fonctionnent les notifications push.
Le code serveur de cet atelier de programmation est déjà terminé. Vous n'implémenterez le client que dans cet atelier de programmation. Pour apprendre à implémenter un serveur de notification push, consultez l'atelier de programmation: Créer un serveur de notifications push.
Consultez push-notifications-client-codelab-complete (source) pour voir le code complet.
Compatibilité du navigateur
Cet atelier de programmation fonctionne avec les combinaisons de système d'exploitation et de navigateur suivantes:
- Windows: Chrome, Edge
- macOS: Chrome, Firefox
- Android: Chrome, Firefox
Cet atelier de programmation ne fonctionne pas avec les systèmes d'exploitation suivants (ou les combinaisons de système d'exploitation et de navigateur) suivantes :
- macOS: Brave, Edge et Safari
- iOS
Préparation
Obtenir une copie modifiable du code
L'éditeur de code que vous voyez à droite de ces instructions s'appelle UI Glitch tout au long de cet atelier de programmation.
- Cliquez sur Remix to Edit (Remixer pour modifier) pour rendre le projet modifiable.
Configurer l'authentification
Avant de pouvoir activer les notifications push, vous devez configurer votre serveur et votre client avec des clés d'authentification. Pour en savoir plus, consultez la section Signer vos requêtes du protocole Web push.
- Dans l'interface utilisateur de Glitch, cliquez sur Tools (Outils), puis sur Terminal (Terminal) pour ouvrir le terminal Glitch.
- Dans le terminal de Glitch, exécutez
npx web-push generate-vapid-keys
. Copiez la clé privée et les valeurs de la clé publique. - Dans l'UI Glitch, ouvrez
.env
, puis mettez à jourVAPID_PUBLIC_KEY
etVAPID_PRIVATE_KEY
. DéfinissezVAPID_SUBJECT
surmailto:test@test.test
. Toutes ces valeurs doivent être encapsulées entre guillemets. Une fois les modifications effectuées, le fichier.env
devrait se présenter comme suit:
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
- Fermez le terminal de Glitch.
- Ouvrez
public/index.js
. - Remplacez
VAPID_PUBLIC_KEY_VALUE_HERE
par la valeur de votre clé publique.
Enregistrer un service worker
Votre client aura éventuellement besoin d'un service worker pour recevoir et afficher les notifications. Il est préférable d'enregistrer le service worker le plus tôt possible. Pour en savoir plus, consultez la section Recevoir et afficher les messages envoyés en tant que notifications.
- Remplacez le commentaire
// TODO add startup logic here
par le code suivant:
// TODO add startup logic here
if ('serviceWorker' in navigator && 'PushManager' in window) {
navigator.serviceWorker.register('./service-worker.js').then(serviceWorkerRegistration => {
console.info('Service worker was registered.');
console.info({serviceWorkerRegistration});
}).catch(error => {
console.error('An error occurred while registering the service worker.');
console.error(error);
});
subscribeButton.disabled = false;
} else {
console.error('Browser does not support service workers or push messages.');
}
subscribeButton.addEventListener('click', subscribeButtonHandler);
unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);
- Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran .
- Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
- Cliquez sur l'onglet Console. Le message
Service worker was registered.
enregistré dans la console doit s'afficher.
Demander l'autorisation de recevoir des notifications push
Vous ne devez jamais demander l'autorisation d'envoyer des notifications push lors du chargement de la page. À la place, votre interface utilisateur doit demander à l'utilisateur s'il souhaite recevoir des notifications push. Une fois qu'ils confirment explicitement (par un clic sur un bouton, par exemple), vous pouvez lancer le processus formel pour obtenir l'autorisation de notification push du navigateur.
- Dans l'interface utilisateur de Glitch, cliquez sur Afficher la source pour revenir à votre code.
- Dans
public/index.js
, remplacez le commentaire// TODO
danssubscribeButtonHandler()
par le code suivant:
// TODO
// Prevent the user from clicking the subscribe button multiple times.
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
console.error('The user explicitly denied the permission request.');
return;
}
if (result === 'granted') {
console.info('The user accepted the permission request.');
}
- Revenez à l'onglet de l'application et cliquez sur S'abonner au service push. Votre navigateur ou votre système d'exploitation vous demandera probablement si vous souhaitez autoriser le site Web à vous envoyer des notifications push. Cliquez sur Autoriser (ou toute expression équivalente utilisée par votre navigateur ou votre système d'exploitation). Dans la console, vous devriez voir un message indiquant si la requête a été acceptée ou refusée.
S'abonner aux notifications push
Le processus d'abonnement implique l'interaction avec un service Web contrôlé par le fournisseur du navigateur, appelé service push. Une fois que vous avez reçu les informations d'abonnement aux notifications push, vous devez les envoyer à un serveur et faire en sorte que celui-ci les stocke dans une base de données à long terme. Pour en savoir plus sur le processus d'abonnement, consultez la section Activer les notifications push du client.
- Ajoutez le code en surbrillance suivant à
subscribeButtonHandler()
:
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
console.error('The user explicitly denied the permission request.');
return;
}
if (result === 'granted') {
console.info('The user accepted the permission request.');
}
const registration = await navigator.serviceWorker.getRegistration();
const subscribed = await registration.pushManager.getSubscription();
if (subscribed) {
console.info('User is already subscribed.');
notifyMeButton.disabled = false;
unsubscribeButton.disabled = false;
return;
}
const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
});
notifyMeButton.disabled = false;
fetch('/add-subscription', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(subscription)
});
L'option userVisibleOnly
doit être true
. Un jour, il serait possible de transmettre des messages sans afficher de notifications visibles par l'utilisateur (envois silencieux), mais les navigateurs n'autorisent actuellement pas cette fonctionnalité pour des raisons de confidentialité.
La valeur applicationServerKey
repose sur une fonction utilitaire qui convertit une chaîne base64 en Uint8Array. Cette valeur est utilisée pour l'authentification entre votre serveur et le service push.
Se désabonner des notifications push
Une fois qu'un utilisateur est abonné aux notifications push, votre UI doit proposer un moyen de se désabonner s'il change d'avis et ne souhaite plus recevoir de notifications push.
- Remplacez le commentaire
// TODO
dansunsubscribeButtonHandler()
par le code suivant:
// TODO
const registration = await navigator.serviceWorker.getRegistration();
const subscription = await registration.pushManager.getSubscription();
fetch('/remove-subscription', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({endpoint: subscription.endpoint})
});
const unsubscribed = await subscription.unsubscribe();
if (unsubscribed) {
console.info('Successfully unsubscribed from push notifications.');
unsubscribeButton.disabled = true;
subscribeButton.disabled = false;
notifyMeButton.disabled = true;
}
Recevoir un message push et l'afficher sous forme de notification
Comme indiqué précédemment, vous avez besoin d'un service worker pour gérer la réception et l'affichage des messages envoyés au client depuis votre serveur. Pour en savoir plus, consultez la section Recevoir et afficher les messages envoyés en tant que notifications.
- Ouvrez
public/service-worker.js
et remplacez le commentaire// TODO
dans le gestionnaire d'événementspush
du service worker par le code suivant:
// TODO
let data = event.data.json();
const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
const options = {
body: data.options.body,
icon: image
}
self.registration.showNotification(
data.title,
options
);
- Revenez à l'onglet "Application".
- Cliquez sur M'avertir. Vous devriez recevoir une notification push.
- Essayez d'ouvrir l'URL de l'onglet de votre application dans d'autres navigateurs (ou même sur d'autres appareils), en suivant le workflow d'abonnement, puis en cliquant sur Notifier tout. Vous devriez recevoir la même notification push sur tous les navigateurs auxquels vous êtes abonné. Reportez-vous à la section Compatibilité du navigateur pour obtenir la liste des combinaisons navigateur/système d'exploitation connues pour fonctionner ou non.
Vous pouvez personnaliser la notification de nombreuses façons. Pour en savoir plus, consultez les paramètres de ServiceWorkerRegistration.showNotification()
.
Ouvrir une URL lorsqu'un utilisateur clique sur une notification
En situation réelle, vous utiliserez probablement la notification pour susciter de nouveau l'intérêt de l'utilisateur et l'inviter à visiter votre site. Pour ce faire, vous devez configurer un peu plus votre service worker.
- Remplacez le commentaire
// TODO
dans le gestionnaire d'événementsnotificationclick
du service worker par le code suivant:
// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));
- Revenez à l'onglet de l'application, envoyez-vous une autre notification, puis cliquez dessus. Votre navigateur doit ouvrir un nouvel onglet et charger
https://web.dev
.
Étapes suivantes
- Consultez
ServiceWorkerRegistration.showNotification()
pour découvrir toutes les différentes façons de personnaliser les notifications. - Pour en savoir plus sur le fonctionnement des notifications push, consultez la page Présentation des notifications push.
- Consultez l'atelier de programmation: Créer un serveur de notifications push pour apprendre à créer un serveur qui gère les abonnements et envoie des requêtes pour le protocole Web push.
- Essayez le générateur de notifications pour tester toutes les façons de personnaliser les notifications.