Monday, 20 April 2015

Push notifications for websites

Well well well, I am very excited. Made a working prototype in 3 hours :) 

Chrome 42 has now Push APIs using which you can sent a push notification to your desktop/android phones. 

Hold on! I will start afresh. A few questions to begin with.

Hello smartphone users,

What kind of applications do you keep in you smart phone? Only frequently used applications? Will you ever install a travel application to your phone? 

Now, web application owners,

How do you retain your visitors? Have you ever thought that even after re-designing your page to be mobile friendly, you have not met your expectations? Didn't you think that native apps are powerful because it can show notifications and you are also forced to create a mobile app?

All these questions distinctly derives the gaps between native apps and web apps (well, not talking about mobile web app and web app; all must be responsive now). The most outstanding among them was always push notifications, which are supported by GCM, APNS, WNS etc. Well, the biggest gap is sealed now!

As you know, to implement notification there are works to be done at client and server. You can keep your server implementation intact and just add a few lines of code to your web page. That's all you have to do.

 Image1: How notification works for native apps?

The above diagram is still applicable for website notifications too, but with some small changes.

                                      Image2: How notification works for web apps?

Not so complicated right? If you know how push notification works, it would be a piece of cake. Well, you should also know how service workers work.

Service worker is a JavaScript file that is running as a background process for your browser. That means, the service worker will continue to run even if you don't have your web application opened in browser. This will help you to achieve features like push notification, altering the network requests etc.  You may also have to learn how to debug service worker.

                                        Image3: Life cycle of service worker (courtesy: html5rocks)


Just steps.. you have to explore web. 
  1. Get consent from the user for push notification using UI
  2. Create a service worker which handles push event and notificationclick event
  3. Create a manifest to put your Google project's GCM sender id
  4. Include both manifest and service worker in your page
  5. Register service worker
  6. When service worker is ready, get the subscription from push manager (same as registering for push notification and get the registration id back)
  7. Send the subscription id to your cloud server
  8. Whenever there is a notification to be sent, use this subscription id


One big limitation is that, you cannot sent any data in the notification. Oops! Chrome is working on it. Lets wait for it.


Above limitation is resolved in Chrome44 with

ps: Chrome notifications will work in desktop if chrome is running. It works without any preconditions in Android. Safari notifications is also ready. But available only for OSX and currently not supported for iOS. Lets wait and see! 


  1. All are saying the same thing repeatedly, but in your blog I had a chance to get some useful and unique information, I love your writing style very much, I would like to suggest your blog in my dude circle, so keep on updates.

    SAP training in Chennai

  2. In both these cases, the adversary is little and agile, which implies that battling it will require substantial projections. dansk