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 =newgcm.Sender('Project Secret');const regTokens =[];let message =newgcm.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 :
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 :
I seted up and sent a normal index.html page that will use socket.io also.
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)
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.(opens new window)
I'm simply using the node-gcm module to send my notification which will be handled and shown later on using Service Workers(opens new window)`.
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.