Java World Knowledge Sharing Portal: Performing Notifications Operation in Progressing Web (PWA)

Lets try to understand and execute simple notification concept in Progressive web applcation (PWA).

For simplicity we will be using nodejs as our backend technologies where we are going to register our subscriber and from here we will send notification.

You can install nodejs from https://nodejs.org/en/

Note: I am using VSCode as an Editor. And has nodeJs installed in it. TO check nodejs installed type
node -v

PS C:\Visual_Source_Code_Java_WorkSpace\pwa-push-notification> node -v
v14.8.0

Lets first create a simple project using command

npm init -y

This will create a package.json

Change the start script in it as given below.
"scripts": {
"start": "node index.js"
},

Now to work with PWA Notification we need a push library, express library and body-parser library

There any many push notification liberary availbale in the market. The once which we are going to use web-push git hub library.

https://github.com/web-push-libs/web-push

Lets first install all this thing in our projec using command

npm i web-push express body-parser

Now lets create a index.js file which will be used to send notification from the nodejs server to the client.

In index.js we will do following things

1:- Subscribe Route :- This will be used to send the subscribe request from the client to service worker.
1- In this Subscribe route first thing we do is to get the pushSubscription object.
2- Then we send back the status 201 that indicate the resource is created successfully in the nodejs server for the subscription request made by the client.
3- Then we create a payload that we used to send it to the client that will be shown to the end user.
4- In this step we will send this subscription and payload to the client using web.pushSendNotification

That’s it for the server. i.e. which listen to the subscription request from the client, accept that request and response with 201 as indication that resource is created. Then we creat payload that is the data we want to send to the client and finally we send the subscription and payload to client.

2- In our client folder which contains the code that will be shown to the user with notifications.

In this client we should have index.html (for view purpose) and one service worker js sw.js file core of PWA application.
In sw.js we will

1- check if the browser support serviceworker or not
2- We will register serviceWorker, register push using browser push api and send push reques to the server.
3- During registration of the push from the client we use the subscribe mehod of pushManager method of register as shown below

//Registration of Push
const subscription = await register.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(publicVapidKey)
});

Note:- When ever you send the publickey always use urlBase64ToUint8Array you can copy this function from https://github.com/web-push-libs/web-push

4- In send notification

In this we send subscription object that we created in front end to our backend Nodejs. as in nodejs application we take this subscription object from request body and then further this subscription object is send to the serviceworker.js file. That’s it for the client side.

3- Now lets take serviceworker sw.js file

Command use to create the public and privat key

PS C:\Visual_Source_Code_Java_WorkSpace\pwa-push-notification> .\node_modules\.bin\web-push generate-vapid-keys

=======================================

Public Key:
<Your public key>;

Private Key:
<Your private key>;

=======================================