Dans cet atelier de programmation, vous allez utiliser un service worker pour gérer les notifications. Les instructions présentées ici partent du principe que vous connaissez les service workers et les bases pour demander des autorisations de notification et envoyer des notifications. Si vous avez besoin d'un rappel sur les notifications, consultez le Premiers pas avec l'API Notifications dans cet atelier de programmation. Pour en savoir plus sur les service workers, consultez l'article de Matt Gaunt Présentation des service workers.
Remixer l'application exemple et l'afficher dans un nouvel onglet
Les notifications de l'application Glitch intégrée sont automatiquement bloquées. Vous ne pourrez donc pas prévisualiser l'application sur cette page. Voici la marche à suivre:
- Cliquez sur Remix to Edit (Remixer pour modifier) pour pouvoir modifier le projet.
- Pour prévisualiser le site, appuyez sur Afficher l'application. Appuyez ensuite sur Plein écran
Glitch devrait s'ouvrir dans un nouvel onglet Chrome.
Tout au long de cet atelier de programmation, modifiez le code dans le Glitch intégré sur cette page. Actualisez le nouvel onglet contenant votre application en ligne pour voir les modifications.
Se familiariser avec l'application exemple et le code de démarrage
Commencez par consulter l'application active dans le nouvel onglet Chrome:
- Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
Cliquez sur l'onglet Console.
Assurez-vous que l'option Infos est sélectionnée dans le menu déroulant Niveaux. à côté de la zone Filtre.
Dans la console des outils de développement de votre application en ligne, un message de console doit s'afficher:
TODO: Implement getRegistration()
.Il s'agit d'un message issu d'un bouchon de fonction que vous implémenterez dans cet atelier de programmation.
Examinons maintenant le code de l'exemple d'application dans le Glitch intégré de cette page.
Dans le Glitch intégré, examinez
public/index.js
:Il existe quatre bouchons pour les fonctions que vous allez implémenter:
registerServiceWorker
,getRegistration
,unRegisterServiceWorker
etsendNotification
.La fonction
requestPermission
demande l'autorisation de l'utilisateur pour envoyer des notifications. Si vous avez suivi l'atelier de programmation Premiers pas avec l'API Notifications, vous remarquerez que sa fonctionrequestPermission
est utilisée ici. La seule différence est qu'il met désormais à jour l'interface utilisateur après la résolution de la demande d'autorisation.La fonction
updateUI
actualise tous les boutons et messages de l'application.La fonction
initializePage
détecte les fonctionnalités des service workers dans le navigateur et met à jour l'interface utilisateur de l'application.Le script attend le chargement de la page avant de l'initialiser.
Dans le Glitch intégré, ouvrez
public/service-worker.js
.Comme son nom l'indique, vous allez ajouter du code à l'application pour enregistrer ce fichier en tant que service worker ;
Bien que le fichier ne soit pas encore utilisé par l'application, il contient du code de démarrage qui affichera un message sur la console lorsque le service worker est activé.
Vous allez ajouter du code à
public/service-worker.js
pour gérer les notifications lorsque le service worker les reçoit.
Enregistrer le service worker
Au cours de cette étape, vous allez écrire du code qui exécute
Lorsque l'utilisateur clique sur Enregistrer le service worker dans l'interface utilisateur de l'application.
Ce code enregistre public/service-worker.js
en tant que service worker.
Dans l'éditeur Glitch intégré, ouvrez
public/index.js
. Remplacez la fonctionregisterServiceWorker
par le code suivant:// Use the Service Worker API to register a service worker. async function registerServiceWorker() { await navigator.serviceWorker.register('./service-worker.js') updateUI(); }
Notez que
registerServiceWorker
utilise la déclarationasync function
pour faciliter la gestion des promesses. Cela vous permet d'await
la valeur résolue d'unPromise
. Par exemple, la fonction ci-dessus attend le résultat de l'enregistrement d'un service worker avant de mettre à jour l'UI. Pour en savoir plus, consultezawait
sur MDN.Maintenant que l'utilisateur peut enregistrer un service worker, vous pouvez obtenir une référence à l'objet d'enregistrement du service worker. Dans
public/index.js
, remplacez la fonctiongetRegistration
par le code suivant:// Get the current service worker registration. function getRegistration() { return navigator.serviceWorker.getRegistration(); }
La fonction ci-dessus utilise API Service Worker pour obtenir l'enregistrement actuel du service worker, le cas échéant. Il est un peu plus pratique d'obtenir une référence à l'enregistrement du service worker.
Pour terminer la fonctionnalité d'enregistrement du service worker, ajoutez du code permettant d'annuler l'enregistrement du service worker. Remplacez la fonction
unRegisterServiceWorker
par le code suivant:// Unregister a service worker, then update the UI. async function unRegisterServiceWorker() { // Get a reference to the service worker registration. let registration = await getRegistration(); // Await the outcome of the unregistration attempt // so that the UI update is not superceded by a // returning Promise. await registration.unregister(); updateUI(); }
Dans l'onglet où s'affiche l'application en ligne, actualisez la page. Les boutons Enregistrer le service worker et Annuler l'enregistrement du service worker doivent maintenant fonctionner.
Envoyer des notifications au service worker
Au cours de cette étape, vous allez écrire du code qui s'exécutera lorsque l'utilisateur cliquera sur Envoyer une notification dans l'interface utilisateur de l'application. Ce code crée une notification, vérifie qu'un service worker est enregistré, puis l'envoie à l'aide de sa méthode postMessage
.
Dans l'éditeur Glitch intégré, ouvrez public/index.js
et
Remplacez la fonction sendNotification
par le code suivant:
// Create and send a test notification to the service worker.
async function sendNotification() {
// Use a random number as part of the notification data
// (so you can tell the notifications apart during testing!)
let randy = Math.floor(Math.random() * 100);
let notification = {
title: 'Test ' + randy,
options: { body: 'Test body ' + randy }
};
// Get a reference to the service worker registration.
let registration = await getRegistration();
// Check that the service worker registration exists.
if (registration) {
// Check that a service worker controller exists before
// trying to access the postMessage method.
if (navigator.serviceWorker.controller) {
navigator.serviceWorker.controller.postMessage(notification);
} else {
console.log('No service worker controller found. Try a soft reload.');
}
}
}
Voici ce que fait ce code:
sendNotification
est une fonction asynchrone. Vous pouvez donc utiliserawait
pour obtenir une référence à l'enregistrement du service worker.La méthode
postMessage
du service worker envoie des données de l'application au service worker. Pour en savoir plus, consultez la documentation MMD sur postMessage.Le code vérifie la présence de la propriété
navigator.serviceWorker.controller
avant de tenter d'accéder à la fonctionpostMessage
.navigator.serviceWorker.controller
seranull
en l'absence de service worker actif ou si l'actualisation de la page a été forcée (Shift+
Actualiser). Pour en savoir plus, consultez la documentation du contrôleur ServiceWorkers sur MDN.
Gérer les notifications dans le service worker
Au cours de cette étape, vous allez écrire dans le service worker le code qui traitera les messages qui y sont publiés et affichera des notifications à l'utilisateur.
Dans l'éditeur Glitch intégré, ouvrez public/service-worker.js
. Ajoutez le code suivant à la fin du fichier:
// Show notification when received
self.addEventListener('message', (event) => {
let notification = event.data;
self.registration.showNotification(
notification.title,
notification.options
).catch((error) => {
console.log(error);
});
});
Voici une explication rapide:
self
est une référence au service worker lui-même.Bien que le service worker gère désormais l'affichage des notifications, l'UI principale de l'application est toujours responsable de l'obtention de l'autorisation de notification de l'utilisateur. Si l'autorisation n'est pas accordée, la promesse renvoyée par
showNotification
est refusée. Le code ci-dessus utilise un bloccatch
pour éviter une erreur de refusPromise
non détectée et gérer cette erreur un peu plus facilement.
Si vous rencontrez des difficultés, consultez la page glitch.com/edit/#!/codelab-notifications-service-worker-completed pour obtenir le code terminé.
Passez à l'atelier de programmation suivant de cette série: Créer un serveur de notifications push.