How to send web push notification in React

We can introduce web push in our application in just 2 simple steps using Engagespot. But before we begin, make sure you have followed the docs and initialized the frontend component successfully.

Step 1. Adding a service worker in a React application

In your web application's root public folder (In case of React.js, it's the public folder), create a new file called service-worker.js. Copy the following line to the file, and save it.

importScripts('https://cdn.engagespot.co/serviceWorkerv2.js');

Done! You've added service worker to your app. To verify if you've properly placed this file, goto [url-of-your-site]/service-worker.js and see if the file can be accessed.

Step 2. Enabling the web push channel

1. Go to your Engagespot dashboard and navigate to Channels menu. From the list of available channels select Web Push.

2. Click the Add button on the EngageSpot Web Push provider card. You should be able to see a provider configuration modal

3. Enter any name you want to uniquely identify this provider instance in the INSTANCE NAME input field and click Save.

Integration Successful

After this step, compose a test notification and you should see the web push properly working.

You've successfully integrated Engagespot Web Push to your Application.