[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/fr/docs/Web/API/Notification [Back]  [Original]

Notification - Les API Web | MDN

Cette page a t traduite partir de l'anglais par la communaut. Vous pouvez contribuer en rejoignant la communaut francophone sur MDN Web Docs.

View in English Always switch to English

Notification

Disponibilit limite

Cette fonctionnalit n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utiliss.

Vous voulez une meilleure prise en charge pour cette fonctionnalit ? Dites-nous pourquoi.

Note : Cette fonctionnalit est disponible via les Web Workers.

Contexte scuris: Cette fonctionnalit est uniquement disponible dans des contextes scuriss (HTTPS), pour certains navigateurs qui la prennent en charge.

L'interface Notification de l'API Notifications est utilise pour configurer et afficher les notifications de bureau l'utilisateur. L'apparence et les fonctionnalits spcifiques de ces notifications varient selon les plates-formes, mais elles permettent gnralement de fournir des informations de manire asynchrone l'utilisateur.

Dans cet article

Constructeur

Notification()

Crer une nouvelle instance de l'object Notification.

Proprits

Proprits statiques

Ces proprits ne sont disponibles que sur l'objet Notification lui-mme.

Notification.permission Lecture seule

Une chane reprsentant l'autorisation actuelle d'afficher les notifications. Les valeurs possibles sont:

  • denied L'utilisateur refuse d'afficher des notifications.
  • granted L'utilisateur accepte d'afficher des notifications.
  • default Le choix de l'utilisateur est inconnu et donc le navigateur agira comme si la valeur tait refuse.
Notification.maxActions Lecture seule

Le nombre maximal d'actions pris en charge par l'appareil et l'agent utilisateur.

Proprits de l'instance

Ces proprits ne sont disponibles que sur les instances de l'objet Notification.

Notification.actions Lecture seule

Tableau d'actions de la notification comme spcifi dans le paramtre options du constructeur.

Notification.badge Lecture seule

L'URL de l'image utilise pour reprsenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-mme.

Notification.body Lecture seule

Une chane reprsentant le corps de la notification telle que spcifie dans le paramtre options du constructeur.

Notification.data Lecture seule

Renvoie un clone structur des donnes de la notification.

Notification.dir Lecture seule

La direction du texte de la notification comme spcifi dans le paramtre options du constructeur.

Notification.lang Lecture seule

Code de langue de la notification tel que spcifi dans le paramtre options du constructeur.

Notification.tag Lecture seule

L'ID de la notification (le cas chant) tel que spcifi dans le paramtre options du constructeur.

Notification.icon Lecture seule

L'URL de l'image utilise comme icne de la notification comme spcifi dans le paramtre options du constructeur.

Notification.image Lecture seule

L'URL d'une image afficher dans le cadre de la notification, comme spcifi dans le paramtre options du constructeur.

Notification.renotify Lecture seule

Spcifie si l'utilisateur doit tre averti aprs qu'une nouvelle notification remplace l'ancienne.

Notification.requireInteraction Lecture seule

Un Boolean indiquant qu'une notification doit rester active jusqu' ce que l'utilisateur clique dessus ou la rejette, plutt que de se fermer automatiquement.

Notification.silent Lecture seule

Spcifie si la notification doit tre silencieuse, c'est--dire qu'aucun son ou vibration ne doit tre mis, quels que soient les paramtres de l'appareil.

Notification.timestamp Lecture seule

Spcifie l'heure laquelle une notification est cre ou applicable (passe, prsente ou future).

Notification.title Lecture seule

Le titre de la notification tel que spcifi dans le premier paramtre du constructeur.

Notification.vibrate Lecture seule

Spcifie un modle de vibration pour les priphriques dots d'un matriel de vibration mettre.

Gestionnaires d'vnements

Notification.onclick

Un gestionnaire pour l'vnement click. Il est dclench chaque fois que l'utilisateur clique sur la notification.

Notification.onclose

Un gestionnaire pour l'vnement close. Il est dclench lorsque l'utilisateur ferme la notification.

Notification.onerror

Un gestionnaire pour l'vnement error. Il est dclench chaque fois que la notification rencontre une erreur.

Notification.onshow

Un gestionnaire pour l'vnement show. Il est dclench lorsque la notification est affiche.

Mthodes

Mthodes statiques

Ces mthodes ne sont disponibles que sur l'objet Notification lui-mme.

Notification.requestPermission()

Demande l'autorisation l'utilisateur d'afficher les notifications.

Mthodes d'instance

Ces proprits ne sont disponibles que sur une instance de l'objet Notification ou via son prototype. L'objet Notification hrite galement de l'interface EventTarget.

Notification.close()

Ferme programmatiquement une instance de notification.

Exemples

Supposons ce HTML de base:

html
<button >Notifie moi !</button>

Il est possible d'envoyer une notification comme suit - nous prsentons ici un ensemble de code assez dtaill et complet que vous pourriez utiliser si vous vouliez d'abord vrifier si les notifications sont prises en charge, puis vrifiez si l'autorisation a t accorde pour l'origine actuelle d'envoyer des notifications, puis demander l'autorisation si ncessaire, avant d'envoyer une notification.

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

  // Vrifions si les autorisations de notification ont dj t accordes
  else if (Notification.permission === "granted") {
    // Si tout va bien, crons 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, crons 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 ncessaire de les dranger.
}

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 croise, avec d'autres navigateurs suivre. Pour voir un exemple en action, consultez notre exemple de liste de tches (voir galement l'application en cours d'excution.)

Note : Dans l'exemple ci-dessus, nous gnrons des notifications en rponse un geste de l'utilisateur (en cliquant sur un bouton). Il ne s'agit pas seulement d'une bonne pratique - vous ne devriez pas envoyer de spam aux utilisateurs avec des notifications qu'ils n'acceptent pas - mais les navigateurs suivants interdiront explicitement les notifications non dclenches en rponse un geste de l'utilisateur. Firefox le fait dj depuis la version 72, par exemple.

Spcifications

Spcification
Notifications API
# notification

Compatibilit des navigateurs

Voir aussi


Web Proxy Viewer  |  New URL  |  Original Page