Push Notifications using Angular and Firebase Cloud Messaging | The Blueflame Labs

1
(No Transcript)
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 _at_angular/cli_at_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

• Lets create an angular project using the
  following command.
• ng new project-name.
• We are using Firebase and _at_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 _at_angular/fire save
• For Angular 7 install _at_angular/fire
  5.4.2,
• For Angular 8 install _at_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 dont change it.
• Then link this file in index.html file using
  ltlink rel manifest href./manifest.jsongt

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

• Lets 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 gt 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 keyAAAAWK112nYAPA91bEAMo0_5HYaR0
A9LTslnyGAEIqgTIu1Pica4pyxRQsmM0qzlJ3yD5-X0wdT4M18
IJBp1eIEOg0T74IFPed68FGzl5hkypuWIu2eaCPT1dKWOR-asC
QpTGNblsniAXNqxvTY1wPs \ header Content-Type
application/json \ data-raw notification
title Hello World, body This is
Message from Admin , to
cL8IUShgq4jwbd5ExwkQhsAPA91bF3FN3hcBzKdBWH7N808f
3VIeFNDwTIQ75QtoRZTBJmSvsuR1WZh36nqIZ9KDYp4SGW-3FQ
P-Q4cnBixU-2Ejv0NFLHCA7itJ6U0E1Rtd20ZTMy_xJn0aIDiS
Ip7cV_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
APIs. 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-t
  o-use-push-notifications-using-angular-and-firebas
  e-cloud-messaging/

13
Willing to Explore New Technologies Together for
Mutual Growth
Headquarters Blue Flame Labs Private Limited,5th
Floor, Pride Purple Coronet, Baner Road, Baner,
Pune (MH) 411045 Email ID - fireitup_at_theblueflam
elabs.com 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