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.
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.
- Usually you'd attach events like
onkeydownto DOM elements like a
button. 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.ondevicelight(detect device rotation and ambient light respectively)
BatteryManager.onlevelchange(battery status information)
- Many APIs can access event handlers on callback functions (usually
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
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
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.
new Notification('This is a notification message');
The to-do-list demo app in the Examples section provides a reale xample of how to use this. Different operating systems display notifications in different ways.
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.
- 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
- 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.