Push Notifications

HTML5 Mass Broadcasting Desktop Notifications

0 MIN READ • Stephen Blum on Mar 17, 2011
HTML5 Mass Broadcasting Desktop Notifications

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.

What is HTML mass broadcast?

HTML5 Mass Broadcasting refers to the use of modern web technologies, including HTML5, WebRTC, and supporting tools like PubNub, to transmit data, audio, or video streams to a large audience in real time. This approach avoids the need for legacy plugins such as Flash and instead relies on browser-native technologies for efficient and scalable broadcasting.

Key Components of HTML5 Mass Broadcasting

WebRTC (Web Real-Time Communication):

  • Facilitates peer-to-peer communication for real-time video, audio, and data sharing.
  • Plays a central role in reducing latency during live broadcasts.

Media Capture API:

  • Provides access to devices like cameras and microphones directly from the browser.
  • Enables live content creation and broadcasting without additional software.

Streaming Protocols:

  • Communication Protocols like HLS (HTTP Live Streaming) or MPEG-DASH are used for adaptive streaming.
  • Ensure smooth playback across devices by adjusting the stream quality based on network conditions.

PubNub global network

  • A real-time communication platform that enhances scalability and interactivity.
  • Provides low-latency messaging for chat, notifications, or viewer interaction during broadcasts.
  • Acts as a signaling server for WebRTC, handling event-driven messaging and coordination between clients.
  • Can distribute lightweight text, JSON, or other small data packets to millions of devices instantly.

Playback Support:

  • HTML5

How PubNub Fits into HTML5 Mass Broadcasting

  • Real-time Messaging: PubNub’s infrastructure allows instant delivery of messages, such as viewer feedback, live polls, or chat during broadcasts.
  • Signaling for WebRTC: Simplifies the setup of WebRTC connections by handling the exchange of connection metadata.
  • Scalable Architecture: Handles large-scale, real-time traffic with minimal latency.
  • Interactivity Features: Adds features like emojis, reactions, and collaborative tools to make the broadcast more engaging.

Benefits of HTML5 Mass Broadcasting with PubNub

  • Cross-platform Compatibility: HTML5 ensures broadcasts work seamlessly across devices and browsers.
  • Interactivity at Scale: PubNub enables real-time interaction with thousands or even millions of viewers.
  • Low Latency: Combines WebRTC and PubNub to ensure fast and responsive communication.
  • Cost Efficiency: Reduces the need for complex infrastructure while scaling effortlessly.

Read more: