Flutter has quickly become one the most popular frameworks for cross-platform mobile application development. It helps developers build native UIs with support for different device sizes, pixel densities, and orientations creating a beautiful pixel-perfect UI/UX.

In this tutorial, we are going to learn how to add push notifications to a Flutter app using Firebase Cloud Messaging. This tutorial will only deal with configuration for the Android platform.

First, what are push notifications?

Push Notifications are a sort of pop-up messaging medium that alerts app users to what's going on in the app. They are also an important way to amplify user engagement in your app.

For example, say a user forgets about the app once they have installed it. Then you can use push notifications as a mechanism to regain and retain their interest. Push notifications also help drive traffic to your app.

Firebase Cloud Messaging is a service offered by Firebase which lets you send these notifications to your users. You can set up various configurations to send different notifications to different audiences based on time and routine.

Because of all these benefits, we are going to use it to send notifications to our Flutter app.

Step 1: Create a Flutter Project

First, we are going to create a flutter project. For that, we must have the Flutter SDK installed in our system. You can find simple steps for flutter installation in the official documentation.

After you've successfully installed Flutter, you can simply run the following command in your desired directory to set up a complete Flutter project:

flutter create pushNotification

After you've set up the project, navigate inside the project directory. Execute the following command in the terminal to run the project in either an available emulator or an actual device:

flutter run

After a successful build, you will get the following result in the emulator screen:

Step 2: Integrate Firebase Configuration with Flutter

In this step, we are going to integrate Firebase services with our Flutter project. But first, we need to create a Firebase project. The setup guidelines are also provided in the official firebase documentation for Flutter.

To create a Firebase project, we need to log in to Firebase and navigate to the console. There we can simply click on 'Add a project' to get our project started.

Then a window will appear asking to input the project's name. Here, I've kept the project name as FlutterPushNotification as shown in the screenshot below:

We can continue to the next step when the project has been created. After the project has been set up, we will get a project console as shown in the screenshot below:

Here, we are going to set up Firebase for the Android platform. So we need to click on the Android icon displayed in the above screenshot. This will lead us to the interface to register Firebase with our Flutter app project.

Step 3: Register Firebase to Your Android App

As the registration process is platform-specific, we are going to register our app for the Android platform. After clicking on the Android icon, we will be directed to an interface asking for the Android package name.

In order to add the package name of our Flutter project, we need to locate it first. The package name will be available in the ./android/app/build.gradle file of your Flutter project. You will see something like this:

com.example.pushNotification

We just need to copy it and paste it to the Android package name input field as shown in the screenshot below:

After that, we can simply click on the 'Register app' button. This will lead us to the interface where we can get the google-services.json file which will link our Flutter app to Firebase Google services.

We need to download the file and move it to the ./android/app directory of our Flutter project. The instructions are also shown in the screenshot below:

Step 4: Add Firebase Configurations to Native Files in your Flutter Project

Now in order to enable Firebase services in our Android app, we need to add the google-services plugin to our Gradle files.

First in our root-level (project-level) Gradle file (android/build.gradle), we need to add rules to include the Google Services Gradle plugin. We need to check if the following configurations are available or not:

buildscript {
  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
  }
  dependencies {
    ...
    // Add this line
    classpath 'com.google.gms:google-services:4.3.4'
  }
}

allprojects {
  ...
  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
    ...
  }
}

If not, we need to add the configurations as shown in the code snippet above.

Now in our module (app-level) Gradle file (android/app/build.gradle), we need to apply the Google Services Gradle plugin.

For that, we need to add the piece of code highlighted in the following code snippet to the ./android/app/build.gradle file of our project:

// Add the following line:
**apply plugin: 'com.google.gms.google-services'**  // Google Services plugin

android {
  // ...
}

Now, we need to run the following command so that some automatic configurations can be made:

flutter packages get

With that we have successfully integrated Firebase configurations with our Flutter project.

Step 5: Integrate Firebase Messaging with Flutter

First, we need to add the firebase-messaging dependency to the ./android/app/build.gardle file. In the file, we need to add the following dependencies:

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.google.firebase:firebase-messaging:20.1.0'
}

Next, we need to add an action and a category as an intent-filter within the activity tag in the ./android/app/src/main/AndroidManifest.xml file:

<intent-filter>
    <action android:name="FLUTTER_NOTIFICATION_CLICK" />
    <category android:name="android.intent.category.DEFAULT" />
</intent-filter>

Now, we need to create a Java file called Application.java in the path /android/app/src/main/java/.

Then, we need to add the code from the following code snippet inside it:

package io.flutter.plugins.pushNotification;

import io.flutter.app.FlutterApplication;
import io.flutter.plugin.common.PluginRegistry;
import io.flutter.plugin.common.PluginRegistry.PluginRegistrantCallback;
import io.flutter.plugins.GeneratedPluginRegistrant;
import io.flutter.plugins.firebasemessaging.FirebaseMessagingPlugin;
import io.flutter.plugins.firebasemessaging.FlutterFirebaseMessagingService;

public class Application extends FlutterApplication implements PluginRegistrantCallback {
    @Override
    public void onCreate() {
        super.onCreate();
        FlutterFirebaseMessagingService.setPluginRegistrant(this);
    }

    @Override
    public void registerWith(PluginRegistry registry) {
        FirebaseMessagingPlugin.registerWith(registry.registrarFor("io.flutter.plugins.firebasemessaging.FirebaseMessagingPlugin"));
    }
}

Now, we need to assign this Application activity to the application tag of the AndroidManifest.xml file as shown in the code snippet below:

<application
        android:name=".Application"

This completes our setup of the Firebase messaging plugin in the native Android code. Now, we'll move on to the Flutter project.

Step 6: Install the Firebase Messaging Package

Here, we are going to use the [firebase_messaging] package, which you can find here. For that, we need to add the plugin to the dependency option of the pubspec.yaml file.

We need to add the following line of code to the dependencies option:

firebase_messaging: ^7.0.3

Step 7: Implement a Simple UI Screen

Now, inside the MyHomePage stateful widget class of the main.dart file, we need to initialize the FirebaseMessaging instance and some constants as shown in the code snippet below:

String messageTitle = "Empty";
String notificationAlert = "alert";

FirebaseMessaging _firebaseMessaging = FirebaseMessaging();

The messageTitle variable will receive the notification message title and notificationAlert will be assigned the action that's been completed once the notification comes up.

Now, we need to apply these variables to the build function inside the Scaffold widget body as shown in the code snippet below:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              notificationAlert,
            ),
            Text(
              messageTitle,
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
    );
  }

Next, we need to run the Flutter application by executing the following command in the project terminal:

flutter run

We will get the result you see in the image below:

For now, the notification title is empty, and the alert is also as defined. We need to assign a proper value to them once we receive the notification message.

So we need to configure the code to receive the notification and use the notification message to display it on the screen.

For that, we need to add the code from the following code snippet in the initiState function:

@override
  void initState() {
    // TODO: implement initState
    super.initState();

    _firebaseMessaging.configure(
      onMessage: (message) async{
        setState(() {
          messageTitle = message["notification"]["title"];
          notificationAlert = "New Notification Alert";
        });

      },
      onResume: (message) async{
        setState(() {
          messageTitle = message["data"]["title"];
          notificationAlert = "Application opened from Notification";
        });

      },
    );
  }

Here, we have used the configure method provided by _firebaseMessaging instance which in turn provides the onMessage and onResume callbacks. These callbacks provide the notification message as a parameter. The message response will hold the notification object as a map object.

The onMessage function triggers when the notification is received while we are running the app. The onResume function triggers when we receive the notification alert in the device notification bar and opens the app through the push notification itself. In this case, the app can be running in the background or not running at all.

Now we are all equipped with the Flutter app. We just need to configure a message in Firebase Cloud Messaging and send it to the device.

Step 8: Create a Message from the Firebase Cloud Messaging Console

First, we need to go back to the Cloud Messaging console in the Firebase site as shown in the image below:

Here, we can see the 'Send your first message' option in the window, as we have not configured any messages before. We need to click on it which will lead us to the following window:

Here, we can enter the title, text, image, and name of the notification. The title we set here will be provided as the title in the message object on the callbacks we set before in the Flutter project.

After setting the required fields, we can click on 'Next' which will lead us to the following window:

Here, we need to provide our target app and click on 'Next'.

For Scheduling we can keep the default option:

Next, the Conversion window will appear which we can keep as default as well, and then click on the 'Next' button.

Lastly, a window where we need to enter the custom data will appear in which we can set the title and click_action. This click action event is triggered whenever we click on the notification that appears in the notification bar of the device.

After clicking on the notification message from the notification bar, the app will open and the onResume callback will trigger, setting title as assigned in the custom data in the screenshot below:

Now, we are ready to send the first notification message to the device. First, let's try it with the device running in the emulator.

As we click on the 'Review' button and send the message, we will get the following result in the Cloud Messaging console as well as the emulator:

Here, we can see that the title and the notification alert on the emulator screen are updated as soon as we send a message from the console. We can be sure that the onMessage callback was triggered in the app after receiving the notification message.

Now let's try with the app running in the background. As we send the message from the console, we will get the result as shown in the demo below:

Here, as soon as we send the message, we receive a push notification in the notification bar of the device. Then, as we drag down the notification bar, we can see the notification message title and text. And, by clicking on the notification message, we can launch the application and display the custom data on the screen. This ensures that our onResume callback was triggered.

And we're done! We have successfully added a push notification feature in our Flutter application using Firebase Cloud Messaging.

Conclusion

Push notifications are essential in any app. They can be used to alert users to what's going on in the app, and can help drive users' interest back to the app.

Additionally, Firebase Cloud Messaging makes sending notification alerts much simpler and easier.

In this tutorial, we started by configuring the Firebase app and then moved on to the setup and implementation of the Firebase messaging configuration in the Flutter app. Lastly, we were able to send notification alerts to the app using Firebase Cloud Messaging.

The tutorial was meant to be simple and easy to understand. Hope that it helps you add push notification to your Flutter apps. Want to see some examples of how you can implement all this? Check out these powerful Flutter templates.

A full step-by-step tutorial that will get you on the right track for iOS and Android

Setting up push notifications can be truly frustrating and time consuming. So I went through all of the setups and prepared this tutorial for you.

Prerequisite

Ionic 4 should already be installed.

Section navigation

1. Package installation
2. Firebase setup for Android and iOS
3. Push notification code implementation
4. Test push notifications on Android
5. iOS push notification pre-setup
6. Test push notifications on iOS

1. Package installation

Open your Ionic project in the coding editor of your choice, and open your terminal as well. Navigate to your project’s folder.

First, we will install all of the required packages.

What we need to install:

• Cordova plugin for firebase: ionic cordova plugin add cordova-plugin-firebase
• Firebase native package: since Ionic 4 is in beta, check your Ionic-native packages in package.json and install the same version as other Ionic-native packages. Finally, let’s type: npm install --save @ionic-native/firebase@5.0.0-beta.14

I have version of beta.14

• One last package, AngularFire 2. This is a library for Angular and Firebase: npm install --save angularfire2 firebase

Packages install, done! Let’s move to the second section.

2. Firebase setup for iOS and Android

Before we will start all of the setup, I need to warn you that you cannot test your push notifications on iOS emulator. To test it out you need to have an Apple Developer account, which costs around $99USD per year. I suggest you to go through iOS setup anyway so it will give you a better understanding for future projects.

Note: The steps starting here are very important, so please be patient. Read slowly and make sure you get everything right. Looking for issues after all of the setup can be very frustrating, trust me — I am speaking from my own experience.

iOS

Navigate to the Firebase page and login to a console. If you don’t have a project created yet, do it now. You should see this screen.

Click on the iOS button and you’ll see this:

Now we need to provide our iOS bundle ID and this has to be the same as in your Ionic project. Let’s say I want to have the bundle name com.filipjerga.angularcourse, then I need to do the following:

Open your Ionic projects and navigate to “config.xml” file. Let’s inspect the widget element. The Id attribute holds the unique identifier of your application. I said before if you specified your bundle name to com.filipjerga.angularcourse in Firebase, the id in your Ionic project has to be the same! You can also leave the id as you have it already in your Ionic project but then you need to change it in Firebase.

widget element id is what we need to specify in Firebase

After you get the value of id, don’t forget to provide it to your Firebase application as the bundle ID.

Bundle ID has to be a same as your widget id

That should be everything in the first step of registering the application. This step is crucial, so double check the value of id on the widget and bundle ID of your Firebase application.

Leave the other fields blank and click “Register app”.

Now we need to download “GoogleService-Info.plist”.

When it’s downloaded, paste it into a base folder of your projects. You can see a folder structure in my project here.

We can skip all of the further steps, as they are not required for the Ionic project setup. You should have your IOS application ready.

Skip this step

Android

The following steps for Android are almost the same as for the iOS setup:

• Click ‘add app’ for Android, same as we did in iOS before.
• The Android package name needs to be the same as our widget id, in my case: com.filipjerga.angularcourse
• Next, download google-services.json. Same as before with the iOS file, we need to copy it to the base folder of our applications
• Click “Next” until you are on the last step, which you can skip, and you should end up with both applications created.

Yay! Congrats! But it’s still too early to cheer.

Both iOS and Angular apps created.

3. Push notification code implementation

Package importing

The time has come to finally warm up our fingers by typing some code. We will start with importing the packages we installed before.

1. Go to app.module.ts
2. Your file should look like this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { Firebase } from '@ionic-native/firebase/ngx';

const config = {
    apiKey: "AIzaSyD-K6SlFECXKmd8iHwEvggVtavKgyPF2k8",
    authDomain: "angular2-course-9270e.firebaseapp.com",
    databaseURL: "https://angular2-course-9270e.firebaseio.com",
    projectId: "angular2-course-9270e",
    storageBucket: "angular2-course-9270e.appspot.com",
    messagingSenderId: "443316848633"
  };

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    IonicStorageModule.forRoot(),
    AngularFireModule.initializeApp(config),
    AngularFirestoreModule],
  providers: [
    StatusBar,
    SplashScreen,
    Firebase,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

You can see Firebase in the providers array, and AngularFirestoreModule and AngularFireModule in imports.

But where did the config object came from ? You can see lot of information there as “apiKey, authDomain” and so on.

To answer this we need go back to our Firebase console and create a web app.

Select web platform

You need to click on a web platform icon on the right from the Android icon (see the image above). When the web app is selected you will be presented with your own config object.

My config object for Firebase after selecting web app.

Now it’s time to copy whole config object to app.module.ts in our Ionic projects. Please make sure you change it for your config object! Mine will not work for you.

Provide config to app.module.ts

Now we can start working on the implementation of the push notification service.

Push notification service

Let’s create a new service. Call it what you like. I will call mine fcm.service.ts. FCM stands for Firebase Cloud Messaging.

First, let’s take a look at the service implementation. I will explain it line by line.

import { Injectable } from '@angular/core';
import { Firebase } from '@ionic-native/firebase/ngx';
import { Platform } from '@ionic/angular';
import { AngularFirestore } from 'angularfire2/firestore';

@Injectable()
export class FcmService {

  constructor(private firebase: Firebase,
              private afs: AngularFirestore,
              private platform: Platform) {}

  async getToken() {
    let token;

    if (this.platform.is('android')) {
      token = await this.firebase.getToken();
    }

    if (this.platform.is('ios')) {
      token = await this.firebase.getToken();
      await this.firebase.grantPermission();
    }

    this.saveToken(token);
  }

  private saveToken(token) {
    if (!token) return;

    const devicesRef = this.afs.collection('devices');

    const data = {
      token,
      userId: 'testUserId'
    };

    return devicesRef.doc(token).set(data);
  }

  onNotifications() {
    return this.firebase.onNotificationOpen();
  }
}

If we want to send a push notification to a device, we need to get an unique identifier of the device. In this case it’s called a token.

We need to check for a platform specific device, because of an additional step in the iOS setup. iOS requires explicit permissions to receive push notifications.

Now we need to store this token somewhere, but where? We will store tokens in the Firebase database. You can see, I am creating device collections and I am filling them with data that contains the token and just a testing UserId. Perfect! Now, we have stored our token and we can subscribe to notifications.

Subscribing to notifications is actually very simple. We just need to call this.firebase.onNotificationOpen()

Amazing. Service checked!

All of this is nice but kinda useless, since we are not using our service yet. Let’s fix it!

Move to your app.component.ts and write the following:

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { FcmService } from './shared/service/fcm.service';
import { ToastService } from './shared/service/toast.service';
import { ToastController } from '@ionic/angular';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private fcm: FcmService,
    private toastr: ToastService,
    public toastController: ToastController

  ) {
    this.initializeApp();
  }

  private async presentToast(message) {
    const toast = await this.toastController.create({
      message,
      duration: 3000
    });
    toast.present();
  }

  private notificationSetup() {
    this.fcm.getToken();
    this.fcm.onNotifications().subscribe(
      (msg) => {
        if (this.platform.is('ios')) {
          this.presentToast(msg.aps.alert);
        } else {
          this.presentToast(msg.body);
        }
      });
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.notificationSetup();
    });
  }
}

Especially important here is the function notificationSetup.

We are getting an unique token of the device first.

We are also subscribing to incoming notifications from Firebase.

When the message is received, we need to check, again, for specific platforms. On iOS your message text is under aps.alert . On Android it’s under body.

Then we will just simply display the received message as a Toast.

Now the code setup is done. We are getting very close! It’s time to test it out.

4. Test push notifications on Android

All of the required setup for Android should be done right now. You can start emulating your app by:

ionic cordova emulate android

or

ionic cordova build android and open your build manually in Android Studio.

Let’s launch our applications and go to a Home menu, so we will see a push notification there. Make sure your application was launched properly in emulator and you have no errors.

Go back to your browsers to your Firebase Applications. Now it’s time to inspect our Firebase Database. You can find the database option in the left panel under the Develop category.

Firebase Database

After your application was launched in emulators, the code from app.component.ts we wrote a few moments ago ran. No wonder our database is populated. In the “saveToken” function we specified the “devices” collection and we saved the token with the user id as a document into this devices collection. That is what we see in our database.

In my case, I have multiple tokens in my database but you should have only one since we’ve run our app the first time. You will create a new document per unique device/emulator you are running your app on.

Now it’s time to copy this token in order to send push notification to a specific device.

Firebase database collection, You will see only one document

Navigate to the left panel to a grow tab and click on cloud messaging.

Click on Cloud Messaging

Now we need to fill in the necessary data. Enter the text of your message and provide the token of the device from the database we just copied.

When you are sending a message, open your emulated device simultaneously and watch what happens.

Send a message, aaaaand Congrats! Now your Android setup is done and you are able to send push notifications! Isn’t that awesome?

Push notification on Android.

5. iOS push notification pre-setup

Buckle up guys, iOs setup is coming. Let’s separate this setup into multiple steps, so we will not have a panic attack. Let’s dig in!

First, build your application for iOS: ionic cordova build ios

Open your Xcode, and find your built app in platforms/ios/nameofyourapp.xcodeproj . Open it.

Open your .xcodeproj

This should open a tree structure of your application on the left side. Double Click the root file of this structure. This will open an additional menu with more settings for your app.

More settings

Sign in with your developer account.

Sign in with a developer account

5. Open the top “Capabilities” tab and enable “Push Notifications”.

Enable Push Notifications

6. Navigate to your Apple developer account page. Under “Certificates” select “All” and click "+" to add a new certificate.

Click the plus sign.

Enable the Apple Push Notification service and proceed to the next step.

Now let’s choose your application.

We need to request a certificate. On your Mac, go to “Keychain Access” -> “Certificate Assistant” -> “Request a Certificate From a Certificate Authority”.

Complete all the necessary information — your email and common name — and save it to disk.

In the Apple Console proceed to the next step and upload your certificate request.

In the next step your certificate should be created and you can download it. You will need it later.

Now we need to create a service key to enable Apple push notifications. Under “Keys” select “All” . Choose your key name. Enable “Apple Push Notifications service (APNs)”.

Click “Continue” and confirm your key. Never share such data with others. You can now download your key.

Now we need to go back to Firebase.

In Firebase, open your iOS application and navigate to “Cloud Messaging”.

We need to upload our APN Authentication Key we generated a while ago. Click “Upload”.

Provide all the information and upload the key.

First, upload your “.p8” file, downloaded from the Apple console earlier. Enter your Key ID. You can get the App ID prefix from the Apple console in “Identifiers”->“App IDs”->“Your App”->“Prefix”.

Upload p8 file and get keyID and ID prefix

That’s it. Tears of joy are running down my face.

We can test Push Notifications on iOS. Let’s not forget we need to use a real device.

6. Test push notification on iOS

First, we need to build our applications so let’s run: ionic cordova build ios

In Xcode you can run your application on a device connected by USB with your computer.

Choose your device

Let’s wait until everything is launched. We can now repeat the steps to send push notifications from Section 4, because it is the same as on Android.

Remember that you need to use a new token now, that was generated for your iOS device. Go to Databases, get a new token, and send a push notification. Your result should look like this.

I hope you have been successful with setting up your push notifications. It takes some time and patience to get everything right, but the outcome and benefits are amazing.

If you like my tutorial and you are interested in more, you can check out my course on Udemy: Ionic 4 Crash Course with Heartstone API and Angular.

For a full project see my Github Repo.

Happy Coding!

Filip

As web applications evolve, it is increasingly common to come across functionality that you’d normally associate with a native app in a web app. Many sites send notifications to their users through the browser for various events that occur within the web app.

Today, I’ll show you the steps required, in detail, to achieve such functionality in your web app using Firebase.

Notifications with Firebase

Firebase is a platform that offers various services for mobile and web applications and helps developers build apps quickly with a lot of features.

To send the notifications, we will use the service called Cloud Messaging, which allows us to send messages to any device using HTTP requests.

Project Setup

First of all, you need to have a Firebase account and you’ll need to create a new project within it.

For this demo setup, I will use a simple project created with the create-react-app, but you can use the same code anywhere else that uses JavaScript.

In addition to that, we need to add the Firebase library to the project.

npm install firebase --save

So let’s get coding!

Now that we’ve done our setup, we can begin coding the module that will be in charge of notifications.

Let’s create a file inside the project directory called push-notification.js.

Inside the file, let’s create a function that initializes Firebase and passes the keys of your project.

import firebase from 'firebase';

export const initializeFirebase = () => {
  firebase.initializeApp({
    messagingSenderId: "your messagingSenderId"
  });
}

Well, now that we have the function we need to call it.

Inside the entry point of your project, import the function and call it.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { initializeFirebase } from './push-notification';

ReactDOM.render(<App />, document.getElementById('root'));
initializeFirebase();

You can find the keys to your project inside the Firebase Console.

Getting the keys

Service Workers

A service worker is a script that your browser runs in the background, separate from the web page, enabling features that do not require a web page or user interaction.

To receive the onMessage event, your app needs a service worker. By default, when you start Firebase, it looks for a file called firebase-messaging-sw.js.

But if you already have one and want to take advantage of it to receive notifications, you can specify during the Firebase startup which service worker it will use. For example:

export const inicializarFirebase = () => {
  firebase.initializeApp({
    messagingSenderId: 'your messagingSenderId'
  });

navigator.serviceWorker
    .register('/my-sw.js')
    .then((registration) => {
      firebase.messaging().useServiceWorker(registration);
    });
}

This service worker will basically import the script needed to show the notifications when your app is in the background.

We need to add firebase-messaging-sw.js to the location where your files are served. As I’m using the create-react-app, I’m going to add it inside the public folder with the following content:

importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');

firebase.initializeApp({
    messagingSenderId: "your messagingSenderId again"
});

const messaging = firebase.messaging();

Requesting permission to send notifications

Well, everyone knows how annoying it is to enter the site and ask for authorization to send notifications. So let’s do it another way!
Let the user choose whether or not to receive notifications.

First of all, let’s create the function that will make the request and return the user’s token.

Inside our push-notification.js file, add the function:

export const askForPermissioToReceiveNotifications = async () => {
  try {
    const messaging = firebase.messaging();
    await messaging.requestPermission();
    const token = await messaging.getToken();
    console.log('token do usuário:', token);

    return token;
  } catch (error) {
    console.error(error);
  }
}

We need to call this function from somewhere, so I’ll add it at the click of a button.

import React from 'react';
import { askForPermissioToReceiveNotifications } from './push-notification';

const NotificationButton = () => (
    <button onClick={askForPermissioToReceiveNotifications} >
      Clique aqui para receber notificações
    </button>
);

export default NotificationButton;

Okay, let’s see it working:

Sending notifications

To send the notification, we need to make a request to the Firebase API informing it of the token the user will receive.

In the examples below I use Postman, but you can do this from any other REST client.

Basically, we need to make a POST request to https://fcm.googleapis.com/fcm/send by sending a JSON in the request body.

Below is the structure of the JSON that will be sent:

{
    "notification": {
        "title": "Firebase",
        "body": "Firebase is awesome",
        "click_action": "http://localhost:3000/",
        "icon": "http://url-to-an-icon/icon.png"
    },
    "to": "USER TOKEN"
}

In the request header, we need to pass the server key of our project in Firebase and the content-type:

Content-Type: application/json
Authorization: key=SERVER_KEY

The server key is found in the project settings in the Firebase Console under the Cloud Messaging tab.

Notifications in action

Remember that notifications will only appear when your app is minimized or in the background.

That is how we send a direct notification to a device.

Send notifications to a group of users

Well, now that we’ve seen how to send a notification to one user, how do we send a notification to multiple users at once?

To do this, Firebase has a feature called topic, where you insert multiple tokens for a specific topic, and you can send the same notification to all of them from a single request.

How to do this

We will basically send a POST request to the address https://iid.googleapis.com/iid/v1/TOKEN/rel/topics/TOPIC_NAME, passing the topic name and the token in the URL.

Do not forget to pass in the header the same authorization that we used to send the notification.

Sending the notification to users subscribed to any topic is very similar to sending a notification to a single user. The difference is that we need to pass the topic name in the “to” attribute instead of the token.

See the example below:

{
    "notification": {
        "title": "Firebase",
        "body": "Firebase topic message",
        "click_action": "http://localhost:3000/",
        "icon": "http://localhost:3000/icon.png"
    },
    "to": "/topics/TOPIC_NAME"
}

Conclusion

Thanks for reading this! I hope you now understand how to make use of push notifications. The repository with the demo code can be found here.

To get notified of my future posts, follow me on GitHub or Twitter.

Push Notifications fail on specific Android phones. Here’s why.

I recently added support for Push Notifications in the Kayako App. I tested and shipped it. And I thought I did pretty good job.

But then one by one, my users start commenting that the the app doesn’t show any notifications about 95% of the time. At first, I thought it was a mistake because the Push Notifications were working as intended on my emulator and devices. But as I dug deeper, it became clear how serious and valid this problem was. This was but the tip of the iceberg. Close to 50% of our Android app users were affected but only few informed us about it.

So, what’s the problem?

Push Notifications are not working properly on specific Android phones.

I use the word ‘properly’ because users receive push notifications when the app is open but not when it is closed, which defeats the purpose of push notifications.

I use the words ‘specific Android phones’ because this issue is noticed only on phones by manufacturers like Xiaomi, Oppo, One Plus, Vivo, Lenovo, Huawei, Samsung, and a few others.

Why is this happening and how do we fix it?

To understand the problem, let’s first understand the Android UI and the expected behavior of Push Notifications.

On Android, we have three buttons at the bottom as part of the Navigation Bar. The square button, on click, opens the Recents screen. The Recents screen lists all the ongoing tasks or apps recently opened. We can clear these applications at any time, as shown below.

Recents Screen

Yet on certain stock ROMs (Android operating system customized by device manufacturers), clearing an application kills that application and its background services. This is bad because we need background services to show Push Notifications.

When the server informs the Android device of a new Push Notification, it would normally re-start the application’s background services to show the notification to the user. That’s good because background services will automatically start to show push notifications.

The image below shows the expected behavior which is the case for vanilla ROMs. This is the original Android firmware that is not customized by manufacturers.

Expected Push Notification Behavior

Yet despite this, some Android phones using the Kayako app are not receiving Push Notifications when the app is cleared from Recents screen. The reason is that phone manufacturers like Oppo, Xiaomi, and One Plus use a stock ROM that disables the re-starting of background services for most apps. This is bad because we’re back to where we started with no way to show Push Notifications.

Thankfully, these stock ROMs have a Settings page to enable the re-starting of background services. Although the auto-starting of background services are disabled by default, users can manually enable this feature by following some instructions. This is good because now background services can be automatically started to show Push Notifications. But, it’s an ugly solution because it involves some manual work that the user has to do.

The intentions of the manufacturers are to conserve battery and improve performance. The app users now have to open their settings app, navigate to the correct page, scroll through a list of apps, and then enable the feature for the Kayako app.

But wait, why don’t apps like Gmail and Slack have these problems?

Top-popular apps like Gmail, Slack and Whatsapp are whitelisted by these stock ROMs. That means these apps have auto-launch enabled for them by default.

However our app, along with many many others, have auto-launch disabled by default.

One Plus ‘Apps auto-launch’ Settings page

I can’t find the settings to enable auto-launch. Where are they located?

The steps to enable auto-launch for an app are different for different manufacturers. This is because this is not a native Android feature and is very specific to stock ROMs.

It should also be noted that the terminology used by each manufacturer is different. The auto-launch feature can be referred to as app auto-start, start-up manager, auto-start manager, app optimisation, protected apps, or background app management.

To make matters worse, the auto-launch settings page is not easy to find. For One Plus devices (using Nougat or below), you need to open up Settings, click Apps, then the gear icon located on the toolbar, and then Apps Auto-launch under the Advanced sub-category at the very bottom.

Alright, what’s the solution?

In the end, the user will have to perform the steps manually. This can not be programmatically enabled for all devices. The best we can do is to make it as easy as possible for app users to do so.

Create a support article

Kelly O’Brien and I wrote an article which makes an attempt to identify all the device manufacturers with this problem and explain the steps to enable Push Notifications on those devices. You can read about it here.

Inform users in-app

As I mentioned before, not everyone takes the time out to complain. I can not expect users to contact the support team or search for the support article online. At the same time, there’s no easy way to automatically identify if Push Notifications aren’t working when the app is closed.

I decided to show a small footer on the Push Notifications Settings page where the article is available to the user at all times.

Push Notification Settings Page

Open the concerned settings page in-app

I’ve found many Stack Overflow answers like this one which recommend programmatically opening the concerned settings page by detecting your device manufacturer. While I like the idea, I have not implemented this. I haven’t had the chance to test if the device-specific code actually works which puts me at unease.

If you have other suggestions or ideas, I welcome them.