Using FCM (Firebase Cloud Message) for push notification

Create your project at https://console.firebase.google.com
Register
Add firebase to website

= javascript_include_tag "https://www.gstatic.com/firebasejs/5.9.1/firebase.js"
= javascript_include_tag "https://www.gstatic.com/firebasejs/5.9.1/firebase-app.js"
= javascript_include_tag "https://www.gstatic.com/firebasejs/5.9.1/firebase-messaging.js"

javascript:
  var config = {
    apiKey: "AIzaSyArddRenApWUiRzXO1BaF5jq0cweA1PGiU",
    authDomain: "scry-e2646.firebaseapp.com",
    databaseURL: "https://scry-e2646.firebaseio.com",
    projectId: "scry-e2646",
    storageBucket: "scry-e2646.appspot.com",
    messagingSenderId: "552404090729" //"552404090729"
  };
  firebase.initializeApp(config);

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

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

firebase.initializeApp({
  '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,
      notificationOptions);
});

Generate key pair
- Access https://console.firebase.google.com/project/_/settings/cloudmessaging/
- Scroll to the Web configuration section
- Generate 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.usePublicVapidKey('GENERATED_KEY_PAIR')

  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

Get browser's token
console

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": "https://google.com"}, "to": "BROWSER_TOKEN"}' "https://fcm.googleapis.com/fcm/send"

Check https://firebase.google.com/docs/cloud-messaging/ for more information