HTML5 Mass Broadcasting Desktop Notifications

Enable Desktop Notifications Loading...

Broadcast HTML5 Desktop Notification

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.

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.

<div
    channel-name=notifications-channel
    segregate-notifications-by-page=false
    id=desktop-notifications-config
></div>
<div id=pubnub pub-key=demo sub-key=demo></div>
<script src=http://cdn.pubnub.com/pubnub-3.1.min.js></script>
<script
src=http://www.pubnub.com/static/html5-desktop-notification-broadcasting.js
></script>

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.

//
// User is Ready to Receive Desktop Notifications?
//
var allowed_desktop_notifications = PUBNUB.notify.ready();

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.

//
// Request Permissions to Receive Desktop Notifications
//
PUBNUB.notify.enable(function(){
    if (PUBNUB.notify.ready() {
        // User Accepted Permission
        // Ready to receive Desktop Notifications!
    }
    else {
        // User Denied Permission
        // User will not receive notifications.
    }
});

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:

//
// Send Notification
//
PUBNUB.notify({
    image : 'http://cdn.pubnub.com/assets/pubnub-70x70.png',
    title : 'PubNub Notification',
    body  : PUBNUB.$('broadcast-text').value || "empty message"
});

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.

What if you wanted to push a desktop notification to your users from your web server or laptop using PHP, Ruby or Python?

//
// Send Desktop Notifications using PHP
//
require_once('Pubnub.php');
$pubnub = new Pubnub( $publish_key, $subscribe_key );
$info = $pubnub->publish(array(
    'channel' => 'notifications-channel',
    'message' => array(
        image => 'image.jpg',
        title => 'Title Text',
        body  => 'Content Body Text'
    )
));

Download PubNub PHP Push API

//
// Send Desktop Notifications using Python
//
from pubnub import Pubnub
pubnub = Pubnub( publish_key, subscribe_key, secret_key, ssl_on )
pubish_success = pubnub.publish({
    'channel' : 'notifications-channel',
    'message' : {
        'image' : "image.jpg",
        'title' : "Title Text",
        'body'  : "Content Body Text"
    }
})

Download PubNub Python Push API

//
// Send Desktop Notifications using Ruby
//
require 'Pubnub'
pubnub = Pubnub.new( publish_key, subscribe_key, secret_key, ssl_on )
info = pubnub.publish({
    'channel' => 'notifications-channel',
    'message' => {
        image => 'image.jpg',
        title => 'Title Text',
        body  => 'Content Body Text'
    }
})

Download PubNub Ruby Push API

There are lots of other languages that you may use to Push HTML5 Desktop Notifications with. Download them on PubNub's API at GitHub.

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.

<p>
    <button id=broadcast-enable class=broadcast-button>
        Enable Desktop Notifications
    </button>
    <span id=broadcast-ready>Loading...</span>
</p><p>
    <button id=broadcast-button class=broadcast-button>
        Broadcast HTML5 Desktop Notification
    </button>
    <input id=broadcast-text value='Hello Everyone!' />
</p>

<div
    channel-name=notifications-channel
    segregate-notifications-by-page=false
    id=desktop-notifications-config
></div>
<div id=pubnub pub-key=demo sub-key=demo></div>
<script src=http://cdn.pubnub.com/pubnub-3.1.min.js></script>
<script
src=http://www.pubnub.com/static/html5-desktop-notification-broadcasting.js
></script>
<script>(function(){
    function update_ready(enabled) {
        var ready = PUBNUB.$('broadcast-ready');

        if (enabled) {
            ready.innerHTML = 'Enabled';
            PUBNUB.attr( ready, 'class', 'broadcast-enabled' );
        }
        else {
            ready.innerHTML = 'Disabled';
            PUBNUB.attr( ready, 'class', 'broadcast-disabled' );
        }
    }

    update_ready(PUBNUB.notify.ready());

    PUBNUB.bind(
        'mousedown,touchstart',
        PUBNUB.$('broadcast-button'),
        function() {
            return PUBNUB.notify({
                image : 'http://cdn.pubnub.com/assets/pubnub-70x70.png',
                title : 'PubNub Notification',
                body  : PUBNUB.$('broadcast-text').value || "empty message"
            });
        }
    );

    PUBNUB.bind(
        'mousedown,touchstart',
        PUBNUB.$('broadcast-enable'),
        function() {
            PUBNUB.notify.enable(function(){
                update_ready(PUBNUB.notify.ready());
            });
        }
    );
})();</script>

That's it! Pretty simple yah? The heavy lifting is provided by PubNub. You may learn more about PubNub by Reading the Cloud-Hosted Service for Real-Time Messaging.