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.
Image3: Life cycle of service worker (courtesy: html5rocks)
Just steps.. you have to explore web.
- Get consent from the user for push notification using UI
- Create a service worker which handles push event and notificationclick event
- Create a manifest to put your Google project's GCM sender id
- Include both manifest and service worker in your page
- Register service worker
- When service worker is ready, get the subscription from push manager (same as registering for push notification and get the registration id back)
- Send the subscription id to your cloud server
- 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.
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!