Push notification facility for mobile web app

html mobile web-applications websocket web-push
Volatil3 picture Volatil3 · Feb 6, 2012 · Viewed 51.5k times · Source

I have a simple scenario, to receive notification on mobile devices whenever it's generated from Server.

I know this facility is available in native iOS app and Android but I am trying to avoid native path. What I would like that:

  1. A mobile web app which can be access by visiting a URL
  2. User have ability to create a bookmark on Home screen so that it gets feeling of native app Icon.
  3. Getting badges of notification(no of messages in round shape)
  4. Able to receive notification even if browser is closed.

I know there is a possibility of server side events/Web Sockets but can a web app emulate push notification features?

Answer

owencm picture owencm · Nov 21, 2015

You can do this without a hybrid app, native app, or requiring users to install Pushover. It is possible to build a "progressive web app" that can send push notifications even after the page has been closed.

These work today in Chrome for Android (and other browsers seem to be implementing support), but there is no support on iOS.

Check out this demo, and this guide explains how to do it: https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/

Related questions

Using form input to access camera and immediately upload photos using web app

I came across this answer which is brilliant: In iPhone iOS6 and from Android ICS onwards, HTML5 has the following tag which allows you to take pictures from your device: <input type="file" accept="image/*" capture="camera"> Capture …

Read More
Sharing link on WhatsApp from mobile website (not application) for Android

I have developed a website which is mainly used in mobile phones. I want to allow users to share information directly from the web page into WhatsApp. Using UserAgent detection I can distinguish between Android and iOS. I was able …

Read More
How to create hyperlink to call phone number on mobile devices?

What is the proper, universal format for creating a clickable hyperlink for users on mobile devices to call a phone number? Area code with dashes <a href="tel:555-555-1212">555-555-1212</a> Area code with …

Read More