In this short tutorial, I will describe how to use the HTML5 Notification API ( currently in Draft ), to be able to display "Notifications" from your web application.
In case you are wondering what a Notification is, it is that small rectangular content that pops out of your system tray, on occasions such as when somebody sends you a message in Gmail Chat, or when Google Now displays its notification on the Desktop.
Here is what it looks like...
They are also known as "Web Notifications". Revised in January, it is expected to make it into the final standard.
So, let's get started.
Click this link : http://jsbin.com/fokadu/9 to see the thing in action. When you click on "Show some notifications", you'll see a notification same as the Image above, pop up from the Notification Area your screen or depending upon your operating system and the location of the Notification Area.
Now let's go through the Source:
http://jsbin.com/fokadu/7/edit?html,css,js,output
The HTML/CSS is pretty standard, nothing worth writing about.
Notice the Javascript.
- We first check, if the User has granted Notification Permissions to this web-app. If not, we ask the user for permissions, using the following two lines of code.
if(Notification.permission!=="granted") {
Notification.requestPermission();
}
- The specifications defines the PERMISSIONS as the following:
enum
NotificationPermission
{ "default", "denied", "granted" };
"default" refers to the "Uninitialized" state of the particular permission for the particular web-app.
"denied" : refers to the State when the User has "Denied" the permission request.
"granted" : refers to the state when the User has "Allowed" the Permission Request.
- Then we proceed to create the Notification as described in the specification. The Interface goes something like this...
interface Notification : EventTarget {
static readonly attribute NotificationPermission permission;
[Exposed=Window] static void requestPermission(optional NotificationPermissionCallback callback);
attribute EventHandler onclick;
attribute EventHandler onerror;
readonly attribute DOMString title;
readonly attribute NotificationDirection dir;
readonly attribute DOMString lang;
readonly attribute DOMString body;
readonly attribute DOMString tag;
readonly attribute USVString icon;
readonly attribute USVString sound;
void close();
};
- Notice that requestPermission() method optionally can take a Callback, with an argument which holds the current permission status for the request. One can read this attribute to take actions if the User has Denied permission for Notifications. Also, there are two things you need to be careful of.
- Never base your logic on the constant "default" but on !=="denied" or "granted". For some chrome does not populate the attribute of the callback as "default".
- If you are planning to do this locally, make sure you do not run this off file:// protocol by launching the HTML file directly in browser. This way the permissions do not work, and you'll never see any notification popup.
- title: The Header of the message. In the picture above, it is "Pssst..."...
- dir: for languages that need to render differently, see... RTL
- body: The "Content" of the message. It may be HTML/Plain Text. In the image above, it is the "Click to Launch" content.
- tag: it is used to identify a particular notification. Tags are special in that if one notifications with a tag "X" exists, then any subsequent notifications having the tag "X" will not be rendered as New but would replace the existing notification with the new content.
- icon: Self explanatory. In the image above, the leftmost part of the Image is the Icon.
- sound: whether to produce a sound when the notification pops up. Remember the "ting" sound when Gmail Chats pop up ?
- close() : a method that "closes off" the notification.
- Now if you have a look at the code that is used to create my notification above, it goes something like this -
var notification = new Notification("Pssssst! One Moment Here...!", {
icon: 'http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Emblems-emblem-symbolic-link-icon.png',
body: 'Click to Launch The Site.'
});
In the light of the interface definition described above, this code produces a simple Notification with the specified title.
What must also be noted is that each notification publishes several events over its life time and allows the developer to register listeners for the same.
Consider how I have attached a "Click" listener on the Notification.
notification.onclick = function() {
window.open("http://ccscoder.solutioneducation.co.in");
};
In this case, I have opened a new website in a new window. In a similar fashion, you can attach listeners for "close" and other events too. For a complete list of events, refer to the Specification.
This is a very simple introduction to the Web Notifications API, which in no way should be treated as comprehensive. There is a whole section of the API that I have not touched upon namely the "Service Worker API" that is associated with the Notifications.
A few words of caution...
- This API is in a Draft State as of now, and in a constant state of revision. So things written here "may" not hold water in future.
- Browsers are Increasingly starting to support this, but for now stick to Modern versions of Chrome. For an accurate list of supporting browsers have a look here... http://caniuse.com/#search=notification
- If you need to experiment with this, use "jsbin" or "jsfiddle" as the easiest alternatives. Or if you plan to work locally, you need to invoke the HTML page through a web server. Notification Permissions DO NOT seem to work when invoked through file:// protocol.
- Always respect the User's Choice while showing Notifications. If she has denied permission, do not show them irrespective of how "cool" they seem to be.
- Always "Check" for Web Notifications Support and fall back to alternatives gracefully.
Cheers.