Compare Revisions

User notifications

Change Revisions

Revision 600167:

Revision 600167 by chrisdavidmills on

Revision 621889:

Revision 621889 by franciov on

Title:
User notifications
User notifications
Slug:
Web/Apps/Build/User_notifications
Web/Apps/Build/User_notifications
Tags:
"API", "alarm", "Vibration", "NeedsExamples", "Notification", "NeedsLiveSample"
"API", "alarm", "Vibration", "NeedsExamples", "Notification", "NeedsLiveSample"
Content:

Revision 600167
Revision 621889
n9        <span class="seoSummary">When developing open web apps, an9        When developing Open Web Apps, a lot of what you'll want 
> lot of what you'll want to do involves controlling the display o>to do involves controlling the display or transmission of data to
>r transmission of data to the user in some way.</span> This can i> the user in some way. This can include giving notifications of d
>nclude giving the user notifications of different kinds to let th>ifferent kinds to users to let them know when some kind of event 
>em know when some kind of event has occured related to the app's >has occurred related to the app's running, and controlling variou
>running, and controlling various aspects of the user interface be>s aspects of the user interface behaviour.
>haviour The below articles follow this general themes. 
10      </p>
11      <p>
12        This article provides recommendations for managing notifi
 >cations in Open Web Apps, the most common use cases and the tools
 > to implement such features, along with FAQs and real-world examp
 >les for anyone needing more detailed information on how to use <a
 > href="/en-US/docs/Web/Guide/Events/Event_handlers">Event handler
 >s</a> and APIs such as the <a href="/en-US/docs/Web/API/Alarm_API
 >">Alarm API</a>, <a href="/en-US/docs/Web/API/notification">Notif
 >ication API</a>, <a href="/en-US/docs/Web/Guide/API/Vibration">Vi
 >bration API</a>, and more.
n12    <h2 id="Displaying_notifications">n15    <h2>
13      Displaying notifications16      User notifications workflow
n15    <dl>n
16      <dt>
17        <a href="/en-US/Apps/Build/User_notifications/Detecting_w
>hen_to_notify_users">Detecting when to notify users</a> 
18      </dt>
19      <dd>
20        Most of us are familiar with the concept of <a href="/en-
>US/docs/Web/Guide/API/DOM/Events/Event_handlers">event handlers</ 
>a>, and how we can use them to provide scripted responses to even 
>ts that occur in the program. But there is a lot more to think ab 
>out when working out how to determine when a certain set of condi 
>tions is true, from the point of view of a user's environment. Th 
>is article shares some thoughts on the subject. 
21      </dd>
22      <dt>
23        <a href="/en-US/Apps/Build/User_notifications/Checking_wh
>en_a_deadline_is_due">Checking when a deadline is due</a> 
24      </dt>
25      <dd>
26        In this article we look at a complex example involving ch
>ecking the current time and date against a deadline stored in a d 
>atabase. 
27      </dd>
28      <dt>
29        <a href="/en-US/Apps/Build/User_notifications/Notifying_u
>sers_via_the_Notification_and_Vibration">Notifying users via the  
>Notification and Vibration APIs</a> 
30      </dt>
31      <dd>
32        Once you have successfully detected the occurence of an e
>vent, the next step is respond to it. One of the most basic respo 
>nses you can give is to provide the user with a notification to l 
>et them know something useful, and the <a href="/en-US/docs/Web/A 
>PI/notification">Notification</a> and <a href="/en-US/docs/Web/Gu 
>ide/API/Vibration">Vibration</a> APIs provide immediate simple an 
>d effective system-wide feedback. This article explains how to us 
>e both of them in context. 
33      </dd>
34      <dt>
35        <a href="/en-US/Apps/Build/User_notifications/Using_Alarm
>s_to_notify_users">Using alarms to notify users</a> 
36      </dt>
37      <dd>
38        The <a href="/en-US/docs/WebAPI/Alarm">Alarm API</a> is a
>nother tool at your disposal for providing a user with a system n 
>otification, providing a more simplistic workflow for automatical 
>ly setting notification deadlines and checking when they are due, 
> rather than having to do all this manually via some kind of regu 
>lar timer and complex checking function like we did in the previo 
>us article. This article shows how it's done. 
39      </dd>
40    </dl>
tt19      The following diagram illustrates the typical workflow for 
 >managing notifications.
20    </p>
21    <p style="margin-left: 40px;">
22      Detect when to notify users -----&gt; notify users
23    </p>
24    <p>
25      Detecting when to notify users is the first step to take in
 >to consideration when building apps requiring giving notification
 >s to users. This is usually implemented through event handlers or
 > polling functions.<br>
26      <br>
27      Notifications can be of different types, depending on the e
 >vent that has been detected for instance, in order to provide the
 > user experience that suits best for each kind of events.
28    </p>
29    <h2>
30      Recommendations
31    </h2>
32    <p>
33      Notifications can be useful in a number of ways in differen
 >t kind of applications:&nbsp; notifying users about a new incomin
 >g message in a instant messaging application, special events in g
 >ame apps, deadlines dates in to-do-list applications, and so on. 
 >The following is a set of recommendations and best practices for 
 >managing notifications.
34    </p>
35    <h3>
36      Detect when to notify users
37    </h3>
38    <p>
39      Detecting when to notify users is the first step to take in
 >to consideration when building apps requiring giving notification
 >s to users. This is usually implemented through event handlers or
 > polling functions.
40    </p>
41    <h4>
42      Event handlers
43    </h4>
44    <p>
45      The Web Platform relies on JavaScript, that is an event-dri
 >ven programming language, therefore events are the standard way w
 >ith which Open Web Apps respond to the various inputs and happeni
 >ngs. Event handlers can be attached to Javascript objects or to e
 >lement nodes inside a DOM tree, so that when an occurrence of an 
 >event is detected, a notification about the event can be sent to 
 >the user. Events such as <code>onclick</code>, <code>onfocus</cod
 >e> or <code>onkeydown</code> are typically attached to DOM elemen
 >ts such as a <code>div</code> or a <code>button</code>, and are r
 >elated to user inputs which depends on the input capabilities of 
 >the device in which the app is running. The <code>onload</code> a
 >nd <code>onresize</code> events are typically attached to the <co
 >de>window</code> javascript object, along with <code>Window.ondev
 >iceorientation</code> and <code>Window.ondevicelight</code>, whic
 >h handle changes in device orientation and ambient light around t
 >he device, or even more advanced event such as <code>BatteryManag
 >er.onlevelchange</code> which provides information about the batt
 >ery status. In addition, many APIs have access to event handlers 
 >on callback functions: <code>onerror</code> and <code>onsuccess</
 >code> typically. You can find a comprehensive list of events on t
 >he MDN Event reference.<br>
46      <br>
47      We recommend using events provided by the Web Platform if a
 >vailable and supported enough for your needs, otherwise using pop
 >ular tools such as Modernizr or PhoneGap in order to build future
 > friendly applications.
48    </p>
49    <h4>
50      Responding to other conditions in your app
51    </h4>
52    <p>
53      Events are great, but in some cases the event that suits ex
 >actly the required condition might not exist in the Web Platform,
 > thus you have to use a combination of events, setting an alarm t
 >hrough the Alarm API, or periodically check for a given condition
 > to be true, via window.setInterval() or window.requestAnimationF
 >rame.
54    </p>
55    <h3>
56      Notify users
57    </h3>
58    <p>
59      Notifications can be of different types, depending on the e
 >vent that has been detected for instance, in order to provide the
 > user experience that suits best for each kind of events. Open We
 >b Apps typically give a notification to users by displaying text 
 >messages, vibrating, with a sound, or a combination of them.
60    </p>
61    <h4>
62      Notify by DOM manipulation
63    </h4>
64    <p>
65      The easiest way to notify users about an event is providing
 > the information to the user inside the application by manipulati
 >ng the DOM calling Javascript methods such as setAttribute, appen
 >d or innerHTML on DOM Elements.
66    </p>
67    <h4>
68      Notify by system notifications
69    </h4>
70    <p>
71      If User Experience is crucial for you, and usually it is, y
 >ou might need a way to notify users about an event when the appli
 >cation is not running or is running in background.<br>
72      <br>
73      The Notification API provides a Javascript object used to c
 >onfigure and display system notifications to the user:
74    </p>
75    <pre class="brush: js">
76new Notification('This is a notification message');
77</pre>
78    <p>
79      The code above is related to the to-do-list demo applicatio
 >n you can find in the Examples section, and produces a notificati
 >on that is displayed differently depending on the operating syste
 >m. The images below shows how the notification appears on Mac, An
 >droid, and Firefox operating systems.
80    </p>
81    <h4>
82      Notify by vibrating
83    </h4>
84    <p>
85      Most modern mobile devices include vibration hardware, so w
 >hy not providing a physical feedback to the user when an importan
 >t event comes up. The Vibration API offers Web apps the ability t
 >o access this hardware though Javascript:
86    </p>
87    <pre class="brush: js">
88window.navigator.vibrate(200);
89</pre>
90    <p>
91      Running the code above from your applications it will make 
 >the hosting device vibrate for 200 milliseconds. Please have a lo
 >ok at the Vibration API documentation for implementing vibrations
 > patterns and other advanced features.<br>
92      <br>
93      Since physical feedback might be annoying for some users or
 > in certain situations, we recommend to provide a way for the use
 >r to disable/enable vibration feedback: this is usually implement
 >ed in a settings section inside the application.
94    </p>
95    <h4>
96      Notify with a sound
97    </h4>
98    <p>
99      If you want to notify the user using a sound, the Web Audio
 > API gives you the possibility to do that. In the tutorial sectio
 >ns you will find an MDN tutorial explaining the basics of using t
 >he Web Audio API, via a couple of fairly simple examples.
100    </p>
101    <h2>
102      Examples
103    </h2>
104    <p>
105      <a href="/en-US/Apps/Build/User_notifications/Detecting_whe
 >n_to_notify_users"><strong>Detecting when to notify users</strong
 >></a><br>
106      Most of us are familiar with the concept of event handlers,
 > and how we can use them to provide scripted responses to events 
 >that occur in the program. But there is a lot more to think about
 > when working out how to determine when a certain set of conditio
 >ns is true, from the point of view of a user's environment. This 
 >article shares some thoughts on the subject.<br>
107      <br>
108      <a href="/en-US/Apps/Build/User_notifications/Checking_when
 >_a_deadline_is_due"><strong>To do list (part 1 of 2) - Checking w
 >hen a deadline is due</strong></a><br>
109      In this article we look at a complex example involving chec
 >king the current time and date against a deadline stored in a dat
 >abase.<br>
110      <br>
111      <a href="/en-US/Apps/Build/User_notifications/Notifying_use
 >rs_via_the_Notification_and_Vibration"><strong>To do list (part 2
 > of 2) - Notifying users via the Notification and Vibration APIs<
 >/strong></a><br>
112      Once you have successfully detected the occurence of an eve
 >nt, the next step is respond to it. One of the most basic respons
 >es you can give is to provide the user with a notification to let
 > them know something useful, and the Notification and Vibration A
 >PIs provide immediate simple and effective system-wide feedback. 
 >This article explains how to use both of them in context.<br>
113      <br>
114      <a href="/en-US/Apps/Build/User_notifications/Using_Alarms_
 >to_notify_users"><strong>To do list (part 3 of 3) - Using alarms 
 >to notify users</strong></a><br>
115      The Alarm API is another tool at your disposal for providin
 >g a user with a system notification, providing a more simplistic 
 >workflow for automatically setting notification deadlines and che
 >cking when they are due, rather than having to do all this manual
 >ly via some kind of regular timer and complex checking function l
 >ike we did in the previous article. This article shows how it's d
 >one.
116    </p>
117    <h2>
118      Tutorials
119    </h2>
120    <ul>
121      <li>
122        <a href="/en-US/docs/Web/API/Notification/Using_Web_Notif
 >ications">Using Web Notifications</a>
123      </li>
124      <li>
125        <a href="http://davidwalsh.name/vibration-api">Vibration 
 >API - David Walsh</a>
126      </li>
127      <li>
128        <a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audi
 >o_API">Using the Web Audio API</a>
129      </li>
130    </ul>
131    <h2>
132      Reference
133    </h2>
134    <p>
135      &nbsp;
136    </p>
137    <ul>
138      <li>
139        <a href="/en-US/docs/Web/Guide/Events/Event_handlers">Eve
 >nt handlers</a>
140      </li>
141      <li>
142        <a href="/en-US/docs/Web/API/Alarm_API">Alarm API</a>
143      </li>
144      <li>
145        <a href="/en-US/docs/Web/API/notification">Notification A
 >PI</a>
146      </li>
147      <li>
148        <a href="/en-US/docs/Web/Guide/API/Vibration">Vibration A
 >PI</a>
149      </li>
150      <li>
151        <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API
 ></a>
152      </li>
153    </ul>
154    <p>
155      <br>
156      <br>
157      <br>

Back to History