Dans cet atelier de programmation, vous utiliserez les fonctionnalités de base API Notifications pour:
- Demander l'autorisation d'envoyer des notifications
- Envoyer des notifications
- Tester les options de notification
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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 de démarrage et son code
Commencez par consulter l'application en ligne 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.
Le message suivant doit s'afficher dans la console:
Notification permission is default
Si vous ne savez pas ce que cela signifie, ne vous inquiétez pas ; tout sera bientôt dévoilé !
Cliquez sur les boutons Demander l'autorisation d'envoyer des notifications et Envoyer une notification dans l'application active.
La console affiche "TODO". messages de quelques bouchons de fonction:
requestPermission
etsendNotification
. Voici les fonctions que vous allez implémenter dans cet atelier de programmation.
Examinons maintenant le code de l'application exemple dans le Glitch intégré sur cette page.
Ouvrez public/index.js
et examinez certaines parties importantes du code existant:
La fonction
showPermission
utilise l'API Notifications pour obtenir l'état d'autorisation actuel du site et enregistrez-le dans la console:// Print current permission state to console; // update onscreen message. function showPermission() { let permission = Notification.permission; console.log('Notification permission is ' + permission); let p = document.getElementById('permission'); p.textContent = 'Notification permission is ' + permission; }
Avant de demander l'autorisation, l'état de l'autorisation est
default
. Avec l'état d'autorisationdefault
, un site doit demander et obtenir une autorisation avant de pouvoir envoyer des notifications.La fonction
requestPermission
est un bouchon:// Use the Notification API to request permission to send notifications. function requestPermission() { console.log('TODO: Implement requestPermission()'); }
Vous implémenterez cette fonction à l'étape suivante.
La fonction
sendNotification
est un bouchon:// Use the Notification constructor to create and send a new Notification. function sendNotification() { console.log('TODO: Implement sendNotification()'); }
Vous implémenterez cette fonction après avoir implémenté
requestPermission
.L'écouteur d'événements
window.onload
appelle la fonctionshowPermission
. lors du chargement de la page, ce qui affiche l'état d'autorisation actuel dans la console et sur la page:window.onload = () => { showPermission(); };
Demander l'autorisation d'envoyer des notifications
Au cours de cette étape, vous allez ajouter une fonctionnalité permettant de demander l'autorisation de l'utilisateur pour envoyer des notifications.
Vous allez utiliser la méthode Notification.requestPermission()
pour déclencher un pop-up qui demande à l'utilisateur d'autoriser ou de bloquer les notifications de votre site.
Remplacez le bouchon de la fonction
requestPermission
dans public/index.js par le code suivant:// Use the Notification API to request permission to send notifications. function requestPermission() { Notification.requestPermission() .then((permission) => { console.log('Promise resolved: ' + permission); showPermission(); }) .catch((error) => { console.log('Promise was rejected'); console.log(error); }); }
Actualisez l'onglet Chrome dans lequel vous consultez votre application en ligne.
Dans l'interface de l'application en direct, cliquez sur Demander l'autorisation d'envoyer des notifications. Un pop-up s'affiche.
L'utilisateur peut envoyer l'une des trois réponses à la fenêtre pop-up d'autorisation.
Réponse de l'utilisateur | État de l'autorisation de notification |
---|---|
L'utilisateur sélectionne Autoriser. | granted |
L'utilisateur sélectionne Bloquer. | denied |
L'utilisateur ferme le pop-up sans effectuer de sélection | default |
Si l'utilisateur clique sur "Autoriser" :
La propriété
Notification.permission
est définie surgranted
.Le site pourra afficher des notifications.
Les appels suivants à
Notification.requestPermission
seront convertis engranted
sans pop-up.
Si l'utilisateur clique sur "Bloquer" :
La propriété
Notification.permission
est définie surdenied
.Le site ne pourra pas afficher de notifications aux utilisateurs.
Les appels suivants à
Notification.requestPermission
seront convertis endenied
sans pop-up.
Si l'utilisateur ferme le pop-up:
Notification.permission
restedefault
.Le site ne pourra pas afficher de notifications à l'utilisateur.
Les appels ultérieurs envoyés à
Notification.requestPermission
généreront davantage de pop-ups.Toutefois, si l'utilisateur continue de fermer les pop-ups, le navigateur risque de bloquer le site et de définir
Notification.permission
surdenied
. Ni les pop-ups de demande d'autorisation, ni les notifications ne peuvent alors être présentés à l'utilisateur.Au moment de la rédaction de ce document, le comportement du navigateur en réponse aux fenêtres pop-up d'autorisation des notifications ignorées est encore susceptible de changer. La meilleure façon de gérer cela est de toujours demander une autorisation de notification en réponse à une interaction effectuée par l'utilisateur afin qu'il s'attende à ce qu'il s'y attend et sache ce qui se passe.
Envoyer une notification
Au cours de cette étape, vous allez envoyer une notification à l'utilisateur.
Vous allez utiliser le constructeur Notification
pour créer une notification et essayer de l'afficher.
Si l'état d'autorisation est granted
, votre notification s'affichera.
Remplacez le bouchon de la fonction
sendNotification
dans index.js par le code suivant:// Use the Notification constructor to create and send a new Notification. function sendNotification() { let title = 'Test'; let options = { body: 'Test body', // Other options can go here }; console.log('Creating new notification'); let notification = new Notification(title, options); }
Le constructeur
Notification
utilise deux paramètres:title
etoptions
.options
est un objet dont les propriétés représentent les paramètres visuels et les données que vous pouvez inclure dans une notification. Pour en savoir plus, consultez la documentation MMD sur les paramètres de notification.Actualisez l'onglet Chrome dans lequel vous consultez votre application en ligne et cliquez sur le bouton Envoyer une notification. Une notification avec le texte
Test body
devrait s'afficher.
Que se passe-t-il lorsque vous envoyez des notifications sans autorisation ?
Au cours de cette étape, vous allez ajouter quelques lignes de code pour voir ce qui se passe lorsque vous tentez d'afficher une notification sans l'autorisation de l'utilisateur.
- Dans
public/index.js
, à la fin de la fonctionsendNotification
, Définissez le gestionnaire d'événementsonerror
de la nouvelle notification:
// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
let title = 'Test';
let options = {
body: 'Test body',
// Other options can go here
};
console.log('Creating new notification');
let notification = new Notification(title, options);
notification.onerror = (event) => {
console.log('Could not send notification');
console.log(event);
};
}
Pour observer une erreur d'autorisation de notification:
Cliquez sur l'icône en forme de cadenas à côté de la barre d'adresse de Chrome et rétablissez les paramètres d'autorisation de notification du site par défaut.
Cliquez sur Demander l'autorisation d'envoyer des notifications et cette fois, sélectionnez Bloquer dans le pop-up.
Cliquez sur Envoyer une notification et voyez ce qui se passe. Le texte d'erreur (
Could not send notification
) et l'objet événement sont enregistrés dans la console.
Si vous le souhaitez, réinitialisez à nouveau les autorisations de notification du site. Vous pouvez essayer de demander l'autorisation et de fermer le pop-up plusieurs fois pour voir ce qui se passe.
Tester les options de notification
Vous connaissez maintenant les bases de la demande d'autorisation et de l'envoi de notifications. Vous avez également vu l'impact des réponses des utilisateurs sur la capacité de votre application à afficher des notifications.
Vous pouvez désormais tester les nombreuses options visuelles et de gestion des données disponibles lorsque vous créez une notification. Vous trouverez ci-dessous la liste complète des options disponibles. Pour en savoir plus sur ces options, consultez la documentation sur les notifications sur MDN.
Notez que les navigateurs et les appareils implémentent ces options différemment, Il est donc utile de tester vos notifications sur différentes plateformes pour voir à quoi elles ressemblent.
let options = {
dir: 'auto', // Text direction
lang: 'en-US', // A language tag
badge: '/orange-cat.png', // Display when insufficient room
body: 'Hello World', // Body text
tag: 'mytag', // Tag for categorization
icon: '/line-cat.png', // To display in the notification
image: '/orange-cat.png', // To display in the notification
data: { // Arbitrary data; any data type
cheese: 'I like cheese',
pizza: 'Excellent cheese delivery mechanism',
arbitrary: {
faveNumber: 42,
myBool: true
}},
vibrate: [200, 100, 200], // Vibration pattern for hardware
renotify: false, // Notify if replaced? Default false
requireInteraction: false,// Active until click? Default false
/*
actions: // Array of NotificationActions
// Only usable with a service worker
[{
action: 'shop',
title: 'Shop!',
icon: '/bags.png'
},],
*/
}
Consultez le générateur de notifications de Peter Beverloo pour trouver d'autres idées.
Si vous rencontrez des difficultés, voici le code final de cet atelier de programmation: glitch.com/edit/#!/codelab-notifications-get-started-completed
Consultez l'atelier de programmation suivant de cette série, Gérer les notifications avec un service worker, pour en savoir plus.