Select Page

In this post, I’d like to outline how to start using Firebase Cloud Messaging in order to send push notifications to the web and mobile applications. I’ll show you how to create your first Firebase project and then send and receive the first notification. But first, let’s start with small piece of Firebase history.

What is the Firebase Cloud Messaging (FCM)?

It’s a cloud solution created by Firebase company. This company was established in 2011 and then bought by Google in 2014. At the beginning, they offered only an online database, but after some time they have developed much more solutions especially the Cloud Messaging, which was combined with Google Cloud Messaging (GCM).
FCM allows you to send a push notification to both mobile (native & hybrid) and web applications. For now, it’s still available as free service.

How to start with the FCM?

First of all, you need to create a Firebase account and add a project. You can do this in the Firebase Console.
Once you have created a new project, you will be able to add an application to it. You just need to choose what kind of app you want to create (iOS, Android or Web App).

Firebase Console create project

Creating the first project in the Firebase Console

You can choose an application which suits you best. After selecting it Firebase will guide you hot to setup your project. If you don’t have any existing projects where you’d like to use the push notifications you may use a web application to check how it works. For this purpose I’ll use the web app as demo, however receiving the notification is very similar on every kind of application.
After selecting the web app you should get a small code snippet, which you need to copy and paste into your application. The easiest way to get it running is cloning a quick-start repository from GitHub.
The project’s readme recommends installing the Firebase CLI (firebase-tools) package from the npm. But in my opinion, it’s not necessary, especially for the last time it didn’t work for me, and we only need one tool for running a small web server which serves files from the message directory. For this, we can use the http-package package (you can also use any other one if you have it installed).

To install http-package:

npm install -g http-server

We used -g param in order to install it globally in our system. You can skip it if you only want to install it in the working directory.

Once you have installed it we can start serving files by running the below command in the message directory:

http-server

Set up the web application to receive the first notification

In the message directory we have multiple files:

Messaging folder - quickstartjs

Content of messaging folder

but let focus first on index.html where we need to paste the initialization snippet from the Firebase Console. Find section:

<!-- PASTE FIREBASE INITIALIZATION CODE HERE -->
<!-- END INITIALIZATION CODE -->

and paste there your initialization code (don’t forget to copy the first line with firebase.js script).

Add firebase to web app

Adding firebase to the web app

2016-12-13-18_05_45-firebase-cloud-messaging-example-2

Firebase application – ask for permissions

Then when you refresh the page you should see a similar screen as one below (with request permission button and console view without any errors).

Sending the first message via the Firebase Console

Once you’ve requested for permissions to receiving notifications you should get a token. To send a notification we need make HTTP POST request.

POST https://fcm.googleapis.com/fcm/send	
Authorization: key=YOUR-SERVER-KEY
Content-Type: application/json

{
  "notification": {
    "title": "Your title",
    "body": "Body text",
    "icon": "firebase-icon.png",
    "click_action": "http://localhost:PORT"
  },
  "data": {
    "custom": "data",
    "foo": "bar"
  },
  "to": "YOUR-IID-TOKEN"
}

You can use your favourite REST Client for that. In the response, you should get the message ID

Exmaple request and response in POST Man

An exmaple request and response in Postman

and see the message details in the browser:

2016-12-13-18_43_55-firebase-cloud-messaging-example

Message details in the browser

Summary

Congratulations! You’ve successfully started your journey with Firebase Cloud Messaging. Let me know if you have any question or problems. FCM is definitely much more interesting and this post is only an introduction to it. If you are interested in, check my future posts where I’ll cover more advanced topics. I also recommend checking this video:

shares