Vayu Technology

Software Design & Development Services

Push Notifications with Web Push Protocol

March 28, 2017

Push notifications are a great way to interact with the users of your application. However, a major roadblock on integrating push notification to your application is the requirement of signing up and setting up push service server for different browsers that support different protocols for pushing notifications from your application to the client’s browser.

  • Google Cloud Messaging (GCM) push service - Chrome/Chromium Browser
  • Mozilla Push Service - Firefox Browsers

So from integration point of view, there are two ways to do it:

1) Vendor locked push servers:

The first option will be signing up to push service providers’ platforms and implementing push API calls from your application server to these services with the protocol they use to implement push service on their respective browsers.

Google Cloud Messaging (new version: Firebase Cloud Messaging) push service uses GCM/FCM protocol to implement push service to Chrome/Chromium browsers. Mozilla Push Service uses push service URL to push to Firefox browsers.

To implement this way, you need to subscribe and setup keys at all the push servers you want to send push notifications from your application server. This is vendor locked solution and needs multiple configurations at different push services.

2) Web Push Protocol:

Web Push Protocol is a standard protocol where sender authentication can done with VAPID (Voluntary Application Server Identification), which essentially is a public/private key pair hosted in your application server that authenticates push notifications to different subscription endpoints (client browser can belong to any vendor - Chrome/Firefox). Chrome and Firefox Browsers support Web Push Protocol based push-notifications with VAPID keys.

How to do it?

The user has to approve subscription (‘Allow’ when asked) to push notifications in order to receive push notifications on application owner’s demand.

Subscription (user’s browser -> app server):</strong>

Send notification (app server -> subscription endpoint):

Once the subscription is confirmed from the user and the subscriptionJSON (push endpoint, encryption public key and encryption authentication key) stored in application’s database, this JSON object can be extracted anytime to send push notification to the client.

Implementing push notification with VAPID not only eliminates hassle of configuring multiple push server configurations but also makes it easier to manage and control user's push subscriptions.


We specialise in bespoke software

We can build the ideas in your head and make them a reality

Building better applications

Exceptional development on the web is done with cutting-edge technologies like Ruby, React JS, Vue JS and other modern frameworks. At Vayu, we're polyglots - we use the the latest technology to rapidly bring your projects to fruition. We also understand how to build at scale with containers & Kubernetes in our toolbelt.

We're always discovering and learning. Naturally curious, we stay on top of trends and new technologies to help our clients reach future-facing solutions.