Comment envoyer des notifications push avec JavaScript

Les notifications JavaScript sont un moyen d'envoyer des messages à vos utilisateurs en temps réel. Vous pouvez les utiliser pour informer des mises à jour de votre site Web, des nouveaux messages de chat, des e-mails ou de toute activité sur les réseaux sociaux. Vous pouvez également utiliser des notifications pour les rappels de calendrier (comme une réunion imminente sur Google Meet ou Zoom).

Découvrez comment créer des notifications d'événements en JavaScript et les envoyer sur votre téléphone ou votre navigateur Web. Vous y parviendrez en utilisant JavaScript intégré côté client - aucune bibliothèque externe n'est requise !

Demander l'autorisation d'envoyer des notifications

Pour créer une notification, vous devez appeler le Notification classe pour créer un objet. Il vous donne accès à diverses propriétés et méthodes que vous pouvez utiliser pour configurer votre notification. Mais avant de créer une notification, vous devez d'abord demander l'autorisation à l'utilisateur.

Le code JavaScript suivant demandera l'autorisation d'envoyer des notifications aux utilisateurs. Le demander la permission call renverra un message indiquant si le navigateur autorise ou non les notifications :

constante bouton = document.querySelector('bouton')
 bouton.addEventListener("Cliquez sur", ()=> {
 Notification.requestPermission().then(autorisation => {
 alerte (autorisation)
 })
})

Lorsque vous cliquez sur le bouton, vous pouvez recevoir une alerte indiquant refusé. Cela signifie que le navigateur a refusé à JavaScript d'envoyer des notifications d'événements. Le statut d'autorisation est refusé pour les cas où l'utilisateur a explicitement empêché les sites d'envoyer des notifications (via les paramètres du navigateur) ou l'utilisateur navigue en mode incognito.

Dans de tels cas, il est préférable de respecter la décision de l'utilisateur pour les notifications refusées et vous devez vous abstenir de les déranger davantage.

Envoi de notifications de base

Vous créez une notification push en créant un Notification objet avec le nouveau mot-clé. Pour une plongée approfondie dans la programmation orientée objet, vous pouvez vous référer à notre guide sur comment créer des classes en JavaScript.

Étant donné que vous n'enverriez des notifications que si l'autorisation est accordée, vous devez l'envelopper dans un si vérifier.

constante bouton = document.querySelector('bouton')
bouton.addEventListener("Cliquez sur", ()=> {
 Notification.requestPermission().then(permanente => {
si(permanente 'accordé') {
nouveau Notification("Exemple de notification")
 }
 })
})

Cliquez sur le bouton et vous recevrez une notification push dans le coin inférieur droit de votre navigateur Web avec le texte spécifié.

C'est le moyen le plus simple de créer des notifications, et cela fonctionne aussi bien sur votre téléphone que sur votre ordinateur. Regardons quelques propriétés de notification avancées.

Propriétés des notifications avancées

En plus du titre de la notification, vous pouvez également passer un argument d'options au constructeur lors de la création de l'objet de notification. Cet argument d'options doit être un objet. Ici, vous pouvez ajouter plusieurs options pour personnaliser votre notification.

La propriété du corps

La première propriété que vous devez connaître est corps propriété. Vous l'utiliserez pour ajouter un corps à votre notification, généralement pour transmettre plus d'informations sous forme de texte. Voici un exemple simple :

constante bouton = document.querySelector('bouton')
bouton.addEventListener("Cliquez sur", ()=> {
 Notification.requestPermission().then(permanente => {
si(permanente 'accordé') {
nouveau Notification("Exemple de notification", {
 corps: "C'est plus de texte",
 })
 }
 })
})

Si vous exécutez ce code, le corps du texte s'affichera dans la notification push, sous le Exemple de notification entête.

L'attribut de données

Souvent, vous souhaiterez peut-être ajouter des données personnalisées aux notifications. Vous souhaitez peut-être afficher un message d'erreur particulier si l'autorisation est refusée ou stocker les données que vous avez reçues d'une API. Dans tous ces cas, vous pouvez utiliser le données propriété pour ajouter des données personnalisées à votre notification.

bouton.addEventListener("Cliquez sur", ()=> {
 Notification.requestPermission().then(permanente => {
si(permanente 'accordé') {
constante notifier = nouveau Notification("Exemple de notification", {
 corps: "C'est plus de texte",
 données: {Bonjour: "monde"}
 })

 alerte (notification.data.hello)
 }
 })
})

Vous pouvez accéder aux données à partir du données propriété similaire à celle indiquée dans le bloc de code ci-dessus (à l'intérieur du alerte()).

Vous pouvez également lier des écouteurs d'événements à vos notifications. Par exemple, l'écouteur d'événement suivant s'exécute chaque fois que vous fermez la notification push. La fonction de rappel enregistre simplement le message personnalisé.

constante notifier = nouveau Notification("Exemple de notification", { 
 corps: "C'est plus de texte",
 données: {Bonjour: "monde"} 
})
notification. addEventListener("fermer", e => {
console.log (e.target.data.hello)
})

C'est un excellent moyen de transmettre des données si vous devez faire quelque chose lorsque quelqu'un ferme une notification ou clique dessus. Séparé de fermer événement (qui s'exécute lorsque vous fermez la notification), vous devez conserver ces auditeurs d'événements dans ta tête:

• montrer: S'exécute lorsque la notification s'affiche.
• Cliquez sur: s'exécute lorsque l'utilisateur clique n'importe où dans la notification.
• erreur: s'exécute lorsque vous refusez l'autorisation JavaScript d'envoyer des notifications.

L'icône Propriété

Le icône La propriété sert à ajouter une icône à la notification push. En supposant que vous ayez un logo d'icône nommé logo.png dans le répertoire courant, vous pouvez l'utiliser dans vos notifications comme ceci :

constante notifier = nouveau Notification("Exemple de notification", { 
 icône: "logo.png"
})

Si vous avez du mal à créer un lien vers vos fichiers, vous devez comprendre le fonctionnement des URL relatives et des URL absolues.

Lorsque vous enregistrez le fichier, actualisez le navigateur et cliquez sur le bouton, la notification affichera l'image sur le côté gauche de l'en-tête et du corps.

L'attribut de la balise

Lorsque vous réglez le étiqueter attribut dans votre notification, vous donnez essentiellement à la notification un identifiant unique. Deux notifications ne peuvent pas exister ensemble si elles ont la même balise. Au lieu de cela, la notification la plus récente écrasera la notification plus ancienne.

Considérez notre exemple de bouton précédent (sans balise). Si vous deviez cliquer sur le bouton trois fois de suite, les trois notifications apparaîtront et elles s'empileront les unes sur les autres. Supposons maintenant que vous ayez ajouté la balise suivante à la notification :

constante notifier = nouveau Notification("Exemple de notification", { 
 corps: "C'est plus de texte",
 étiqueter: "Ma nouvelle étiquette"
})

Si vous deviez cliquer à nouveau sur le bouton, une seule boîte de notification apparaîtra. Chaque clic ultérieur écrasera la notification précédente, de sorte qu'une seule notification s'affichera, quel que soit le nombre de fois que vous cliquez sur le bouton. Ceci est utile si vous souhaitez ajouter des données dynamiques (comme Math.aléatoire()) au corps :

constante notifier = nouveau Notification("Exemple de notification", { 
 corps: Mathématiques.aléatoire()
 icône: "logo.png",
 étiqueter: "Mon étiquette corporelle"
})

Chaque fois que vous cliquez sur le bouton, un nouveau numéro apparaît. Utilisez la propriété tag si vous souhaitez écraser une notification actuelle avec de nouvelles informations à l'intérieur. Dans une application de messagerie, par exemple, vous pouvez utiliser l'attribut tag pour remplacer la notification par de nouveaux messages.

Un exemple de notification push utilisant JavaScript

L'exemple suivant détecte chaque fois que vous perdez le focus sur votre page (c'est-à-dire lorsque vous fermez la page ou ouvrez un nouvel onglet). Dans ce cas, le code envoie une notification vous demandant de retourner :

laisser notification
document.addEventListener("changement de visibilité", ()=> {
si(document.visibilityState "caché") {
 notifier = nouveau Notification("Reviens s'il te plaît", {
 corps: "Ne pars pas tout de suite :("
 étiqueter: "Revenir"
 })
 } autre {
 notification.close()
 }
})

Chaque fois que vous perdez le focus sur cette page, vous recevez une notification vous demandant de revenir sur la page. Mais une fois que vous revenez à la page, le autre block s'exécute, ce qui ferme la notification push. Cette technique est excellente dans les situations où vous souhaitez donner à l'utilisateur une sorte d'information après avoir quitté votre page.

En savoir plus sur JavaScript

La notification d'événement n'est qu'une des nombreuses fonctionnalités que vous pouvez trouver en JavaScript. Afin d'être vraiment bon avec les notifications, vous devez d'abord comprendre les fonctionnalités fondamentales du langage et la syntaxe de JavaScript. Construire des jeux simples est l'un des moyens par lesquels vous pouvez améliorer vos compétences et vous familiariser avec les concepts de base de la langue.