As a developer of Open web apps, one of your key tasks is to give feedback to the user. Among other aspects of UI behavior, this involves furnishing notifications so that users know when an app-related event has happened.
In this article, we provide recommendations for managing notifications, the most common use cases, and the tools to implement these features. We'll also include FAQs and real-world examples in case you need more details on how to use event handlers and APIs like the Alarm API, Notification API, and Vibration API.User notifications workflow
Here's the typical workflow for managing notifications:
If your app must give notifications to users, first your app must detect given events. Usually you'd implement this through event handlers or polling functions. Depending on the triggering event (among other things), you can notify the user in different ways, to give the most suitable user experience for the given event.
Recommendations
Notifications provide useful information that varies from app to app. For example, you might notify users of a new message in an instant message app, or a deadline in a to-do app, or special events in game apps. Here are some best practices for managing notifications.
Detect when to notify users
First, your app must detect when to notify users. You can implement this through event handlers or polling functions.
Event handlers
As a rule, open web apps respond to inputs and other occurrences through events, since the web platform relies on JavaScript, an event-driven programming language. You can attach event handlers either to JavaScript objects or to element nodes inside a DOM tree, so that your app can detect that an event has happened and notify the user. For a comprehensive list of events, see the MDN Event reference. Here are some examples:
- Usually you'd attach events like
onclick
,onfocus
oronkeydown
to DOM elements like adiv
or abutton
. These events have to do with user inputs, which vary based on what kind of device your app is running on. - The following events generally attach to the
window
JavaScript object:onload
andonresize
Window.ondeviceorientation
andWindow.ondevicelight
(detect device rotation and ambient light respectively)BatteryManager.onlevelchange
(battery status information)
- Many APIs can access event handlers on callback functions (usually
onerror
andonsuccess
).
Note: We recommend you use events provided by the web platform, if they are available and supported well enough; otherwise, use popular tools like Modernizr or PhoneGap to build future-proof applications.
Responding to other conditions in your app
Unfortunately the web platform does not always provide the exact event you want to test. In that case, you can use a combination of events, set an alarm through the Alarm API, or periodically check for a given condition to be true via window.setInterval
or window.requestAnimationFrame
.
Notify users
When an event occurs, you want to deliver the appropriate user experience. Based on which event has been detected (among other things), your open web app can notify users with text, vibration, or sound (or more than one together).
By DOM manipulation
This is the easist way to notify users. Give them the information within the app by manipulating the DOM calling JavaScript methods such as setAttribute
, append
or innerHTML
on DOM Elements.
By system notifications
User experience is crucial. If necessary, you must notify users even when the app is not running or only running in the background.
You can configure and display system notifications with a JavaScript object provided by the Notifications API (this is available in web workers too, in newer browsers):
new Notification('This is a notification message');
The to-do-list demo app in the Examples section provides a real example of how to use this. Different operating systems display notifications in different ways.
By vibrating
Another possibility, since most recent mobile devices include vibration hardware. The Vibration API enables Web apps to access this hardware though JavaScript:
window.navigator.vibrate(200);
When a web app runs this code, the hosting device vibrates for 200 milliseconds (or 0.2 seconds). Please look at the Vibration API documentation to implement vibration patterns and other advanced features.
You should let the user enable or disable vibration feedback, since some people find it annoying. You can do this in your app's Settings section.
By sound
The HTML <audio>
element lets you notify the user with a sound. You can find an MDN guide about <audio>
in the Tutorials.
Examples
- Detecting when to notify users
- Most of us know about event handlers and how to use them to provide scripted responses to events. But there's a lot more to think about when you're deciding whether a given set of conditions is true based on your user's environment. This article shares some thoughts on the subject.
- To do list (part 1 of 3) - Checking when a deadline is due
- Here's a complex example involving checking the current time and date against a deadline stored in a database.
- To do list (part 2 of 3) - Notifying users via the Notification and Vibration APIs
- Once you've detected that the event happened, you have to respond to it, which means notifying the user. The Notification and Vibration APIs provide immediate, simple, and system-wide feedback. This article explains how to use both of them in context.
- To do list (part 3 of 3) - Using alarms to notify users
Obsolete since Gecko 51
- In the previous article, we prompted a notification with a regular timer and complex checking function. There's a simpler solution available. With the Alarm API, you can automatically set notification deadlines and check when they're due. Find out how in this article.