Using FCM (Firebase Cloud Message) for push notification

Create your project at
Add firebase to website

= javascript_include_tag ""
= javascript_include_tag ""
= javascript_include_tag ""
  var config = {
    apiKey: "AIzaSyArddRenApWUiRzXO1BaF5jq0cweA1PGiU",
    authDomain: "",
    databaseURL: "",
    projectId: "scry-e2646",
    storageBucket: "",
    messagingSenderId: "552404090729" //"552404090729"

Add service worker
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. By default, when you start Firebase, it looks for a file called firebase-messaging-sw.js
- Create public/firebase-messaging-sw.js


  'messagingSenderId': 'YOUR_SENDER_ID'

const messaging = firebase.messaging()
messaging.setBackgroundMessageHandler(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'

  return self.registration.showNotification(notificationTitle,

Generate key pair
- Access
- Scroll to the Web configuration section
- Generate key pair
key pair

Add gcm id
Add this to public/manifest.json (do not change the number)

  "gcm_sender_id": "103953800507"

Script to request permission & browser token

const messaging = firebase.messaging();


  messaging.requestPermission().then(function() {
    console.log('Notification permission granted.');

    messaging.getToken().then(function(currentToken) {
      if (currentToken) {
        console.log('currentToken:', currentToken)
      } else {
        console.log('No Instance ID token available.');
    }).catch(function(err) {
      console.log('An error occurred while retrieving token. ', err);
  }).catch(function(err) {
    console.log('Unable to get permission to notify.', err);

Allow notification
Allow notification

Get browser's token

Send notification
You can only see push notification message if your website is not focus or in background (minimize)

curl -X POST -H "Authorization: key=YOUR_API_KEY" -H "Content-Type: application/json" -d '{"notification": {"title": "My title", "body": "Firebase Cloud Messaging for Web using JavaScript", "icon": "alarm.png", "click_action": ""}, "to": "BROWSER_TOKEN"}' ""

Check for more information