This post is a part 14 of Advanced JavaScript APIs post series.
This API is available for both mobile and desktop browsers.
To understand what is web notification API and where it is used lets take an practical scenario.
Suppose you have 10 different tabs open in your browser. Tab #2 is facebook and #7 is twitter. Suppose you receive a facebook message then there is no way to know about the new message until you visit #2 and check for messages. Websites use hacks like sounds, title text change etc to notify users but these hacks don’t always work and are not standard. There web notification is a standard for notifying users.
The way notification are displayed to the user depends completely on the browser. There is no particular standard about how the notifications will be displayed.
Notification class
Notification class is the heart of web notification API. By creating a new instance of this class we can trigger a notification.
This class takes two arguments. First argument is the title of the notification and second argument is an options object. Second argument is optional.
Second argument can have the following properties:
- body: Body of the notification message.
- lang: Specifying language of the notification title and body. Language must be of BCP 47 standard.
- dir: Used to specify the direction of the text. Possible values are auto(default browser setting), rtl(right to left) and ltr(left to right).
- tag: An id for the notification. It can be used to retrieve, replace and remove the notification.
- icon: An icon URL to be displayed as the notification icon.
Permission object has a function called as close(). This function can be used to close the notification manually.
Notification Events
There are four different events attached to the notification object.
- onshow: Fired when the notification is showed to the user.
- onclose: Fired when the notification is closed by the user or browser.
- onerror: Fired if an error occurs.
- onclick: Fired when the user clicks on the notification.
Notification Permissions
User have the choice to disable notifications if they feel like, its just like users having the ability to disable push notification for mobile apps.
Notification class has a read-only property called as permission. This property exposes weather the user has granted permission or not. It can have three different values: granted, denied and default(same as denied).
Permission class has a method called requestPermission(). requestPermission() can be used to ask permission to the user to display notification if Notification.permission is assigned to denied or default. A callback is passed to this function. This callback is passed with a parameter representing the user choice after request. This argument will be assigned to granted, denied or default. requestPermission() method should be called as a user action(ex: onclick callback), and cannot be used without it. requestionPermission() also modifies the value of Notification.permission property.
Sample App
<!doctype html>
<html>
<head>
<title>Web Notification API</title>
<script type="text/javascript">
function trigger_notification()
{
//check if browser supports notification API
if("Notification" in window)
{
if(Notification.permission == "granted")
{
var notification = new Notification("Notification Title", {"body":"Message Body", "icon":"http://qnimate.com/wp-content/uploads/2014/07/web-notification-api-300x150.jpg"});
}
else
{
Notification.requestPermission(function (permission) {
if (permission === "granted")
{
var notification = new Notification("Notification Title", {"body":"Message Body", "icon":"http://qnimate.com/wp-content/uploads/2014/07/web-notification-api-300x150.jpg"});
}
});
}
}
else
{
alert("Your browser doesn't support notfication API");
}
}
</script>
</head>
<body>
<button onclick="trigger_notification();">Trigger Notification</button>
</body>
</html>
<html>
<head>
<title>Web Notification API</title>
<script type="text/javascript">
function trigger_notification()
{
//check if browser supports notification API
if("Notification" in window)
{
if(Notification.permission == "granted")
{
var notification = new Notification("Notification Title", {"body":"Message Body", "icon":"http://qnimate.com/wp-content/uploads/2014/07/web-notification-api-300x150.jpg"});
}
else
{
Notification.requestPermission(function (permission) {
if (permission === "granted")
{
var notification = new Notification("Notification Title", {"body":"Message Body", "icon":"http://qnimate.com/wp-content/uploads/2014/07/web-notification-api-300x150.jpg"});
}
});
}
}
else
{
alert("Your browser doesn't support notfication API");
}
}
</script>
</head>
<body>
<button onclick="trigger_notification();">Trigger Notification</button>
</body>
</html>
