Introduction
Web notifications have been there for a while, they provide a really interesting way to present information to the end user. And they are supported by all HTML5-compatible browsers. I'm going to show you how to create them, but bear in mind that they will work depending on the browser's engine support.
Step 1:
First, you need to check if you have the permission to send notifications.
For Webkit-based browsers:
webkitNotifications.checkPermission()
For Gecko-based browsers:
Notification.permission
These are the possible results:
Webkit browsers:
0 -> Permission has been granted.
1 -> Permission has not been granted or refused.
2 -> Permission has been refused.
Gecko browsers:
default: the user didn't give any permission yet (and therefore
no notification will be displayed to the user).
granted: the user explicitly accepted to be notified by the application.
denied: the user explicitly refused to be notified by the application.
Step 2:
Once you have found about the permission status, you'll be able to send notifications, but in the case of the page not having the necessary permissions, you need to request them by doing this:
In Webkit:
webkitNotifications.requestPermission()
In Gecko:
Notification.requestPermission()
This is going to show you a message asking for authorization to send the notifications:
Step 3:
Once you have allowed for the sending of notifications, now the only thing you need to do is to create the notification:
In Webkit:
notification = webkitNotifications.createNotification(iconUrl, title, body)
notification.show()
In Gecko:
Notification(title, body) // Simple mode
Note: Chrome needs the user interaction to allow access, you'll need to bind the webkitNotifications.requestPermission() to some link, button, etc.
The arguments available for notifications are:
- Notification.dir Read only
The direction used by the notification as defined within the constructor options. - Notification.lang Read only
The code lang used by the notification as defined within the constructor options. - Notification.body Read only
The body string used by the notification as defined within the constructor options. - Notification.tag Read only
The id of the notification (if any) as defined within the constructor options. - Notification.icon Read only
The URL of the image used as an icon as defined within the constructor options.
Example:
new Notification(title, { icon: iconUrl, body: body}) # Base example
new Notification('Test', { icon: 'http://cdn.tutsplus.com/net/uploads/legacy/417_ruby/images/ruby.png', body: 'Example' })
Conclusion:
Web notifications are really useful when you want the end user to notice important information or reminders. If you want to see the browsers compatibility, please check it here
References:
Thanks for reading!
