Web push notification is an important feature for any web application. Along with Email, you should send important account related events to your users via Web Push channel. In this article, we’ll learn how to add Web Push Notifications to a React app using Engagespot.
If you already have a ReactJS app, feel free to skip this section. Otherwise, you can create a new React app as follows
npx create-react-app engagespot-react cd engagespot-react
To enable web push, you should setup service worker in your React App. Don’t worry. It’s a simple process. Let’s do it.
service-worker.js file in your React app’s public folder.
Add the following text to the
service-worker.js file and save it.
By default, web push is disabled in your Engagespot app. After you’ve completed the above step, you should login to your Engagespot account, and enable web push under channels menu.
You’ve setup service workers and enabled web push in your Engagespot App. Now, let’s give your user’s the option to enable notifications in your React App. For that, we need to install Engagespot react component.
Add the package to your React App via npm or yarn
npm i @engagespot/react-component
Now, import the component inside the source code, where you want the notification component to appear.
import Engagespot from "@engagespot/react-component";
Render the Notification component inside any existing React component. For example, a bell icon place holder, or a Navigation component etc.
<Engagespot apiKey = "ENGAGESPOT_API_KEY" userId = "email@example.com" />
firstname.lastname@example.org with the variable where you store the unique user id of your app user. This can be their email id, or a UUID or any other unique identifier.
The next time when you reload your app, you can see a bell icon on your app. And clicking on the bell icon will show you a prompt to enable web push notifications.