Posted by Anuraj on Thursday, May 7, 2020 Reading time :3 minutes
This post is about how to create and consume Chrome push notifications in Web Applications. Push notifications helps application developers to build more engaging apps for the users.
In this post I am using Chrome Desktop notification service to build push notifications. So first we need to build an Firebase Project. Once you create a Project, click on the Project settings. And create a Web App. Once you created the Web App, you will be able to see Firebase SDK Config.
You need this code to configure your app to receive the Push Notifications.
Next click on the “Cloud Messaging” tab, and you need to create a Server Key, if there is none. The Server key is required to send the notification to client(s) from the Web Application.
Use the following code in the
_layout.cshtml, which initializes the Firebase SDK.
For applications to show browser notifications, first you need to request for permission. Here is the code which will request for the permission and get the token which helps receive the notification.
Right now I am configured this code in a button click, when user clicks on the button it will show a prompt like this.
This token need to be send to server and store it in the database.
Apps can manage push notifications in two ways, first notifications coming when user is using the application, second user is using the browser but not the application. So for the first scenario, users may not need to show the Desktop notification, instead it is better to display the in app, and if the user is not using the application, service worker can be used to display the notification.
So here is code which helps you to consume the code when the app is in Foreground - means user is using the application.
I wrote this code after the initialize app inside the
firebase-messaging-sw.js. Create a script file inside the
wwwroot folder and put the following code.
Now we are ready to run the application. If you’re not added the service worker, the
messaging.getToken() method might fail.
Let’s run the application and click on
Enable Notification button. From the console, copy the token. This token have to store it in the database against the user.
Next use Postman to send notification. Open Postman, Select HTTP method as
POST and use the following as the URL to send the request -
https://fcm.googleapis.com/fcm/send. And in the headers select
Authorization. And use value like
key=YOUR_SERVER_KEY. And HTTP body like this.
In the body, the
to properties are mandatory. Here is the notification displayed as Desktop Notification.
Now we have implemented Chrome Desktop notification with web application. We can enhance introducing topic subscriptions, so that instead of sending the data to individual tokens, we can send it topics. So which ever users subscribed for that topic the message will be delivering.
Happy Programming :)
What do you think? I would like to hear your thoughts, suggestions, and questions in the comments section below.