Sending Desktop Web Notifications from Web Browsers

2 min readMar 4, 2015

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

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 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.

web notifications tutorial web notification tutorial

We wrote a full web notifications tutorial on building Oi, available on Dev.Opera, the Opera Developer’s blog. All the code you need, as well as a live-working web notifications demo is available on their blog.

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

Web Notifications Value

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.

Chrome-Push-Notifications-Browser-2Also, 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 are instantly removed from the list of active users.

Other Web Notifications Resources

More from PubNub

How to Create a Dating App: 7 Steps to Fit Any Design
Insights6 minMar 15, 2023

How to Create a Dating App: 7 Steps to Fit Any Design

There are common underlying technologies for a dating app, and in this post, we’ll talk about the major technologies and designs...

Michael Carroll

Michael Carroll

How to Create a Real-time Public Transportation Schedule App
Build6 minMar 14, 2023

How to Create a Real-time Public Transportation Schedule App

How to use geohashing, JavaScript, Google Maps API, and BART API to build a real-time public transit schedule app.

Michael Carroll

Michael Carroll

How to Create Real-Time Vehicle Location Tracking App
Build2 minMar 9, 2023

How to Create Real-Time Vehicle Location Tracking App

How to track and stream real-time vehicle location on a live-updating map using EON, JavaScript, and the Mapbox API.

Michael Carroll

Michael Carroll

Talk to an expert