Подключение Web Push

В index.html подключить это ниже, чем предыдущий файл

  <script src="index.js"></script>
  <script src="https://www.gstatic.com/firebasejs/3.5.1/firebase.js"></script>
  <script>
  var config = {
    apiKey: "AIzaSyBR2cJ_zaUhNCOhb9pIbLDNqK7CsDfk04U",
    authDomain: "test-b36d2.firebaseapp.com",
    databaseURL: "https://test-b36d2.firebaseio.com",
    projectId: "test-b36d2",
    storageBucket: "test-b36d2.appspot.com",
    messagingSenderId: "69682141059"
  };
  firebase.initializeApp(config);

  </script>

Подключить этот JavaScript файл

  <script src="//messaging-public.realtime.co/js/2.1.0/ortc.js"></script>

Создать файл index.js. поместить это содержимое, и подключить его в index.html ниже, чем подключен jQuery

  var channel = generateUserChannel();

  $(document).ready(function() {

    var RealtimeAppKey = "jk9j7R";

    var webPushManager = new WebPushManager();

    console.log(webPushManager)
    

    webPushManager.start(function(error, registrationId){
      if (error) {
        console.log(registrationId);
        console.log(error);
        if(error.message) {
          console.log(error.message);
        } else {
          console.log("Ooops! It seems this browser doesn't support Web Push Notifications :(");
        }
      };
     
      client = RealtimeMessaging.createClient();
      console.log(client);
      client.setClusterUrl('https://ortc-developers.realtime.co/server/ssl/2.1/');
    
      client.onConnected = function (theClient) {

        theClient.subscribeWithNotifications(channel, true, registrationId,
            function (theClient, channel, msg) {
              webPushManager.forceNotification(msg);
            });
      };
    
      // Establish the connection
      client.connect(RealtimeAppKey, 'JustAnyRandomToken');  
    });    
});

function generateUserChannel(){
  localStorage.removeItem("channel");
  userChannel = localStorage.getItem("channel");
  if (userChannel == null || userChannel == "null"){ 
      userChannel = 'channel-98dc87e2-f424-website-4984-3bbd-b4a6aeeb0aa0';
      localStorage.setItem("channel", userChannel);
      channel = localStorage.getItem("channel", userChannel);
      console.log(channel)
  }
  console.log(userChannel);
  return userChannel;
}

Создать файл manifest.json, и положить его рядом с index.html

{
  "name": "Realtime Web Push",
  "short_name": "Web Push",
  "gcm_sender_id": "103953800507"
}

Создать файл service-worker.js и положить его рядом с index,html

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': '69682141059'
});

const fb_messaging = firebase.messaging();

var messagesBuffer = {};

var countKeys = function (dic) {
  var count = 0;
  for (var i in dic) {
      count++;
  }
  return count;
};

var parseRealtimeMessage = function (message) {
  var regexPattern = /^(\w[^_]*)_{1}(\d*)-{1}(\d*)_{1}([\s\S.]*)$/;
  var match = regexPattern.exec(message);

  var messageId = null;
  var messageCurrentPart = 1;
  var messageTotalPart = 1;
  var lastPart = false;

  if (match && match.length > 0) {
      if (match[1]) {
          messageId = match[1];
      }
      if (match[2]) {
          messageCurrentPart = match[2];
      }
      if (match[3]) {
          messageTotalPart = match[3];
      }
      if (match[4]) {
          message = match[4];
      }
  }

  if (messageId) {
      if (!messagesBuffer[messageId]) {
          messagesBuffer[messageId] = {};
      }
      messagesBuffer[messageId][messageCurrentPart] = message;
      if (countKeys(messagesBuffer[messageId]) == messageTotalPart) {
          lastPart = true;
      }
  }
  else {
      lastPart = true;
  }

  if (lastPart) {
      if (messageId) {
          message = "";

          for (var i = 1; i <= messageTotalPart; i++) {
              message += messagesBuffer[messageId][i];
              delete messagesBuffer[messageId][i];
          }

          delete messagesBuffer[messageId];
      }

      return message;
  } else {
    return null;
  } 
}

// Shows a notification
function showNotification(message) { 
  const notificationTitle = 'Any title';

  const notificationOptions = {
    body: message,
    icon: '/realtime-logo.jpg',
    data: {
      click_url: '/index.html'          
    },
    tag: Date.now()
  };

  return self.registration.showNotification(notificationTitle,
      notificationOptions);
}

fb_messaging.setBackgroundMessageHandler(function(payload) {
  console.log('Received background message ', payload);

  if(payload.data && payload.data.M) {
    var message = parseRealtimeMessage(payload.data.M);
    return showNotification(message);
  }
});

self.addEventListener('message', function (evt) {
   evt.waitUntil(showNotification(evt.data));
});

self.addEventListener('notificationclick', function(event) {
  event.notification.close();

  if(event.notification.data && event.notification.data.click_url) {
    var click_url = event.notification.data.click_url;

    event.waitUntil(clients.matchAll({
      type: "window"
    }).then(function(clientList) {
      for (var i = 0; i < clientList.length; i++) {
        var client = clientList[i];
        if (client.url == click_url && 'focus' in client)
          return client.focus();
      }
      if (clients.openWindow) {
        var url = click_url;    
        return clients.openWindow(url);
      }     
        
    }));
  }
});