Notification.requestPermission()

La dernière spécification a mis à jour cette méthode avec une syntaxe basée sur une promesse qui fonctionne comme ceci:

Notification.requestPermission()
  .then((permission) => { ... })

Auparavant, la syntaxe était basée sur un simple rappel; cette version est désormais obsolète:

Notification.requestPermission(callback);

callback Facultatif Obsolète

Une fonction de rappel facultative qui est appelée avec la valeur d'autorisation. Déconseillé en faveur de la valeur de retour de la promesse.

Une Promesse qui se résout en une DOMString avec la permission choisie par l'utilisateur. Les valeurs possibles pour cette chaîne sont:

• granted
• denied
• default

Supposons ce HTML de base:

<button onclick="notifyMe()">Notifie moi !</button>

Il est possible d'envoyer une notification comme suit - nous présentons ici un ensemble de code assez détaillé et complet que vous pourriez utiliser si vous vouliez d'abord vérifier si les notifications sont prises en charge, puis vérifiez si l'autorisation a été accordée pour l'origine actuelle d'envoyer des notifications, puis demander l'autorisation si nécessaire, avant d'envoyer une notification.

function notifyMe() {
  // Vérifions si le navigateur prend en charge les notifications
  if (!("Notification" in window)) {
    alert("Ce navigateur ne prend pas en charge la notification de bureau");
  }

  // Vérifions si les autorisations de notification ont déjà été accordées
  else if (Notification.permission === "granted") {
    // Si tout va bien, créons une notification
    const notification = new Notification("Salut toi!");
  }

  // Sinon, nous devons demander la permission à l'utilisateur
  else if (Notification.permission !== "denied") {
    Notification.requestPermission().then((permission) => {
      // Si l'utilisateur accepte, créons une notification
      if (permission === "granted") {
        const notification = new Notification("Salut toi!");
      }
    });
  }

  // Enfin, si l'utilisateur a refusé les notifications, et que vous
  // voulez être respectueux, il n'est plus nécessaire de les déranger.
}

Nous ne montrons plus d'exemple en direct sur cette page, car Chrome et Firefox n'autorisent plus les demandes de notification des <iframe>s d'origine croisée, avec d'autres navigateurs à suivre. Pour voir un exemple en action, consultez notre exemple de liste de tâches (voir également l'application en cours d'exécution.)

• Utilisation de l'API Notifications