Your Search Results


    この記事はまだ日本語に翻訳されていません。MDN の翻訳はボランティアによって行われています。是非 MDN に登録し、私たちの力になって下さい。

    This is an experimental technology
    Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.


    The Notification object is used to configure and display desktop notifications to the user.


    var notification = new Notification(title, options)


    The title that must be shown within the notification
    options Optional
    An object that allows to configure the notification. It can have the following properties:
    • dir : The direction of the notification; it can be auto, ltr, or rtl
    • lang: Specify the lang used within the notification. This string must be a valid BCP 47 language tag.
    • body: A string representing an extra content to display within the notification
    • tag: An ID for a given notification that allows to retrieve, replace or remove it if necessary
    • icon: The URL of an image to be used as an icon by the notification


    Static properties

    Those properties are available only on the Notification object itself.

    Notification.permission Read only
    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.title Read only (moz only)
    The title specified when the constructor was invoked.
    Notification.dir Read only
    The direction used by the notification as defined within the constructor options.
    Notification.lang Read only
    The code lang used by the notification as defined within the constructor options.
    Notification.body Read only
    The body string used by the notification as defined within the constructor options.
    Notification.tag Read only
    The id of the notification (if any) as defined within the constructor options.
    Notification.icon Read only
    The URL of the image used as an icon as defined within the constructor options.

    Event handlers

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


    Static methods

    Those methods are available only on the Notification object itself.

    This method is used to ask the user for permission for the page to display notifications. This method must be called as the result of a user action (eg: onclick callback), and cannot be used without it.

    Instance methods

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

    This method allows to programmatically close a notification.

    The Notification objects also inherit from the EventTarget interface.

    Register an event handler of a specific event type on the EventTarget.
    Removes an event listener from the EventTarget.
    Dispatch an event to this EventTarget.


    Assume this basic HTML:

    <button onclick="notifyMe()">Notify me!</button>

    It's possible to send a notification as follows:

    function notifyMe() {
      // Let's check if the browser supports notifications
      if (!("Notification" in window)) {
        alert("This browser does not support desktop notification");
      // Let's check if the user is okay to get some notification
      else if (Notification.permission === "granted") {
        // If it's okay let's create a notification
        var notification = new Notification("Hi there!");
      // Otherwise, we need to ask the user for permission
      else if (Notification.permission !== 'denied') {
        Notification.requestPermission(function (permission) {
          // If the user is okay, let's create a notification
          if (permission === "granted") {
            var notification = new Notification("Hi there!");
      // At last, if the user already denied any notification, and you 
      // want to be respectful there is no need to bother them any more.

    See the live result


    Specification Status Comment
    Web Notifications Working Draft Initial specification.


    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": {

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 5 webkit (see notes)
    4.0 moz (see notes)
    Not supported 25 6 (see notes)
    Feature Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
    Basic support ? 4.0 moz (see notes)
    1.0.1 moz (see notes)
    Not supported ? Not supported

    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 window.location.origin + "/my_icon.png" because window.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).

    See also