Add notifications to the web app with Node.JS and Service Workers

Tram Ho

In this article, you’ll learn how to use service workers and web-push to create push notifications in the browser. In addition, you learn how to register users and push notifications in the browser.

1. Preparation

We need to use the terminal to create the necessary files. Run the command npm init y to initialize a new Node project.
The next step we need to install the necessary dependencies used in the project:

Explain:

  • dotenv : Download environment variables from .env file to process.env file
  • express : Framework of Node
  • body-parser : Middleware for parsing incoming request bodies.
  • web-push : Web Push library for Node.js

2. Generate VAPID Keys

The web-push library relies on a series of VAPID keys to work. The VAPID keys are the public and private key pairs used to check the validity of the registration to the application server, and identify the server that is sending push notifications.
We can generate a VAPID key pair by running the following command:

Copy the newly generated key pairs and save them in variables.env file in the project:

3. Server settings

Create the index.js file at the root of the project as follows:

We can access the VAPID key pair in gile variables.env thanks to the dotenv package. The first argument of the setVapidDetails() function is called an email. It provides a contact point in case the push service needs to contact the sender. /subscribe API is used to trigger event to push notifications to the service worker.
Above are the necessary things on the server side. To start the server, run the command:

4. Client settings

Create the client directory containing all the client-side code and in turn create the following files:

In the index.html file contains the entire interface code of the app:

The next file in main.js will handle the registration of the service worker:

When the user clicks the Trigger Push Notification button, it registers the service workers in the sw.js file and creates the registration that displays a prompt confirming the user allows to display the message on the current page. When using the VAPID key, we must convert the URL safe base 64 string to Uint8Array using the urlBase64ToUint8Array function. Don’t forget to replace the <your public vapid key> with the public key you just received when Generate VAPID Keys earlier.
Next call API /subscribe to trigger a new push event. Now, we just need to listen to the service worker event and display a notification every time the user triggers the push event by clicking the Trigger Push Notification button.
In the sw.js file, the event handler receives a push event as follows:

We create a message thanks to the showNotification() function.
Finally to check the results. We run the command:

Then open the link http: // localhost: 5000 / and get the following result:

Conclude:

The article shows you how to install and run a push notifications on the web using service worker and Web Push. You can refer to the source code at source .

References:

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo