Cosa ho realizzato
In questo progetto ho realizzato in NodeSJ un server web basilare, che fornisce su richiesta file statici, risponde a due endpoint per la sottoscrizione e la rimozione alle notifiche push.
Notifiche generate grazie ad un bot Telegram.
A differenza degli altri progetti simili che si trovano in questo progetto ogni notifica al click riporta ad un url dedicato, mandato al client tramite parametro.
Perché
Come detto prima non ce ne erano di simili in giro e poi é un progetto da cosí poche righe di codice che era piú facile scriverlo che modificare uno giá fatto.
Richiesto da un amico che aveva bisogno di comunicare con la sua community e reindirizzare i suoi spettatori sulle varie piattaforme.
Come funziona
Tutto si basa su Express che ci permette di tirare su un web server.
Staticamente serviamo una directory statica dove andiamo a mettere tutte le risorse del sito, tra cui i JS per la registrazione della ricezione dell anotifica.
Avviamo la gestione del TelegramBot per creare e mandare le notifiche che vogliamo.
Per gestire le iscrizioni uso un Database in memoria, dato che chi usa questo server non ha molti utenti dai avvisare.
Per collegare il bot alla funzione di invio mi appoggio al sistema di eventi di Node.
Come visto é semplice, infatti non sono parecchie righe.
Di seguito evidenzieró i pezzi di codice piú interessanti.
Punti chiave
Per prima cosa il service worker contenuto nel file worker.js che é il vero responsabile della gestione della notifica che arriva.
self.addEventListener("push", function (e) {
const data = e.data.json();
self.dove = data.url;
self.registration.showNotification(data.title, {
body: data.body,
icon: "/logo.png",
});
});
self.addEventListener("notificationclick", (event) => {
const clickedNotification = event.notification;
clickedNotification.close();
clients.openWindow(self.dove);
});
Il mio worker ascolta due eventi: l'arrivo della notifica e il click dell anotifica.
Nel primo gestisco l'arrivo dell anotifica e la visualizzo, nel secondo apro una finestra del browser di sistema all'url passato.
const payload = JSON.stringify({
title: dati.titolo,
body: dati.corpo,
icon: "logo.png",
url: dati.url,
});
webpush.sendNotification(all[user], payload).catch(console.log);
Appunto passo nel payload della notifica anche l'url dove reindirizzare con il click.
Per chiudere questa parte lascio la lista dei comandi del bot telegram
COMANDI:
/list => lista dei comanti 😂
/ping => controllare che il servizio é sempre attivo
/reset => resetta la notifica
/titolo testo => imposta il titolo della prossima notifica
/corpo testo => imposta il corpo della prossima notifica
/url testo => imposta l'url della prossima notifica
/controllo => Mostra titolo e corpo dell anotifica
/invia => Invia la notifica preparata
Codice
Essendo una cosa per un amico, che gradiva fosse una cosa open source, ho creato un (repository github)[https://github.com/ndrvnt/jawps] per buttarcelo dentro.
Nel README.md troverete tutti i passaggi per configurarlo.
Spero serva a qualcuno.
Pubblicato