Using Vapid for Web Push Notifications in a Ruby on Rails Application
Most modern websites are dynamic web applications that are expected to work across a myriad of devices and browsers. Since the most common way of accessing web applications nowadays is via mobile browsers, users expect the same level of interactivity they get with native apps on the web.
Some web apps are optimised for mobile to the point where the difference between native applications and web applications is next to none.
One notable exception to this was push notifications, until recently there was no way to send users of your web application notifications messages. This was until the good folks at Chrome implemented a web push feature that allowed web developers to re-engage users via notifications. Web push allows messages to be delivered to user's browsers even when they are not active on your web app. Giving developers the same level of interaction with their users as mobile developers do through push notifications.
We recently had to implement push notifications for a large commercial real estate marketplace app. A challenge with implementing this was we needed to ensure that our app can keep sending messages to multiple subscribers and allow us to see what was sent to who and when. To overcome this challenge we used the Voluntary Application Server Identification (VAPID) for Web Push.
In this post, we will go through how to implement web push functionality in a Ruby on Rails project using VAPID.
So how does WebPush work?
To get Web Push working you’ll need:
Your rails server equipped with service workers.
Your subscriber accessing a browser that has Web Push supported
A push service provider like Google or Mozilla
Implementing Web Push
Setup Vapid Keys
The first step in sending a push message is to set up a pair of one time VAPID keys (public/private) to be saved on your server. These keys will be used to sign the Push API requests. VAPID keys are used as a means of encrypting and sending messages using the web push protocol without needing to send it through a service like Google Cloud Messaging.
A manifest.json file that helps to identify your application
You will need to set up a service worker and install on the user’s browser, the service worker is subscribed to push events with your public VAPID key.
Your server will need to make an API request to send a notification to the user's subscription
Your service worker will be set up with a receive ‘push’ event to trigger a notification event on the client side, displaying the notification
The diagram below gives a good outline of how it all works
Sheda uses Design, Artificial Intelligence and technology to solve complex problems with an emphasis on delivering solutions that make and accelerate impact and bring about social change.
Serviceworkers-rails is a gem that allows a rails server to serve out a service-worker.js file making it look like it’s from the root directory.
Setting up VAPID keys:
Setting up your VAPID keys gives your server a unique signature to sign the messages send out over the subscription.
With the subscription details saved under your user's data table, you can send out a push notification to that user using the web push gem as shown above. You should then see a notification get triggered.