Push Notification with Rails Part 1 Setup

[Part 1] [Part 2] [Part 3]

This blog is about upcoming Ruby Tuesday, and I am giving a talk with title of "Introduction to Push Notification"

Before I start talking about this topic, the Front end part can be apply to any of the existing website, just backend in this post, I am using Ruby On Rails.

Slides in PDF

Sample website

• Subscribe to Notificaiton
• Send

Ruby Gem used

• serviceworker-rails
• webpush
• json

Introduction

Push Notification is commonly seen on large messaging web like Facebook Messengers on Web, Whatsapp on Web.

How it works?

Requirement

• Web Serve on HTTPS
• Have ServiceWorker Registered
• Minimum setup on manifest.json
• User have to accept to receive notification

Requirement

• Understand of Modern JS (fetch, promise)

Before We start

Before get your hands on dirty to make a push server and client, we need to generate VAPID key for this to work. VAPID used JWT to carry information, and all transaction are called "claim". You can read more about VAPID Key here. VAPID Key basically will generate a Public and Private Key (Same concept as SSH), this key is used for authenticate purpose.

There are 2 methods on generating VAPID Key:-

Method 1: with Ruby

Install ruby gem webpush

gem install webpush

open irb or pry

require("webpush")
vapid_key = Webpush.generate_key
puts vapid_key.public_key
puts vapid_key.private_key

save the vapid key into your .env

Method 2: with Node.js & NPM

Install NPM package web-push

npm install -g web-push or yarn global add web-push

In terminal, simply just web-push generate-vapid-keys and it will return public and private key. Save it in .env for future use.

Continue on Building Front End in Part 2

[Part 1] [Part 2] [Part 3]

Other example about Progressive Web Apps

• PWA Sample Website