How to send web push notification in Angular

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 for Angular successfully.

Step 1. Adding a service worker

1. In your web application's root public folder (In case of Angular.js, it's the src/assets 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');

2. Open your angular.json file. Then add the following lines inside the assets key. Locate assets key under, projects -> [your-project-name] -> architect -> build -> options -> assets.

Copy the following lines to the assets, and save it.

{
  "glob": "service-worker.js",
  "input": "src/assets",
  "output": "/"
}

Done! You've added service worker to your app.

3. 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.!

[webpush-success](/img/webpush/webpush-success.png)

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