Node.js
Envoyer une notification Web

Envoyer une notification Web à l'aide de GCM (Google Cloud Messaging System)

Un tel exemple consiste à connaître une large diffusion parmi les applications Web progressives ( PWA ) et, dans cet exemple, nous allons envoyer une notification simple du type Backend en utilisant NodeJS et ES6.

1. Installer le module Node-GCM: npm install node-gcm

2. Installez Socket.io: npm install socket.io

3. Créez une application GCM activée à l'aide de Google Console.

4. Grabe votre identifiant d'application GCM (nous en aurons besoin plus tard)

5. Grabe votre code secret d'application GCM.

6. Ouvrez votre éditeur de code préféré et ajoutez le code suivant:

    '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: J'utilise ici un hack spécial pour que Socket.io fonctionne avec Express car il ne fonctionne tout simplement pas en dehors de la boîte.

Maintenant, créez un fichier .json et nommez-le: Manifest.json , ouvrez-le et passez les éléments suivants:

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

Fermez-le et enregistrez-le dans votre répertoire racine d' application.

PS: le fichier Manifest.json doit être dans le répertoire racine ou ne fonctionnera pas.

Dans le code ci-dessus, je fais ce qui suit:

1. J'ai créé et envoyé une page index.html normale qui utilisera également socket.io.
2. J'écoute un événement de connexion déclenché depuis le front-end aka ma page index.html (il sera déclenché une fois qu'un nouveau client sera connecté à notre lien prédéfini)
3. J'envoie un jeton spécial connu comme jeton d'enregistrement à partir de mon index.html via l'événement new.user de socket.io , ce jeton sera notre mot de passe unique pour chaque utilisateur et chaque code sera généré par un navigateur compatible pour l' API de notification Web (en savoir plus ici.
4. J'utilise simplement le module node-gcm pour envoyer ma notification qui sera traitée et montrée plus tard en utilisant Service Workers `.

Ceci est du point de vue de NodeJS . Dans d'autres exemples, je montrerai comment nous pouvons envoyer des données personnalisées, des icônes ..etc dans notre message push.

PS: vous pouvez trouver la démo complète ici.