Firebase Cloud Messaging End to End Tutorial

3 min readAug 22, 2020

When I try to learn the FCM, I have difficuties to find the tutorial that explain how to build the notification from scratch. I hope this article will help the audience to learn how build the notification.

Create the project

We start with npm init and complete the instruction. we need to install express js to run our server. To serve that run npm install express . After that create index.js . Put the code below into index.js .

const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
  res.send('Hello World!')}
)
app.listen(port, () => {  
  console.log(`Example app listening at http://localhost:${port}`)
})

please try to run your project with node index.js .

After That we need to create html file to put our firebase code in root folder.

And put it to our path

const express = require('express')
var path = require('path');
const app = express()
const port = 3000app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname + '/index.html'));
)
app.listen(port, () => {  
  console.log(`Example app listening at http://localhost:${port}`)
})

Create Firebase Project

Please go to https://console.firebase.google.com/ to create the project

Now put your into index.html

As you can see from below, line 33-44 we get the token from FCM server. and When we get message from server we will log it to console in line 46-48 .

Now we need to add firebase-messaging-sw.js to our project. It will called when our website is running in the background.

Add to your index.js the path of firebase-messaging-sw.js

const express = require('express')
var path = require('path');
const app = express()
const port = 3000app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname + '/index.html'));
)app.get('/firebase-messaging-sw.js', (req, res) => {
  res.sendFile(path.join(__dirname + '/firebase-messaging-sw.js'));
)app.listen(port, () => {  
  console.log(`Example app listening at http://localhost:${port}`)
})

Run our server and go the console, you will the the token from FCM. Save the token.

save the token, to send notification from server

Send Data from Postman

now we need server key to send from server. We can get it from Project settings > cloud messaging

Open postman, put your server key into the headers section

now fill message body with

this the payload

{  "to":"dbXoKSAqCUGZoE0IFSUNiv:APA91bEDm3qR5cg8LBKVWfTiHnoBuFhN-mLNXcZPWlGPco6uG0C99-4_pSGeY1B_du79gp7nlLinJPN1tCf-otmerD_Scri1x5nBR_uLCukJGAFmmIO-9Bk26yv54_ciAfd0whic-FuN",  "data" : {    "sound" : "default",    "body" :  "test body",    "title" : "test title",    "content_available" : true,    "priority" : "high"   }}

with method POST send it to https://fcm.googleapis.com/fcm/send

if it succeed it will send it to our console