1. Introduction

1.1 Goal

This tutorial aims to introduce you to Firebase Cloud Messaging (FCM), a cross-platform messaging solution that lets you reliably deliver messages at no cost. We'll get you up and running by setting up FCM in a project, sending a first notification, and handling these notifications in an application.

1.2 Learning Outcomes

By the end of this tutorial, you'll be able to:

• Set up FCM in your project
• Send push notifications via FCM
• Handle incoming notifications in your application

1.3 Prerequisites

For this tutorial, you should have:

• A basic understanding of JavaScript and Node.js
• Firebase project setup

2. Step-by-Step Guide

2.1 Setting up FCM in your Project

Before you can send or receive messages, you need to set up FCM in your project. This involves creating a Firebase project, adding a Firebase configuration file, and initializing Firebase in your app.

2.2 Sending your First Notification

Once you've set up FCM, you can send your first notification. This involves creating a message, setting the target, and sending the message.

2.3 Handling Notifications

When a notification is received, your app needs to handle it. This can involve displaying the notification, updating the UI, or even performing a background task.

3. Code Examples

3.1 Setting up FCM

// Import the firebase module
const firebase = require("firebase");

// Initialize Firebase
var config = {
  apiKey: "<API_KEY>",
  authDomain: "<PROJECT_ID>.firebaseapp.com",
  databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
  projectId: "<PROJECT_ID>",
  storageBucket: "<BUCKET>.appspot.com",
  messagingSenderId: "<SENDER_ID>",
};

firebase.initializeApp(config);

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

3.2 Sending a Notification

// Define a message
var message = {
  data: {
    score: '850',
    time: '2:45',
  },
  topic: 'general',
};

// Send a message to devices subscribed to the provided topic.
admin.messaging().send(message)
  .then((response) => {
    // Response is a message ID string.
    console.log('Successfully sent message:', response);
  })
  .catch((error) => {
    console.log('Error sending message:', error);
  });

3.3 Handling a Notification

messaging.onMessage((payload) => {
  console.log('Message received. ', payload);
  // ...
});

4. Summary

In this tutorial, we went over setting up Firebase Cloud Messaging in your project, sending your first notification, and handling incoming notifications. The next steps would be to delve deeper into the capabilities of FCM, such as topic messaging, subscription management, and message targeting.

5. Practice Exercises

5.1 Exercise 1

Create a Firebase project and set up FCM. Send a test notification to a specific topic.

5.2 Exercise 2

Write a function to handle incoming FCM notifications and log the payload to the console.

5.3 Exercise 3

Expand your function from Exercise 2 to display a notification to the user when a message is received.

Solutions

5.1.1 Solution to Exercise 1

The solution to this exercise involves following the setup steps outlined in section 2.1 and the message sending steps in section 3.2.

5.2.1 Solution to Exercise 2

The solution to this exercise involves creating a function that uses the onMessage() method from the Firebase Messaging instance.

messaging.onMessage((payload) => {
  console.log('Message received. ', payload);
});

5.3.1 Solution to Exercise 3

The solution to this exercise involves expanding the function from Exercise 2 to create a notification. The exact implementation will vary depending on your application's UI library or framework.