Notification

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

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

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

• Prior to Chrome 22, the support for notification was following an old prefixed version of the specification and was using the navigator.webkitNotifications object to instantiate a new notification.
• Prior to Chrome 32, Notification.permission was not supported.

Safari notes

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

Voir aussi

• Using Web Notifications