HOW TO USE PUSH NOTIFICATIONS USING ANGULAR AND FIREBASE CLOUD MESSAGING - The Blueflame Labs

2. INTRODUCTION WHAT IS PUSH NOTIFICATION? ● A Push Notification is a popup message like SMS, but they only reach users who have installed your app. ● Each mobile and browser have support for push notifications. FIREBASE CLOUD MESSAGING (FCM): ● FCM is to send remote notifications to Android devices. ● FCM is a free, cross-platform messaging solution that delivers hundreds of billions of messages per day. FCM messages are two types: ● Notification Messages ● Data Messages

3. PREREQUISITES OF PUSH NOTIFICATIONS: ● Install The latest version of Angular CLI by npm install –g @angular/cli@latest command. Once the project environment has been done Firebase account has to create to connect your web application into cloud messaging. Steps for connecting firebase account: ● ● ● ● ● Visit https://console.firebase.google.com. If you are new, then click on sign up else login to your older account. Once you log in click into the console tab which is on the top right corner. Then click into creating project. Once you created the project look for the project settings General tab and create one app for getting credentials. Once you created the app copy its config for feature use and copy the server key from the cloud messaging tab. ●

4. IMPLEMENTING PUSH NOTIFICATION USING ANGULAR AND FCM 1. Let’s create an angular project using the following command. 1. ng new project-name. ● We are using Firebase and @angular/fire as library in this project. So, we need to install them in the same project directory by using the following command. ○ npm install Firebase @angular/fire –save ○ For Angular 7 – install “@angular/fire”: “^5.4.2”, ○ For Angular 8 – install “@angular/fire”: “^6.0.2”, ● Creating manifest. Json file ○ Create manifest. Json file saves this file in the same project folder where the index.html file resides. We need to add manifest. Json file to our application and register this file with Angular CLI. Push Notification uses a service worker browser extension, which must be registered in this manifest. Json file.

5. IMPLEMENTING PUSH NOTIFICATION USING ANGULAR AND FCM [1] ○ For registration, gcm_sender_id is used to identify an application server that is authorized to send messages to the client application. ○ Create src/manifest. Json. ● gcm_sender_id is the same for all applications in the world don’t change it. ● Then link this file in index.html file using: <link rel=” manifest” href=”./manifest.json”>

6. Creating firebase-messaging-sw.js ○ Create a firebase-messaging-sw.js file in the same directory of manifest.json file. Push notification uses service workers. It is your application to detect new messages, even after the app has been closed by the user. ○ Create src/firebase-messaging-sw.js.

7. Let’s understand its functions ● request Permission (): Browser will ask permission to use for receiving notification. Once permission is granted, Firebase will return a token. This token can use as a reference to send notifications to the browser. ● update Token (): Update token based on userId to Firebase database. You can replace this function based on what needs like an update to your database via back-end service. Remember, you need to change database permission can write new or updated objects. ● receive Message (): This function will be triggered when a new message has been received.

8. ● Configuring your application ○ Before we can start our application, we need to configure our application for the environment. ○ You can get Firebase configuration from the Firebase console – > Settings ● Now we need to add manifest. Json and firebase-messaging-sw.js in angular. Json. make sure these two files are included in angular. Json file when we run or deploy the application to the web server.

9. ● Update your app Component (root component) file with the below code ● Update your app.module.ts file. Now run the project. ● Once the compilation is completely open in your browser and browser will ask for permission. Then click on allow button token id will be generated on the browser console. Now we are ready to go! ● Now look for sending push notifications: You can also hit Firebase cloud messaging directly using cURL

10. CURL REQUEST: curl –location –request POST ‘https://fcm.googleapis.com/fcm/send‘ \ –header ‘Authorization: key=AAAAWK112nY:APA91bEAMo0_5HYaR0A9LTslnyGAEIqgTIu1Pica4pyxRQsmM0qzlJ3yD5-X0wdT4M18IJBp1eIEOg0T74IFPed68FGzl5hkypuWIu2 eaCPT1dKWOR-asCQpTGNblsniAXNqxvTY1wPs’ \ –header ‘Content-Type: application/json’ \ –data-raw ‘{ “notification”: { “title”: “Hello World”, “body”: “This is Message from Admin” }, “to” : “cL8IUShgq4jwbd5ExwkQhs:APA91bF3FN3hcBzKdBWH7N808f3VIeFNDwTIQ75QtoRZTBJmSvsuR1WZh36nqIZ9KDYp4SGW-3FQP-Q4cnBixU-2Ejv0N FLHCA7itJ6U0E1Rtd20ZTMy_xJn0aIDiSIp7cV_NZVlfqo5” }’ gleapis.com/fcm/send

11. SENDING REQUEST USING POSTMAN: Copy pastes below JSON request and enter the body part and provide authorization key in the header section of postman before sending any request over Google API’s. { “notification”: { “title”: “Hello”, “body”: “Please click here” }, “to” : “YOUR-GENERATED-TOKEN” }. Once all done, we can send the request to the server: https://fcm.goo

12. ● We hope you liked this quick tutorial we created on the Firebase account. ● We learnt how to connect our angular application to the firebase cross-platform. ● Using the above steps, we successfully implemented push notification using angular and firebase cloud messaging. ● If you need such services implemented for your organization, we are here. ● Get in touch for Microsoft consulting services and our experts will be happy to assist you. ● Read More : https://www.theblueflamelabs.com/how-to-use-push-notifications-using-angular-and-firebase-cloud-m essaging/

13. Headquarters: Blue Flame Labs Private Limited,5th Floor, Pride Purple Coronet, Baner Road, Baner, Pune (MH) – 411045 Email ID - fireitup@theblueflamelabs.com Willing to Explore New Technologies Together for Mutual Growth Mobile No - IN: +91 020 48610014 UK Regional Office: #5 Coombe Wood Hill, CR8 1JP UK: +44 7418-337694 USA Regional Office: 132 E 13065 S# 175 Draper, UT 84020 US: +1 (626) 427-8157