How to use Push Notifications in PWA

This tutorial is to show you how you can set up and use the Push notification. So just follow the below complete procedure for configuring push notifications and firebase, please refer following screenshot.

let’s get started.

• You will find this option in the WordPress Dashboard -> PWA -> Settings -> Features -> Enable “Push Notification” option -> Click on the “gear” icon like below the screenshot.

Once you click on gear icon you can access the Settings page.In this page can set Push notification integration

Here is two type of Push notification integration

1. PushNotifications.io
2. FCM push notification

1. PushNotifications.io

Setp 1: Once you select PushNotifications.io option you need to click on the install  plugin button like belwo the screenshot.

Step 2: Click on the “View Setting” Button like below the screenshot.

Step 3: After installing plugin you need API key  for this click on the Get the Key link like below the screenshot.

Step 4: You can get the “API Key” manually from PushNotifications.io dashboard by going to Settings copy the API Key like below the screenshot.

Step 5: Please copy the API Key and paste this Push Notification Options and then click on the “Validate” button like below the screenshot.

Step 6: Once you click on the Validate button it will redirected to Push Notification Option fill the information as per your requirement.

2. FCM push notification

Step 1: Once you click on gear icon you can access the Settings page. In the Push notification section please click on Firebase link to create a new Firebase project.

Step 2: Then on the top right side, you will be able to see Go To Console. Please click on it and sign into your Gmail account.

Step 3: After signing in, you will be redirected to below screenshot, please click on Add project, then add project name.

Step 4: Then you will be redirected to another page, in that you need to select the Embed option.

Step 5: Please copy the only relevant code and paste it in our Config settings of our PWA for WP plugin.

Step 6:  Click on Settings, Cloud Messaging. The section Cloud Messaging API (Legacy) will show as disabled

Step 7: Click on Settings, Cloud Messaging. The section Cloud Messaging API (Legacy) will show as disabled

Step 8: This will open the Google Cloud Console. Click on the enable button

Step 9: Back in the project settings the Cloud Messaging API (Legacy) will now be enabled and have a server key. Copy the new server API key from the Firebase settings panel to your clipboard

Step 10: Add the API key to your  Notification app dashboard.

That’s it for this tutorial!

We hope we’ve clear your doubts in case If you have any feedback or questions, Just contact us here and we are always available for you.