Adding Push Notifications to Progressive Web App (PWA) with Ionic and Firebase Hosting.

We can make our product or service more re-engage-able by adding push notifications…

My articles are open for everyone; non-member readers can read the article by clicking this Friend link.

👨‍💻 Before adding Push Notifications I recommend you to create Ionic PWA.

To Create Ionic PWA, Click this link 👉 Build a Progressive Web App (PWA) with Ionic Framework and Firebase Hosting.

After creating Ionic PWA.

Let’s start adding Push Notifications to our Ionic PWA

We can make our product or service more re-engage-able by adding push notifications. We will add push notifications to the @ionic/angular app we created earlier. For this purpose we are going to use Firebase Cloud Messaging (FCM) as a push server to handle the delivery of notifications across platforms and devices.

The other thing that completes the push notifications implementation is an application server that will tells FCM about what notification and to whom should be delivered. There are many ways we can build that.

If we already have a backend API, then we can easily integrate Firebase SDK and problem solved.

Otherwise, if we decided to go server-less (not using a centralized server), we can use a function-as-a-service, offering like Firebase Cloud Functions that will let us run a piece of JavaScript code in the cloud, without having to care about where and how it’s executed.

For now we will just test it by hitting Firebase Cloud Messaging directly using cURL or Postman and cover later in the future articles with backend API and FCM server-less.

#1 Adding Firebase to an Angular project

First of all, we need to set up Firebase configuration in our project.
Follow the link to add Firebase — Click here 👇👇