Push Notification to the Client Browser

How to send push notification to web browser?

So here I am answering my own question. I have got answers to all my queries from people who have build push notification services in the past.

Update (May 2022):
Here is a doc on web push notification from Google.

See this detailed introduction to notification API from Mozilla.

Airships article on the topic and how web push & app push varies.

Answer to the original questions asked 6 years ago:

1. Can we use GCM/APNS to send push notification to all Web Browsers
   including Firefox & Safari?

Answer: Google has deprecated GCM as of April 2018. You can now use Firebase Cloud Messaging (FCM). This supports all platforms including web browsers.

2. If not via GCM can we have our own back-end to do the same?

Answer: Yes, push notification can be sent from our own back-end. Support for the same has come to all major browsers.

Check this codelab from Google to better understand the implementation.

Some Tutorials:

• Implementing push notification in Django Here.
• Using flask to send push notification Here & Here.
• Sending push notifcaiton from Nodejs Here
• Sending push notification using php Here & Here
• Sending push notification from Wordpress. Here & Here
• Sending push notification from Drupal. Here

Implementing own backend in various programming languages.:

• NodeJs.
• PHP
• Rails
• Python
• Go Lang - this and this

Further Readings:

• Documentation from Firefox website can be read here.
• A very good overview of Web Push by Google can be found here.
• An FAQ answering most common confusions and questions.

Are there any free services to do the same?
There are some companies that provide a similar solution in free, freemium and paid models. Am listing few below:

1. https://onesignal.com/ (Free | Support all platforms)
2. https://firebase.google.com/products/cloud-messaging/ (Free)
3. https://clevertap.com/ (Has free plan)
4. https://goroost.com/

Note:
When choosing a free service remember to read the TOS. Free services often work by collecting user data for various purposes including analytics.

Apart from that, you need to have HTTPS to send push notifications. However, you can get https freely via letsencrypt.org

Push notification to the client browser

As you want to implement this in CakePHP (so I assume it's a web-based application), the user will have to have an 'active' page open in order to receive the push messages.

It's worth looking at the first two answers to this, but also just think about how other sites might achieve this. Sites like Facebook, BBC, Stackoverflow all use techniques to keep pages up to date.

I suspect Facebook just uses some AJAX that runs in a loop/timer to periodically pull updates in a way that would make it look like push. If the update request is often enough (short time period), it'll almost look realtime. If it's a long time period it'll look like a pull. Finding the right balance between up-to-dateness and browser/processor/network thrashing is the key.

The actual request shouldn't thrash the system, but the reply in some applications may be much bigger. In your case, the data in each direction is tiny, so you could make the request loop quite short.

Experiment!

server send push notification to client browser without using polling

There is Web Notification. And there you can see the browsers that support it.

How are web push messages delivered?

Your application server makes a POST request using the browser endpoint as the URL.

The browser endpoint is something like: https://updates.push.services.mozilla.com/A_VERY_LONG_TOKEN_123. That means that the POST request is sent to a web service owned by the browser manufacturer (e.g. Mozilla autopush for Firefox).

Then the browser push service is responsible for the delivery of the message to the browser. It's the client that creates a persistent connection with the browser push service. Also consider that once the TCP connection is established you get a full duplex / bidirectional channel (the server can send messages without a prior request from the client).

See also this introduction about web push.

Browser Push notifications for Microsoft Edge server side

You need to use the Javascript Fetch API, AJAX, Long Polling, WebSockets or SSE. Once you get the notification on the client side you can use vanilla Javascript and the Notification API to display the notification.

---

Related Topics