How can we implement web push notification?

Question

How to implement push notification in browsers using the googles GCM service. What are the steps to implement the same.

Answer 1

The basic steps that you will have to do if you want to add push notifications in browsers are the following:

• First of all, you need an HTTPS webpage (GCM requires it for browser notifications).
• Secondly, you need to add some javascript code into your webpage that will do the following points:
  • Ask the user for push permissions
  • Register the browser that are accessing into the webpage
  • Activate a ServiceWorker that will be waiting for notifications (and when a notification is received, it will generate the browser notification).
• The last think, you need to set up a project on the Google Developer Console. In that place you will get some required params (project id and API key) that will be required to send and receive push notifications.

In this tutorial there are all the steps I have commented but well explained with some examples.

You must know that browser notifications is a growing project that have some known troubles. One of them is that you can't receive payload from the notification because in the HTTPS the message is encripted and it can't be decoded by GCM and the message that the browser receive is an empty notification. There are some solutions for this trouble but they are working to solve it.

This is an example where you can see it works (you can open it using your smartphone too and watch the result).

I hope this can help you!

Answer 2

Eloibm, you are right, it is normally necessary to have an HTTPS page. But WonderPush managed an interesting implementation for all sites, including HTTP-only websites. A quick demo can be seen here: Try it on HTTP: http://www.wonderpush.com

Thus, it's possible to activate push notifications on your website within minutes, following the getting started guide