Compare Revisions

Displaying notifications (deprecated)

Change Revisions

Revision 92965:

Revision 92965 by Sheppy on

Revision 92966:

Revision 92966 by Sheppy on

Title:
Displaying notifications
Displaying notifications
Slug:
DOM/Displaying_notifications
DOM/Displaying_notifications
Tags:
DOM, Mobile, Notifications
DOM, Mobile, Notifications
Content:

Revision 92965
Revision 92966
tt16    <h2 id="Creating_a_notification">
17      Creating a notification
18    </h2>
19    <p>
20      The first thing you need to do is create the notification o
 >bject by using the {{ domxref("navigator.mozNotification") }}&nbs
 >p;object's <code>createNotification()</code>&nbsp;method, as foll
 >ows:
21    </p>
22    <pre class="brush: js">
23var notification = navigator.mozNotification.createNotification(
24        "Hey, check this out!", "This is a notification posted by
 > " +
25        "Firefox 4. You should take some action. Right now!");
26</pre>
27    <p>
28      This returns a new {{ domxref("notification") }}&nbsp;objec
 >t, but does <strong>not</strong> actually display the notificatio
 >n. This lets you configure the event listeners before the notific
 >ation is shown, if you need to be notified when the notification 
 >is dismissed.
29    </p>
30    <h2 id="Setting_up_event_listeners_on_the_notification">
31      Setting up event listeners on the notification
32    </h2>
33    <p>
34      There are two events you can listen for on the notification
 > you've created:
35    </p>
36    <dl>
37      <dt>
38        <code>onclick</code>
39      </dt>
40      <dd>
41        This event is fired when the user clicks (or taps)&nbsp;o
 >n the notification.
42      </dd>
43      <dt>
44        <code>onclose</code>
45      </dt>
46      <dd>
47        This event is fired when the notification is closed (whet
 >her by being clicked or by some other means).
48      </dd>
49    </dl>
50    <div class="note">
51      <strong>Note:&nbsp;</strong> If the notification is dismiss
 >ed by the user clicking on it, both events will get fired.
52    </div>
53    <p>
54      For example, let's simply append a little HTML&nbsp;to our 
 >document when these events fire:
55    </p>
56    <pre class="brush: js">
57notification.onclick = function() {
58  var e = document.createElement("p");
59  e.innerHTML = "&lt;strong&gt;The notification was clicked.&lt;/
 >strong&gt;";
60  document.body.appendChild(e);
61};
62notification.onclose = function() {
63  var e = document.createElement("p");
64  e.innerHTML = "&lt;strong&gt;The notification was closed.&lt;/s
 >trong&gt;";
65  document.body.appendChild(e);
66};
67</pre>
68    <h2 id="Displaying_the_notification">
69      Displaying the notification
70    </h2>
71    <p>
72      Once the notification is configured the way you want it to 
 >be, call its <code>show()</code>&nbsp;method to display the notif
 >ication:
73    </p>
74    <pre class="brush: js">
75notification.show();
76</pre>
77    <p>
78      On Android, for example, the resulting notification panel l
 >ooks like this:
79    </p>
80    <p>
81      <a href="/@api/deki/files/5041/=alert.png" title="alert.png
 >"><img alt="alert.png" class="internal default" src="/@api/deki/f
 >iles/5041/=alert.png?size=webview" style="width: 210px; height: 3
 >50px;"></a>
82    </p>
83    <p>
84      When the user taps on the "Hey, check this out!"&nbsp;notif
 >ication here, the resulting changes to the document look like thi
 >s:
85    </p>
86    <p>
87      <a href="/@api/deki/files/5040/=afterevents.png" title="aft
 >erevents.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>
88    </p>
89    <p>
90      If you're using Firefox Mobile, you can see this example li
 >ve by tapping the button below.
91    </p>
92    <p>
93      {{ DOMLiveSample("desktopnotification.html") }}
94    </p>
95    <h2 id="See_also">
96      See also
97    </h2>
98    <ul>
99      <li>{{ domxref("navigator.mozNotification") }}
100      </li>
101      <li>{{ domxref("notification") }}
102      </li>
103    </ul>

Back to History