# Send Web Notification

# Send Web notification using GCM ( Google Cloud Messaging System)

Such Example is knowing wide spreading among PWAs (Progressive Web Applications) and in this example we're going to send a simple Backend like notification using NodeJS and ES6

  • Install Node-GCM Module : `npm install node-gcm`
  • Install Socket.io : `npm install socket.io`
  • Create a GCM Enabled application using [Google Console.](https://console.cloud.google.com/)
  • Grabe your GCM Application Id (we will need it later on)
  • Grabe your GCM Application Secret code.
  • Open Your favorite code editor and add the following code :
     'use strict';
    
     const express = require('express');
     const app = express();
     const gcm = require('node-gcm');
     app.io = require('socket.io')();
     
     // [*] Configuring our GCM Channel.
     const sender = new gcm.Sender('Project Secret');
     const regTokens = [];
     let message = new gcm.Message({
         data: {
             key1: 'msg1'
         }
     });
     
     // [*] Configuring our static files.
     app.use(express.static('public/'));
     
     // [*] Configuring Routes.
     app.get('/', (req, res) => {
         res.sendFile(__dirname + '/public/index.html');
     });
     
     // [*] Configuring our Socket Connection.
     app.io.on('connection', socket => {
         console.log('we have a new connection ...');
         socket.on('new_user', (reg_id) => {
             // [*] Adding our user notification registration token to our list typically hided in a secret place.
             if (regTokens.indexOf(reg_id) === -1) {
                 regTokens.push(reg_id);
     
                 // [*] Sending our push messages
                 sender.send(message, {
                     registrationTokens: regTokens
                 }, (err, response) => {
                     if (err) console.error('err', err);
                     else console.log(response);
                 });
             }
         })
     });
      
     module.exports = app
    
    
  • PS : I'm using here a special hack in order to make Socket.io works with Express because simply it doesn't work outside of the box.

    Now Create a .json file and name it : Manifest.json, open it and past the following :

    {
        "name": "Application Name",
        "gcm_sender_id": "GCM Project ID"
    }
    
    

    Close it and save in your application ROOT directory.

    PS : the Manifest.json file needs to be in root directory or it won't work.

    In the code above I'm doing the following :

    1. I seted up and sent a normal index.html page that will use socket.io also.
    2. I'm listening on a connection event fired from the front-end aka my index.html page (it will be fired once a new client successfully connected to our pre-defined link)
    3. I'm sending a special token know's as the registration token from my index.html via socket.io new_user event, such token will be our user unique passcode and each code is generated usually from a supporting browser for the Web notification API (read more here.
    4. I'm simply using the node-gcm module to send my notification which will be handled and shown later on using Service Workers`.

    This is from NodeJS point of view. in other examples I will show how we can send custom data, icons ..etc in our push message.

    PS : you can find the full working demo over here.