Javascript

How to send web notifications


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:

Notification options

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' })

Notification 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:

W3C documentation

Thanks for reading!

Community
De Código, Café y Cervezas 06 – ActiveModel::Serializer
Best Practices
De Código, Café y Cervezas 07 – ¿Somos profesionales?
Javascript
AngularJS Providers under the hood