mozilla

Revision 401539 of Displaying notifications (deprecated)

  • Revision slug: Web/Guide/User_experience/Displaying_notifications
  • Revision title: Displaying notifications
  • Revision id: 401539
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment add content; 410 words addedDOM/Displaying_notifications Web/Guide/User_experience/Displaying_notifications

Revision Content

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

Firefox Mobile 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

<p>{{ gecko_minversion_header("2.0") }}{{ MobileOnlyHeader("2.0") }}{{ non-standard_header() }}</p>
<p>Firefox Mobile 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.</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") }} object's <code>createNotification()</code> 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") }} 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) 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: </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 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> 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!" 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