Build

HTML5 Mass Broadcasting Desktop Notifications

3 min read • Stephen Blum on Mar 17, 2011
HTML5 Mass Broadcasting Blog.jpg

Looking for more up-to-date information While this post still contains useful knowledge, we have a newer article on this topic available here

This tutorial explains how to broadcast desktop notifications to your users. PubNub has created a simple cross-browser utility to give you this ability with a few function calls. If your browser supports Native Desktop Notifications, such as Safari and Chrome, a message will appear outside of the web browser on your desktop. This is not trickery. It is a new feature included in HTML5.
desktop notification

HTML5 Mass Broadcasting Desktop Notifications

Safari and Chrome will receive a popup outside of the web browser. For non WebKit browsers such as FireFox, Opera and IE an internal notification popup will appear. This approach works on Phones and Tablets too! Such as iPhone, Android and iPad.

Step 1: Include JavaScript

Add the following HTML block to your page. This gives you access to the PUBNUB.

Step 2: Notify Ready

There are four functions you must know to enable desktop notifications. The first function is a utility method to test if a user is ready to receive desktop notifications. PUBNUB.notify.ready() will return a boolean of TRUE if the user is able to receive desktop notifications. If the return value is FALSE, then you must request permissions.

The PUBNUB.notify.ready() will let you know if the user is able to receive desktop notifications. This function may return FALSE. If this is the case, then Step 3 will be necessary.

Step 3: Notify Enable

In case the response to PUBNUB.notify.ready() is FALSE, you may request to enable desktop notifications with the PUBNUB.notify.enable() function. This function will provide the user with an option to enable desktop notifications. Notify Enable

Step 4: Send Notification

The final step is to send the notification. This is accomplished by calling PUBNUB.notify() function. This function works like this:

This will create a popup notification on your desktop. Make sure to test in the latest version of Chrome or Safari to get the Desktop Notification. Other browsers and mobile devices will fall back to an in-browser notification. desktop notification What if you wanted to push a desktop notification to your users from your web server or laptop using PHP, Ruby or Python?

There are lots of other languages that you may use to Push HTML5 Desktop Notifications with. As always, all our SDKs are available on our Github Repository.

Notify Full Example

Here is a full example of the source code used in this example at the top of this page. You will see PUBNUB DOM utilities in use here to bind button click events.

That’s it! Pretty simple yah? The heavy lifting is provided by PubNub.

 

0