Dans cet atelier de programmation, vous allez utiliser un service worker pour gérer les notifications. Les instructions ci-dessous partent du principe que vous connaissez déjà les service workers et les principes de base de la demande d'autorisation de notification et de l'envoi de notifications. Si vous avez besoin d'un rappel sur les notifications, consultez l'atelier de programmation Premiers pas avec l'API Notifications. Pour en savoir plus sur les service workers, consultez la présentation des service workers de Matt Gaunt.
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 ce que vous devez faire:
- Cliquez sur Remixer pour modifier pour rendre le projet modifiable.
- Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran .
Glitch devrait s'ouvrir dans un nouvel onglet Chrome.
Au cours de cet atelier de programmation, modifiez le code dans Glitch intégré sur cette page. Actualisez le nouvel onglet avec votre application en direct pour voir les modifications.
Se familiariser avec l'application exemple et le code de démarrage
Commencez par examiner l'application en direct dans le nouvel onglet Chrome:
- Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir DevTools.
Cliquez sur l'onglet Console.
Assurez-vous que l'option Info est sélectionnée dans le menu déroulant Niveaux à côté de la zone Filtrer.
Dans la console DevTools de votre application en ligne, un message de console devrait s'afficher:
TODO: Implement getRegistration()
.Il s'agit d'un message provenant d'un bouchon de fonction que vous allez implémenter dans cet atelier de programmation.
Voyons maintenant le code de l'application exemple dans Glitch intégré sur 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
effectue la détection des fonctionnalités pour la fonctionnalité de service worker dans le navigateur et met à jour l'interface utilisateur de l'application.Le script attend que la page soit chargée, puis l'initialise.
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 imprime un message dans la console lorsque le service worker est activé.
Vous ajouterez du code à
public/service-worker.js
pour gérer les notifications lorsque le service worker les recevra.
Enregistrer le service worker
Au cours de cette étape, vous allez écrire du code qui s'exécute lorsque l'utilisateur clique sur Register service worker (Enregistrer le service worker) dans l'UI 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. Vous pouvez ainsiawait
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 l'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 dans lequel vous consultez l'application en ligne, actualisez la page. Les boutons Enregistrer le service worker et Désenregistrer le service worker devraient maintenant fonctionner.
Envoyer des notifications au service worker
À 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 envoie la notification au service worker à 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
étant une fonction asynchrone, vous pouvez 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 MDN sur postMessage.Le code vérifie la présence de la propriété
navigator.serviceWorker.controller
avant d'essayer d'accéder à la fonctionpostMessage
.navigator.serviceWorker.controller
seranull
si aucun service worker actif n'est disponible ou si la page a été actualisée de force (Shift+
Actualiser). Pour en savoir plus, consultez la documentation du contrôleur ServiceWorker sur MDN.
Gérer les notifications dans le service worker
Dans cette étape, vous allez écrire du code dans le service worker qui gérera 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 brève explication:
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 chargée d'obtenir l'autorisation de l'utilisateur pour les notifications. Si l'autorisation n'est pas accordée, la promesse renvoyée par
showNotification
est rejetée. Le code ci-dessus utilise un bloccatch
pour éviter une erreur de rejetPromise
non interceptée et gérer cette erreur de manière un peu plus élégante.
Si vous rencontrez des difficultés, consultez glitch.com/edit/#!/codelab-notifications-service-worker-completed pour obtenir le code final.
Passez à l'atelier de programmation suivant de cette série: Créer un serveur de notifications push.