Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Notification

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

Résumé

L'objet Notification est utilisé pour configurer et afficher les notifications desktop à l'utilisateur.

Constructeur

var notification = new Notification(title, options)

Paramètres

title
L'intitulé qui doit être montré avec la notification.
options Facultatif
C'est un objet qui permet de configurer la notification. Il peut avoir les propriétés suivantes :
dir : Le sens du texte de la notification ; Ce peut être auto, ltr, or rtl.
lang : Spécifie la langue utilisée dans la notification. Cette chaîne doit être un BCP 47 language tag.
body : Une chaîne représentant un contenu supplémentaire à afficher dans la notification.
tag : Un identifiant pour une notification donnée qui permet de la récupérer, la remplacer ou la supprimer si besoin.
icon : l'URL d'une image à utiliser comme icône par la notification.

Propriétés

Static properties

Those properties are available only on the Notification object itself.

Notification.permission Lecture seule
A string representing the current permission to display notifications. Possible value are: denied (the user refuses to have notifications displayed), granted (the user accepts to have notifications displayed), or default (the user choice is unknown and therefore the browser will act as if the value was denied).

Instance properties

Those properties are available only on instances of the Notification object.

Notification.dir Lecture seule
The direction used by the notification as defined within the constructor options.
Notification.lang Lecture seule
The code lang used by the notification as defined within the constructor options.
Notification.body Lecture seule
The body string used by the notification as defined within the constructor options.
Notification.tag Lecture seule
The id of the notification (if any) as defined within the constructor options.
Notification.icon Lecture seule
The URL of the image used as an icon as defined within the constructor options.

Event handlers

Notification.onclick
A handler for the click event. It is triggered each time the user clicks on the notification.
Notification.onshow
A handler for the show event. It is triggered when the notification is displayed.
Notification.onerror
A handler for the error event. It is triggered each time the notification encounters an error.
Notification.onclose
A handler for the close event. It is triggered when the user closes the notification.

Méthodes

Static methods

Those methods are available only on the Notification object itself.

Notification.requestPermission()
This method is used to ask the user if he allows the page to display notifications.

Instance methods

Those properties are available only on an instance of the Notification object or through its prototype.

Notification.close()
This method allows to programmatically close a notification.

The Notification objects also inherit from the EventTarget interface.

EventTarget.addEventListener()
Register an event handler of a specific event type on the EventTarget.
EventTarget.removeEventListener()
Removes an event listener from the EventTarget.
EventTarget.dispatchEvent()
Dispatch an event to this EventTarget.

Additional methods for Mozilla chrome code

Mozilla extensions for use by JS-implemented event targets to implement on* properties. See also WebIDL bindings.

  • void setEventHandler(DOMString type, EventHandler handler)
  • EventHandler getEventHandler(DOMString type)

 

Exemple

Voici un peu de HTML :

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

Il est possible d'envoyer une notification comme suit :

function notifyMe() {
  // Voyons si le navigateur supporte les notifications
  if (!("Notification" in window)) {
    alert("Ce navigateur ne supporte pas les notifications desktop");
  }

  // Voyons si l'utilisateur est OK pour recevoir des notifications
  else if (Notification.permission === "granted") {
    // Si c'est ok, créons une notification
    var notification = new Notification("Salut toi !");
  }

  // Sinon, nous avons besoin de la permission de l'utilisateur
  // Note : Chrome n'implémente pas la propriété statique permission
  // Donc, nous devons vérifier s'il n'y a pas 'denied' à la place de 'default'
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {

      // Quelque soit la réponse de l'utilisateur, nous nous assurons de stocker cette information
      if(!('permission' in Notification)) {
        Notification.permission = permission;
      }

      // Si l'utilisateur est OK, on crée une notification
      if (permission === "granted") {
        var notification = new Notification("Salut toi !");
      }
    });
  }

  // Comme ça, si l'utlisateur a refusé toute notification, et que vous respectez ce choix,
  // il n'y a pas besoin de l'ennuyer à nouveau.
}

See the live result

Spécifications

Specification Status Comment
Notifications API Recommendation Initial specification.

Permissions

When using notifications  in an open web app, be sure to add the desktop-notification permission in your manifest file. Notifications can be used at any permission level, hosted or above.

"permissions": {
    "desktop-notification":{}
}

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 5 webkit (see notes)
22
4.0 moz (see notes)
22
Pas de support ? 6 (see notes)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? 4.0 moz (see notes)
22
Pas de support ? ?

Gecko notes

  • Prior to Firefox 22 (Firefox OS <1.2), the instantiation of a new notification must be done with the navigator.mozNotification object through its createNotification method.
  • Prior to Firefox 22 (Firefox OS <1.2), the Notification was displayed when calling the show method and was supporting the click and close events only.
  • Nick Desaulniers has written a Notification shim to cover both newer and older implementations.
  • One particular Firefox OS issue is that you can pass a path to an icon to use in the notification, but if the app is packaged you cannot use a relative path like /my_icon.png. You also can't use navigator.location.origin + "/my_icon.png" because navigator.location.origin is null in packaged apps. The manifest origin field fixes this, but it is only available in Firefox OS 1.1+. A potential solution for supporting Firefox OS <1.1 is to pass an absolute URL to an externally hosted version of the icon. This is less than ideal as the notification is displayed immediately with the icon missing, then the icon is fetched, but it works on all versions of Firefox OS.

Chrome notes

Safari notes

  • Safari started supporting notification with Safari 6 but only on Mac OSX 10.8+ (Mountain Lion).

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : robin850, Omnilaika02, AshfaqHossain, P45QU10U
 Dernière mise à jour par : robin850,