Firebase Cloud Messaging Quickstart

The Firebase Cloud Messaging quickstart demonstrates how to:

• Request permission to send app notifications to the user.
• Receive FCM messages using the Firebase Cloud Messaging JavaScript SDK.

Introduction

• Read more about Firebase Cloud Messaging

Getting Started

1. Set up your project on the Firebase Console.
2. Paste initialization snippet into index.html with the one generated from the Firebase Console Overview > Add Firebase to your web app. See TODO in index.html.
3. Run the app
   • Install the Firebase CLI
   • Use command firebase serve -p 8081 to serve app locally.
   • Open http://localhost:8081 in your browser.
4. Click REQUEST PERMISSION button to request permission for the app to send notifications to the browser.
5. Use the generated Instance ID token to send an HTTP request to FCM that delivers the message to the web application, inserting appropriate values for YOUR-SERVER-KEY and YOUR-IID-TOKEN.

HTTP

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

{
  "notification": {
    "title": "Portugal vs. Denmark",
    "body": "5 to 1",
    "icon": "firebase-icon.png",
    "click_action": "http://localhost:8081"
  },
  "to": "YOUR-IID-TOKEN"
}

cURL

curl -X POST -H "Authorization: key=AIzaSyAoOtjFzms1eDHB6fypsg6nGBL7dm_AMRU" -H "Content-Type: application/json" -d '{
   "notification" : {
      "body" : "great match!",
      "title" : "Portugal vs. Denmark",
      "icon" : "myicon",
      "click_action": "http://localhost:8081"
    },
    "data" : {
      "Nick" : "Mario",
      "Room" : "PortugalVSDenmark"
    },
  "to": "cpMyMjku64I:APA91bHaRAk7ECfbZTd-c6c2kWVLcBhI9btgxRuaXeZ1HdoxK7fQZ5YyWqMYF-RLMOwvK8qX9mRDjAM-B0dnd0wr9U955JwlLpMK2liqEpfK0iX3qG9tzbwZL1KUOsUeu6bnGokTBMBc"
}' "https://fcm.googleapis.com/fcm/send"

• When the app has the browser focus , the received message is handled through the onMessage callback in index.html. When the app does not have browser focus then the setBackgroundMessageHandler callback in firebase-messaging-sw.js is where the received message is handled.

App focus

The browser gives your app focus when both:

1. Your app is running in the currently selected browser tab.
2. The browser tab's window currently has focus, as defined by the operating system.

Support

https://firebase.google.com/support/

License

© Google, 2016. Licensed under an Apache-2 license.