Mock Firebase Cloud Message

Firebase Cloud Messaging (FCM) allows to send notifications to all the devices (IOS, Android and Web). It’s always painful to test the application notification message end to end Google Quick starter code helps to test FCM notifications

Prerequisite

  • Firebase CLI (You must have the Firebase CLI installed to run the test code on local machine,. If you don’t have it install it with npm install -g firebase-tools and then configure it with firebase login.)
  • Firebase Project (A Firebase project is required to configure token)
  • Firebase Project should set Web App
  • Git (Required to clone git repo)

Google Test Code

Clone Firebase example for mock https://github.com/firebase/quickstart-js

Firebase Setup

  • Create your project in the Firebase Console by following Step 1: Create a Firebase Project
  • Register a web app by following Step 2: Register your app with Firebase.
    1. You don’t need to add Hosting right now, and you can skip the “Add Firebase SDK” step in the console’s “Add Firebase to your web app” flow.
    2. Remember to click “Register App” or “Continue to console” at the bottom of the “Add Firebase to your web app” flow.
  • Open Project and go to Project settings > Cloud Messaging and there in section Web configuration click Generate key pa
YOUR_PUBLIC_VAPID_KEY
  • Copy public key and in index.html file replace <YOUR_PUBLIC_VAPID_KEY_HERE> with your key.
  • On the command line run firebase login and select the Firebase project you have created.
  • On the command line run firebase use --add and select the Firebase project you have created.
  • On the command line cd quickstart-js/messaging and run firebase serve -p 8081 using the Firebase CLI tool to launch a local server.
  • Open http://localhost:8081 in your browser.
  • Click REQUEST PERMISSION button to request permission for the app to send notifications to the browser.

Send Notification

  • Open Project and go to Project settings > Cloud Messaging copy Server Key from Project Credentials
  • Copy newly generated Instance ID Token.
  • Use below cURL
curl -X POST -H "Authorization: key=" -H "Content-Type: application/json" -d '{
  "notification": {
    "title": "Portugal vs. Denmark",
    "body": "5 to 1",
    "icon": "firebase-logo.png",
    "click_action": "http://localhost:8081"
  },
  "to": ""
}' "https://fcm.googleapis.com/fcm/send"
  • If Browser Tab is in Foreground then Received JSON Message will be shown else Browser Notification will be shown for background.

Troubleshoot

If notifications permission is not requested, check network debugger. Firebase Cloud Messages Mock application required a web App

  • Uncaught FirebaseError: Messaging: Missing App configuration value: “appId” (messaging/missing-app-config-values).

Follow My Blog

Get new content delivered directly to your inbox.