Build

HTML5 Mass Broadcasting Desktop Notifications

3 min read Stephen Blum on Mar 17, 2011
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

This tutorial explains how to broadcast real-time cross-platform, cross-device desktop notifications to your users on any browser

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.

 

More from PubNub

NPP and HIPAA: Notice of Privacy Practices Definition
Healthcare CategoryJan 6, 20235 min read

NPP and HIPAA: Notice of Privacy Practices Definition

A Notice of Privacy Practices (NPP) is one of the requirements of HIPAA and helps patients understand their personal data rights.

Michael Carroll

Michael Carroll

HIPAA Violation Examples
Healthcare CategoryJan 5, 20236 min read

HIPAA Violation Examples

HIPAA violations can be financially expensive and devastating to a brand. Examine some examples of HIPAA violations, and learn...

Michael Carroll

Michael Carroll

HIPAA Technical Safeguards: How To Protect Sensitive Data
Healthcare CategoryJan 5, 20236 min read

HIPAA Technical Safeguards: How To Protect Sensitive Data

HIPAA covered entities must follow the five technical safeguards to achieve HIPAA compliance and prevent data corruption.

Michael Carroll

Michael Carroll