User notifications

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 or onkeydown to DOM elements like a div or 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 JavaScript object:
  • onload and onresize
  • Window.ondeviceorientation and Window.ondevicelight (detect device rotation and ambient light respectively)
  • BatteryManager.onlevelchange (battery status information)
• Many APIs can access event handlers on callback functions (usually onerror and onsuccess).

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

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.

Tutorials

• Using the Notifications API
• Vibration API - David Walsh
• Using HTML audio and video

Reference

• Event handlers
• Alarm API
• Notification API
• Vibration API
• HTML <audio> element