mozilla

Compare Revisions

User notifications

Change Revisions

Revision 621889:

Revision 621889 by franciov on

Revision 621895:

Revision 621895 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 621889
Revision 621895
n15    <h2>n15    <h2 id="User_notifications_workflow">
n29    <h2>n29    <h2 id="Recommendations">
n35    <h3>n35    <h3 id="Detect_when_to_notify_users">
n41    <h4>n41    <h4 id="Event_handlers">
n45      The Web Platform relies on JavaScript, that is an event-drin45      The Web Platform relies on JavaScript, that is an event-dri
>ven programming language, therefore events are the standard way w>ven programming language, therefore events are the standard way w
>ith which Open Web Apps respond to the various inputs and happeni>ith which Open Web Apps respond to the various inputs and happeni
>ngs. Event handlers can be attached to Javascript objects or to e>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 >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 >event is detected, a notification about the event can be sent to 
>the user. Events such as <code>onclick</code>, <code>onfocus</cod>the user. Events such as <code>onclick</code>, <code>onfocus</cod
>e> or <code>onkeydown</code> are typically attached to DOM elemen>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>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 >elated to user inputs which depends on the input capabilities of 
>the device in which the app is running. The <code>onload</code> a>the device in which the app is running. The <code>onload</code> a
>nd <code>onresize</code> events are typically attached to the <co>nd <code>onresize</code> events are typically attached to the <co
>de>window</code> javascript object, along with <code>Window.ondev>de>window</code> javascript object, along with <code>Window.ondev
>iceorientation</code> and <code>Window.ondevicelight</code>, whic>iceorientation</code> and <code>Window.ondevicelight</code>, whic
>h handle changes in device orientation and ambient light around t>h handle changes in device orientation and ambient light around t
>he device, or even more advanced event such as <code>BatteryManag>he device, or even more advanced event such as <code>BatteryManag
>er.onlevelchange</code> which provides information about the batt>er.onlevelchange</code> which provides information about the batt
>ery status. In addition, many APIs have access to event handlers >ery status. In addition, many APIs have access to event handlers 
>on callback functions: <code>onerror</code> and <code>onsuccess</>on callback functions: <code>onerror</code> and <code>onsuccess</
>code> typically. You can find a comprehensive list of events on t>code> typically. You can find a comprehensive list of events on t
>he MDN Event reference.<br>>he <a href="/en-US/docs/Web/Events">MDN Event reference</a>.<br>
n47      We recommend using events provided by the Web Platform if an47      We recommend using events provided by the Web Platform if a
>vailable and supported enough for your needs, otherwise using pop>vailable and supported enough for your needs, otherwise using pop
>ular tools such as Modernizr or PhoneGap in order to build future>ular tools such as <a href="http://modernizr.com/">Modernizr</a> 
> friendly applications.>or <a href="http://phonegap.com/">PhoneGap</a> in order to build 
 >future friendly applications.
n49    <h4>n49    <h4 id="Responding_to_other_conditions_in_your_app">
n53      Events are great, but in some cases the event that suits exn53      Events are great, but in some cases the event that suits ex
>actly the required condition might not exist in the Web Platform,>actly the required condition might not exist in the Web Platform,
> thus you have to use a combination of events, setting an alarm t> thus you have to use a combination of events, setting an alarm t
>hrough the Alarm API, or periodically check for a given condition>hrough the <a href="/en-US/docs/Web/API/Alarm_API">Alarm API</a>,
> to be true, via window.setInterval() or window.requestAnimationF> or periodically check for a given condition to be true, via <a h
>rame.>ref="/en-US/docs/Web/API/window.setInterval"><code>window.setInte
 >rval</code></a> or <a href="/en-US/docs/Web/API/window.requestAni
 >mationFrame"><code>window.requestAnimationFrame</code></a>.
n55    <h3>n55    <h3 id="Notify_users">
n61    <h4>n61    <h4 id="Notify_by_DOM_manipulation">
n67    <h4>n67    <h4 id="Notify_by_system_notifications">
n73      The Notification API provides a Javascript object used to cn73      The <a href="/en-US/docs/Web/API/notification">Notification
>onfigure and display system notifications to the user:> API</a> provides a Javascript object used to configure and displ
 >ay system notifications to the user:
n79      The code above is related to the to-do-list demo application79      The code above is related to the to-do-list demo applicatio
>n you can find in the Examples section, and produces a notificati>n you can find in the <a href="#Examples">Examples section</a>, a
>on that is displayed differently depending on the operating syste>nd produces a notification that is displayed differently dependin
>m. The images below shows how the notification appears on Mac, An>g on the operating system.
>droid, and Firefox operating systems. 
n81    <h4>n81    <h4 id="Notify_by_vibrating">
n85      Most modern mobile devices include vibration hardware, so wn85      Most modern mobile devices include vibration hardware, so w
>hy not providing a physical feedback to the user when an importan>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>t event comes up. The <a href="/en-US/docs/Web/Guide/API/Vibratio
>o access this hardware though Javascript:>n">Vibration API</a> offers Web apps the ability to access this h
 >ardware though Javascript:
n93      Since physical feedback might be annoying for some users orn93      Since physical feedback might be annoying for some users or
> in certain situations, we recommend to provide a way for the use> in certain situations: we recommend to provide a way for the use
>r to disable/enable vibration feedback: this is usually implement>r to disable/enable vibration feedback. This is usually implement
>ed in a settings section inside the application.>ed in a settings section inside the application.
n95    <h4>n95    <h4 id="Notify_with_a_sound">
n99      If you want to notify the user using a sound, the Web Audion99      If you want to notify the user using a sound, the <a href="
> API gives you the possibility to do that. In the tutorial sectio>/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> gives you th
>ns you will find an MDN tutorial explaining the basics of using t>e possibility to do that. In the <a href="#Tutorials">Tutorial se
>he Web Audio API, via a couple of fairly simple examples.>ctions</a> you will find an MDN tutorial explaining the basics of
 > using the Web Audio API, via a couple of fairly simple examples.
n101    <h2>n101    <h2 id="Examples">
n117    <h2>n117    <h2 id="Tutorials">
n131    <h2>n131    <h2 id="Reference">
t134    <p>t
135      &nbsp;
136    </p>

Back to History