Displaying notifications (deprecated)

  • Revision slug: Web/Guide/User_experience/Displaying_notifications_deprecated
  • Revision title: Displaying notifications
  • Revision id: 452531
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment Moved From Web/Guide/User_experience/Displaying_notifications to Web/Guide/User_experience/Displaying_notifications_deprecated

Revision Content

This non standard API has been droped in FIrefox 22 in favor of the standard API.

To see how to use the standard API, please read: Using Web Notifications

{{ gecko_minversion_header("2.0") }}{{ MobileOnlyHeader("2.0") }}{{deprecated_header(22)}}{{ non-standard_header() }}

Firefox offers support for "desktop notifications"; these are notifications that are displayed to the user outside the context of the web content, using the standard notification system provided by the operating system.

For example, on Android, notifications appear in the bar at the top of the screen, and in the panel that appears when you drag that bar downward.

Creating a notification

The first thing you need to do is create the notification object by using the {{ domxref("navigator.mozNotification") }} object's createNotification() method, as follows:

var notification = navigator.mozNotification.createNotification(
        "Hey, check this out!", "This is a notification posted by " +
        "Firefox 4. You should take some action. Right now!");

This returns a new {{ domxref("notification") }} object, but does not actually display the notification. This lets you configure the event listeners before the notification is shown, if you need to be notified when the notification is dismissed.

Setting up event listeners on the notification

There are two events you can listen for on the notification you've created:

onclick
This event is fired when the user clicks (or taps) on the notification.
onclose
This event is fired when the notification is closed (whether by being clicked or by some other means).
Note:  If the notification is dismissed by the user clicking on it, both events will get fired.

For example, let's simply append a little HTML to our document when these events fire:

notification.onclick = function() {
  var e = document.createElement("p");
  e.innerHTML = "<strong>The notification was clicked.</strong>";
  document.body.appendChild(e);
};
notification.onclose = function() {
  var e = document.createElement("p");
  e.innerHTML = "<strong>The notification was closed.</strong>";
  document.body.appendChild(e);
};

Displaying the notification

Once the notification is configured the way you want it to be, call its show() method to display the notification:

notification.show();

On Android, for example, the resulting notification panel looks like this:

alert.png

When the user taps on the "Hey, check this out!" notification here, the resulting changes to the document look like this:

afterevents.png

If you're using Firefox Mobile, you can see this example live by tapping the button below.

{{ DOMLiveSample("desktopnotification.html") }}

See also

  • {{ domxref("navigator.mozNotification") }}
  • {{ domxref("notification") }}

Revision Source

<div class="warning">
  <p style="text-align: center;"><strong>This non standard API has been droped in FIrefox 22 in favor of the standard API. </strong></p>
  <p style="text-align: center;"><strong>To see how to use the standard API, please read: <a href="/en-US/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Using Web Notifications</a></strong></p>
</div>
<p>{{ gecko_minversion_header("2.0") }}{{ MobileOnlyHeader("2.0") }}{{deprecated_header(22)}}{{ non-standard_header() }}</p>
<p><span class="seoSummary">Firefox offers support for "desktop notifications"; these are notifications that are displayed to the user outside the context of the web content, using the standard notification system provided by the operating system.</span></p>
<p>For example, on Android, notifications appear in the bar at the top of the screen, and in the panel that appears when you drag that bar downward.</p>
<h2 id="Creating_a_notification">Creating a notification</h2>
<p>The first thing you need to do is create the notification object by using the {{ domxref("navigator.mozNotification") }}&nbsp;object's <code>createNotification()</code>&nbsp;method, as follows:</p>
<pre class="brush: js">
var notification = navigator.mozNotification.createNotification(
        "Hey, check this out!", "This is a notification posted by " +
        "Firefox 4. You should take some action. Right now!");
</pre>
<p>This returns a new {{ domxref("notification") }}&nbsp;object, but does <strong>not</strong> actually display the notification. This lets you configure the event listeners before the notification is shown, if you need to be notified when the notification is dismissed.</p>
<h2 id="Setting_up_event_listeners_on_the_notification">Setting up event listeners on the notification</h2>
<p>There are two events you can listen for on the notification you've created:</p>
<dl>
  <dt>
    <code>onclick</code></dt>
  <dd>
    This event is fired when the user clicks (or taps)&nbsp;on the notification.</dd>
  <dt>
    <code>onclose</code></dt>
  <dd>
    This event is fired when the notification is closed (whether by being clicked or by some other means).</dd>
</dl>
<div class="note">
  <strong>Note:&nbsp;</strong> If the notification is dismissed by the user clicking on it, both events will get fired.</div>
<p>For example, let's simply append a little HTML&nbsp;to our document when these events fire:</p>
<pre class="brush: js">
notification.onclick = function() {
  var e = document.createElement("p");
  e.innerHTML = "&lt;strong&gt;The notification was clicked.&lt;/strong&gt;";
  document.body.appendChild(e);
};
notification.onclose = function() {
  var e = document.createElement("p");
  e.innerHTML = "&lt;strong&gt;The notification was closed.&lt;/strong&gt;";
  document.body.appendChild(e);
};</pre>
<h2 id="Displaying_the_notification">Displaying the notification</h2>
<p>Once the notification is configured the way you want it to be, call its <code>show()</code>&nbsp;method to display the notification:</p>
<pre class="brush: js">
notification.show();
</pre>
<p>On Android, for example, the resulting notification panel looks like this:</p>
<p><a href="/@api/deki/files/5041/=alert.png" title="alert.png"><img alt="alert.png" class="internal default" src="/@api/deki/files/5041/=alert.png?size=webview" style="width: 210px; height: 350px;" /></a></p>
<p>When the user taps on the "Hey, check this out!"&nbsp;notification here, the resulting changes to the document look like this:</p>
<p><a href="/@api/deki/files/5040/=afterevents.png" title="afterevents.png"><img alt="afterevents.png" class="internal default" src="/@api/deki/files/5040/=afterevents.png?size=webview" style="width: 350px; height: 164px; border: 1px solid black;" /></a></p>
<p>If you're using Firefox Mobile, you can see this example live by tapping the button below.</p>
<p>{{ DOMLiveSample("desktopnotification.html") }}</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ domxref("navigator.mozNotification") }}</li>
  <li>{{ domxref("notification") }}</li>
</ul>
Revert to this revision