How to send push notification to web browser?

Javier covered Notifications and current limitations.

My suggestion: window.postMessage while we wait for the handicapped browser to catch up, else Worker.postMessage() to still be operating with Web Workers.

These can be the fallback option with dialog box message display handler, for when a Notification feature test fails or permission is denied.

Notification has-feature and denied-permission check:

if (!("Notification" in window) || (Notification.permission === "denied") ) {
    // use (window||Worker).postMessage() fallback ...
}

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