Push Notification with Angular & .Net Core using Firebase
So, you want to get users’ attention when something happens or you want to remind them that you have something new in your application. Here is the way I followed using Angular & .Net Core to implement push notifications via FCM (Firebase Cloud Messaging).
I created a blank solution in Visual Studio 2019 and added an ASP.NET project with an Angular template using the latest .Net Core version (3.0).
Note: Be sure that you check ‘configure for HTTPS’ to be able to test push notification on local.
The template will handle rest and initialize an ASP.Net application with Angular 8. If you are a non-windows user, you can use Dotnet-CLI to use the same template.
dotnet new angular
Note: If you are going to use CLI, you need to configure https manually. To be able to do that just run the code below. You can read more from Scott Hanselman.
dotnet dev-certs https — trust
Before switching screens to IDE’s, we need to initialize our web push provider.
Step 1: Configuring FCM for Web Push
Go to firebase console and log in with your Google account. Hit ‘Create New Project’ button and follow the instructions.
After you create your project, you will see a dashboard. Click the menu ‘Cloud Messaging’ on the left.
Click </> icon. This will add a web application to your firebase project.
The site will ask you to give a name for your application and then it will ask you to put a script that adds SDK to your site. Just skip that.
Then, go back to the dashboard and go to the project settings by following the menu on the upper left corner.
The information that we need is in the Cloud Messaging page. We are going to use that information while sending and receiving notifications.
Step 2: Angular
Receiving messages and displaying them as native notifications are different things. The Push API will give us the ability to catch messages. And, the Notification API will take care of the notification display. But because we use FCM; it is going to handle these for us. (It will trigger native notifications when the site is inactive and it will trigger out application code when the site is active)
Before all, we need a service worker.
A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction. Continue reading about service workers.
Why? Because when your client app is not active, the service-worker will be there for handling your push messages.
A service worker is basically a js file. Create a js file called firebase-messaging-sw.js in the src folder in your angular app. Then, put these lines in it:
Then create a file named manifest.webmanifest and put your messagingSenderId in it as below:
Note that the other properties can give you PWA ability, it is better to keep them. If you want to learn more about PWA’s I recommend you to visit this great article: Onder Ceylan — Build a production ready PWA with Angular and Firebase
Now we need to registerfirebase-messaging-sw.js and manifest.webmanifest to angular.
- angular.json
- index.html
We didn’t register service-worker to angular because when we call service to get token, it will automatically load.
We have the necessary components to catch push messages. When you build and run your application, you should be able to see your files loaded correctly and your service worker registered without any error.
To register to FCM push service and create notifications, we need to install these two packages:
npm install firebase @angular/fire --saveGo to app.module.ts and register these modules
You can find apiKey, projectId, and other stuff in your firebase project settings on Firebase Console (Project Settings > General Tab > Your apps section).
Then, create a service named push-notification.service.ts and import and resolveAngularFireMessaging here.
The first thing we need to do is initialize the messaging part. In the constructor, we are telling AngularFireMessaging how to handle when a push message comes and when FCM revokes our token.
requestPermission sends a request to FCM to give us a token. This will also trigger the browser to ask the user to allow push notifications automatically. When you get a token, you should save it to your database for later usage. So you can send user-specific notifications. The best practice is to ask the user to allow push notifications first after they spend some time on the site. Otherwise, they will block it.
receiveMessage will return the messages as observable when your application tab is NOT ACTIVE. So, instead of seeing an automatically created system notification, you will get a push message object and decide what to do. You can play your own in-app sound which will be less disturbing or you can trigger your own system notification like this:
new Notification(message.notification.title, {
body: message.notification.body
});You can read more about notifications here.
You should be aware that there is no guarantee of your push messages’ security. You can encrypt/decrypt messages or you can use push as a trigger to call your API to get the full message.
Step 3: DotNet Core
In this last step, we are going to call the FCM to send our subscribers to send our message. There is an API that Firebase gives, you can develop your own implementation but I used a library called CorePushinstead. Browse and install using package manager:
or run this command:
install-package corepushAfter installing the package, the only code you need is the code below.
Pay attention to lines from 3 to 9. This is the structure of the payload. You need to keep that. And also, in the notification object, you should keep the names as title and body (case sensitive). Otherwise, it is not going to be read correctly in front-end so you won’t display the correct notification.
And, I suggest keeping the serverKey in appsettings.json. It is also important to save the token for every user. (Keep in mind that the user can have multiple devices). Then, you can send user-specific notifications.
This is the stack that I used to implement push notification, and it is working quite good a while. I create a GitHub repository to see the whole picture. Feel free to point if something is wrong with the article or code. I hope it helps you to solve your problem.
