Bonjour,

Je viens vers vous pour un sujet un peu particulier, le fonctionnement des push notifications. J'espère trouver ici des connaisseurs. J'essaye à l'heure actuelle de les utiliser sur mon serveur local qui tourne avec nodeJS. J'utilise WORKBOX pour le fonctionnement des services workers.

server.js :

var express = require('express');
var app = express();
var https = require('https');
var fs = require('fs');
var webPush = require('web-push');
var bodyParser = require('body-parser');

https.createServer({
  key: fs.readFileSync('key_localhost2.pem'),
  cert: fs.readFileSync('cert_localhost2.pem'),
  passphrase: 'localhost',
}, app).listen(8080);


//*****************************************************************
//-------------------------- TEMPLATES --------------------------
//*****************************************************************
//moteur de modèles ou de templates
app.set('view engine', 'ejs');


//*****************************************************************
//-------------------------- MIDDLEWARE --------------------------
//*****************************************************************

app
  .use('/static', express.static(__dirname + '/public'))
  .use(express.static(__dirname + '/public/js'))
  .use(bodyParser.json());

//*****************************************************************
//--------------------------- ROUTES ------------------------------
//*****************************************************************

app.get('/', function (request, response) {
  response.render('./pages/index.ejs');
  //response.render('index.html');
});

var publicVapidKey = "BKwLqQWMQpLfSNGb-VXCsAPE1H5o7Oh3VxDiEIqWWOm2OdAoFPqr9K9WI7dKKtjYYHLTKm7tjJO04091pDXZiJs"
var privateVapidKey = "483sZs2cZUxSQegGKKOZXLl_b7_ywBF_qJO77gXFsHE"
//console.log('Publics keys : ' + vapidKeys.publicKey)
//console.log('Private key : ' + vapidKeys.privateKey)



webPush.setVapidDetails(
  'mailto:localhost:8080',
  publicVapidKey,
  privateVapidKey
);

//JE NE SAIS PAS ENCORE COMMENT CA MARCHE
  var pushSubscription = req.body;

  var payload = 'Here is a payload!';

  webPush.sendNotification(
    pushSubscription,
    payload
  ).catch(function(err){
    console.log(err);
  });

index.js :

//*********************************************************
    // Start SW, permission notification, register subscribe
    //*********************************************************
    if ('serviceWorker' in navigator) {

        //+++++++++++++++++++++++++++++
        //Register Service worker
        navigator.serviceWorker.register('/static/js/sw.js')
            .then(function (swRegistration) {

                //Ask to notification permission
                displayNotification();

                var publicVapidKey = "BKwLqQWMQpLfSNGb-VXCsAPE1H5o7Oh3VxDiEIqWWOm2OdAoFPqr9K9WI7dKKtjYYHLTKm7tjJO04091pDXZiJs";
                var applicationServerKey = urlBase64ToUint8Array(publicVapidKey);

                //Subscribe to push notifiaction
                swRegistration.pushManager.subscribe({
                    userVisibleOnly: true,
                    applicationServerKey: applicationServerKey
                })
                    .then(function (subscription) {
                        console.log('User is subscribed:', subscription);
                        updateSubscriptionOnServer(subscription);
                        isSubscribed = true;
                        updateBtn();
                    })
                    .catch(function (err) {
                        if (Notification.permission === 'denied') {
                            console.warn('Permission for notifications was denied');
                        } else {
                            console.error('Failed to subscribe the user: ', err);
                        }
                        updateBtn();
                    });
            })
    }


    //*********************************************************
    // Function ask to notification permission
    //*********************************************************
    function displayNotification() {

        if (Notification.permission === 'granted') {
            //Mean, the notification is accepted.
            console.log('Notification accepted...');

        } else if (Notification.permission === "blocked" || Notification.permission === "denied") {
            // the user has previously denied notification. Can't reprompt.
            console.log('Notification blocked...');

        } else {
            // show a prompt to the user
            console.log('Prompt to accept notification');

            Notification.requestPermission();
        }
    }


 //*********************************************************
    // Transform public Vapid key
    //*********************************************************
    function urlBase64ToUint8Array(base64String) {
        const padding = '='.repeat((4 - base64String.length % 4) % 4);
        const base64 = (base64String + padding)
            .replace(/\-/g, '+')
            .replace(/_/g, '/');

        const rawData = window.atob(base64);
        const outputArray = new Uint8Array(rawData.length);

        for (let i = 0; i < rawData.length; ++i) {
            outputArray[i] = rawData.charCodeAt(i);
        }
        return outputArray;
    }

sw.js :

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js');

if (workbox) {
  console.log(`Yay! Workbox is loaded 🎉`);
} else {
  console.log(`Boo! Workbox didn't load 😬`);
}

Si je comprends bien le fonctionnement de mon fichier index.js, je demande si le navigateur possède un service worker. Si oui, je le lance à l'aide de la commande navigator.serive.register('/static/js/sw.js'). Ensuite, je regarde si l'utilisateur accepte ou non de recevoir des notification. Pour terminer, j'effectue une subscription auprès du navigateur pour mettre en place les push notification.

Malheureusement, quand je me connecte à mon localhost j'ai une erreur qui s'affiche dans mon terminal :

Question 1 :

Comment marche la fonction updateSubscriptinOnServe ? Je pensais que la fonction  permettait d'envoyer les informations au serveur.

Question 2 :

Comment est-ce que je récupère les informations de la subscription de mon client côté serveur ?

Question 3 :

Une fois les informations de la suscription reçues, dois-je les sauvegarder dans une base de donnée pour envoyer des notifications ultérieurement ?