Browser Push Notifications Tutorial

pubnub share

When we think push notifications, our mind goes mobile. However, not to be overlooked is the power of web browser notifications, notifications that are pushed to users on web browsers on desktop devices.

What is a browser push notification?

A browser push notification is a message that is sent to a user's browser (Google Chrome, Mozilla Firefox, Safari, etc.) from a website or web application. The message appears as a small pop-up notification on the user's screen, even if they are not currently on the website. 

What is the difference between push notifications and web push notifications?

In summary, push notifications are delivered through a mobile app, while web push notifications are delivered through a web browser.  They depend on entirely different technologies, with mobile push relying on the proprietary Firebase Cloud Messaging or APNS for Android or iOS respectively.  Web notifications are a standard defined by the W3C, which is implemented by each browser manufacturer. 

We saw the massive growth of the mobile messaging app Yo, so we thought why not turn that app to the web and create “Oi,” a web application that enables you to send Oi to other browser users using web push notifications.

Which web browsers can send push notifications?

Currently with the W3C Web Notifications API, web notifications are supported by Opera, Chrome, Firefox, and Safari, and for the purposes of this blog’s demo, our tutorial is compatible with those four popular browsers.

PubNub has been used to power web notifications for close to a decade, as attested to by this old article on Dev.Opera.  The live demo that accompanied that tutorial has recently been updated to use the latest PubNub JavaScript SDK and the source code is available on GitHub. 

For the working demonstration, open up a couple browsers and send messages between to see it in action!

If you do not see any notifications be sure you have enabled notifications both in the browser and in your system settings. This Stack Overflow post has additional information.

How push notifications work in browser?

The value of this tutorial is that it combines a couple cool features for web notifications. For one, messages are sent between web browsers in 1/10 of a second or less, which means there are no delays between sending and receiving the messages.

Also, we’ve built in presence functionality, which gives you real-time insight into who is available to receive the web notifications. If the user closes out of their web browser, they will be removed from the list of active users.

Other Web Notifications Resources

The tutorials use the PubNub JavaScript SDKs for Pub/Sub Messaging, and that’s how we notify recipients to display a web notification.

How do I implement web push notifications?

To implement web notifications in your application, first request permission from the user as follows:

Notification.requestPermission().then((result) => {
  console.log(result);
});

Once the user has granted permission, you can create a notification as follows:

var notification = new Notification("Hello", { body: "Message from a friend" });

You do not need to call any separate show() method, the single line is sufficient to display the notification immediately.

There are a few other methods exposed by the Notification API and the Mozilla article on the API is a good starting point to understand more.

What are other examples of web push notifications?

Web push notifications are typically used to inform users about new content available from the website, for example Gmail will use a notification when a new email arrives or most online web-based calendars will use a notification to let you know when you have an upcoming appointment.