Accueil Technologie

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 notifier les mises à jour de votre site web, les nouveaux messages de chat, les courriels ou toute activité sur les médias sociaux. Vous pouvez également utiliser les notifications pour des rappels de calendrier (comme une réunion à venir sur Google Meet ou Zoom).

Apprenez à créer des notifications d’événements en JavaScript et à les envoyer à votre téléphone ou à votre navigateur web. Vous y parviendrez en utilisant le JavaScript intégré côté client – aucune bibliothèque externe n’est nécessaire !


Demander l’autorisation d’envoyer des notifications

Pour créer une notification, vous devez appeler la fonction Notification pour créer un objet. Elle 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 la permission à l’utilisateur.

Le JavaScript suivant demande l’autorisation d’envoyer des notifications à l’utilisateur. Le JavaScript suivant demande l’autorisation d’envoyer des notifications à l’utilisateur. demandePermission renvoie un message indiquant si le navigateur autorise ou non les notifications :

 const button = document.querySelector('button')
  button.addEventListener("click", ()=> {
  Notification.requestPermission().then(permission => {
    alert(permission)
  })
})

Lorsque vous cliquez sur le bouton, il se peut que vous receviez un message d’alerte disant refusé. Cela signifie que le navigateur a interdit à JavaScript d’envoyer des notifications d’événements. L’état de la permission 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 lorsque l’utilisateur navigue en mode incognito.

Dans ces cas, il est préférable de respecter la décision de l’utilisateur de refuser les notifications et de s’abstenir de l’importuner.

Envoi de notifications de base

Vous créez une notification push en créant un Notification Le mot-clé new permet de créer un objet avec le mot-clé new. Pour une plongée en profondeur dans la programmation orientée objet, vous pouvez consulter notre guide sur la création de classes en JavaScript.

Puisque vous n’envoyez des notifications que si la permission est accordée, vous devez l’intégrer dans un objet de type si vérifier.

 const button = document.querySelector('button')
button.addEventListener("click", ()=> {
  Notification.requestPermission().then(perm => {
    if(perm === 'granted') {
      new Notification("Example 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é.

Capture d'écran de la notification du navigateur dans Google Chrome

Il s’agit de la méthode la plus simple pour créer des notifications, et elle fonctionne aussi bien sur votre téléphone que sur votre ordinateur. Examinons maintenant quelques propriétés de notification avancées.

Propriétés avancées des notifications

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 options doit être un objet. Ici, vous pouvez ajouter plusieurs options pour personnaliser votre notification.

Propriété du corps

La première propriété à 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 :

 const button = document.querySelector('button')
button.addEventListener("click", ()=> {
  Notification.requestPermission().then(perm => {
    if(perm === 'granted') {
      new Notification("Example notification", {
       body: "This is more text",
     })
    }
  })
})

Si vous exécutez ce code, le corps du texte s’affichera dans la notification push, sous la rubrique Exemple de notification en-tête.

L’attribut de données

Il arrive souvent que vous souhaitiez 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 des données reçues d’une API. Dans tous ces cas, vous pouvez utiliser la méthode data pour ajouter des données personnalisées à votre notification.

 button.addEventListener("click", ()=> {
  Notification.requestPermission().then(perm => {
    if(perm === 'granted') {
      const notification = new Notification("Example notification", {
       body: "This is more text",
       data: {hello: "world"}
     })
    
     alert(notification.data.hello)
    }
  })
})

Vous pouvez accéder aux données à partir de la propriété données de la même manière que dans le bloc de code ci-dessus (à l’intérieur de la propriété alert()).

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

 const notification = new Notification("Example notification", { 
  body: "This is more text",
  data: {hello: "world"}
})

notification. addEventListener("close", e => {
  console.log(e.target.data.hello)
})

Il s’agit d’un excellent moyen de transmettre des données si vous devez faire quelque chose lorsque quelqu’un ferme une notification ou clique dessus. En dehors de la fonction fermer (qui s’exécute lorsque vous fermez la notification), vous devez garder à l’esprit ces récepteurs d’événements :

  • montrer: S’exécute lorsque la notification s’affiche.
  • cliquer: S’exécute lorsque l’utilisateur clique n’importe où dans la notification.
  • erreur: S’exécute lorsque vous refusez à JavaScript la permission d’envoyer des notifications.

Propriété de l’icône

L’icône icône permet d’ajouter une icône à la notification push. En supposant que vous ayez un logo iconique nommé logo.png dans le répertoire courant, vous pouvez l’utiliser dans vos notifications comme suit :

 const notification = new Notification("Example notification", { 
  icon: "logo.png"
})

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

Lorsque vous enregistrez le fichier, rafraîchissez le navigateur et cliquez sur le bouton, l’image de la notification s’affiche sur le côté gauche de l’en-tête et du corps du texte.

Capture d'écran de la notification du navigateur dans Google Chrome

L’attribut de la balise

Lorsque vous définissez l’attribut tag dans votre notification, vous lui donnez un identifiant unique. Deux notifications ne peuvent pas coexister si elles ont la même balise. Au lieu de cela, la notification la plus récente écrasera la plus ancienne.

Prenons l’exemple du bouton précédent (sans balise). Si vous cliquez sur le bouton trois fois de suite, les trois notifications apparaîtront et s’empileront les unes sur les autres. Supposons maintenant que vous ayez ajouté la balise suivante à la notification :

 const notification = new Notification("Example notification", { 
  body: "This is more text",
  tag: "My new tag"
})

Si vous cliquez à 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 cliquerez sur le bouton. Ceci est utile si vous voulez ajouter des données dynamiques (comme Math.random()) au corps :

 const notification = new Notification("Example notification", { 
  body: Math.random()
  icon: "logo.png",
  tag: "My body tag"
})

Chaque fois que vous cliquez sur le bouton, un nouveau numéro apparaît. Utilisez la propriété tag si vous souhaitez remplacer une notification en cours par de nouvelles informations à l’intérieur de celle-ci. 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 à l’aide de 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 revenir :

 let notification
document.addEventListener("visibility-change", ()=> {
  if(document.visibilityState === "hidden") {
    notification = new Notification("Come back please", {
      body: "Don't leave just yet :("
      tag: "Come Back"
    })
  } else {
    notification.close()
  }
})

Chaque fois que vous perdrez le focus sur cette page, vous recevrez une notification vous demandant de revenir sur la page. Mais une fois que vous revenez sur la page, le code autre s’exécute, ce qui ferme la notification push. Cette technique est excellente dans les situations où vous souhaitez donner à l’utilisateur des informations après qu’il a quitté votre page.

En savoir plus sur JavaScript

La notification d’événements n’est qu’une des nombreuses fonctionnalités de JavaScript. Pour être vraiment doué avec les notifications, vous devez d’abord comprendre les caractéristiques fondamentales du langage et la syntaxe de JavaScript. Construire des jeux simples est l’un des moyens de renforcer vos compétences et de vous familiariser avec les concepts de base du langage.

Leave your vote

0 0 votes
Évaluation de l'article
S’abonner
Notification pour
guest
0 Commentaires
Commentaires en ligne
Afficher tous les commentaires

Log In

Forgot password?

Don't have an account? Register

Forgot password?

Enter your account data and we will send you a link to reset your password.

Your password reset link appears to be invalid or expired.

Log in

Privacy Policy

Add to Collection

No Collections

Here you'll find all collections you've created before.

0
Nous aimerions avoir votre avis, veuillez laisser un commentaire.x

Newsletter

inscrivez vous pour recevoir nos actualités

Actualités, astuces, bons plans et cadeaux !