Lancia Notifiche Push dal tuo Sito

Il web si sta evolvendo e con esso anche le funzionalità che ci propone. Fino ad oggi sembrava che le notifiche push fossero una funzionalità dedicata alle applicazioni native, ma in questo articolo scopriremo che non è così.

In molti sono convinti che Internet sia semplicemente un grande raccoglitore di brochure di aziende, esistono applicativi di grande complessità, ma quello che vede l’utente finale è semplicemente una pagina web. Al giorno d’oggi le cose sono molto cambiate visto che grazie a tecnologie web siamo in grado di eseguire dei veri e propri programmi come Grunt o WordMove.

I linguaggi utilizzati per lavorare sui file presenti nel nostro sistema sono linguaggi web, ma al tempo stesso lavorano a livello macchina che è molto più basso rispetto a quello del browser.

Allo stesso modo esistono siti web che ti permettono di caricare foto e altri file multimediali, praticamente accedono alle API del tuo filesystem per navigare all’interno delle cartelle. Insomma quello che sto cercando di spiegare è che già oggi con le tecnologie del web possiamo fare molte operazioni all’interno dei sistemi operativi; e con quanto ti spiegherò in questo articolo scoprirai addirittura come inviare delle notifiche push su qualsiasi dispositivo stia visitando la tua pagina web.

Se notifiche push ti sembra un termine troppo generico non ti preoccupare, anche per il sottoscritto è stato difficile comprendere il potenziale di questa tecnica ma è tutto vero; grazie alle Notifications API siamo in grado di inviare delle notifiche sfruttando direttamente il sistema operativo che stiamo usando.

Questo tipo di notifiche sono molto interessanti per diverse tipologie di applicazioni web. Potresti creare una chat online, come Slack, e sfruttare le notifiche per avvertire l’utente che ha ricevuto un messaggio provato o che è stato notificato; oppure potresti sfruttarle all’interno della tua applicazione ToDo List, come Asana, per ricordare all’utente che si sta avvicinando la scadenza di un determinato task.

Qualsiasi sia la funzionalità che potrà creare la tua fantasia, con le Notifications API sarai in grado di realizzarla. Ovviamente per diventare padroni e sapere come gestire questa tecnologia bisogna iniziare con dei piccoli esperimenti.

Proprio per questo motivo l’esercizio che svolgeremo quest’oggi è veramente semplice e ci permetterà di sporcarci le mani anche con un altro componente delle nuove Web API: le Page Visibility API. Il loro compito è quello di restare in ascolto e comprendere quando l’utente sta prestando la sua attenzione su una pagina diversa. Grazie a questa funzionalità è possibile creare dei video player che mettono in pausa la riproduzione quando l’utente cambia tab, oppure costringere le persone ad aspettare un periodo di tempo preciso sulle proprie pagine prima di condividere altro materiale (come succede in molti siti per la condivisione dei file).

La cosa più bella di tutte è che nonostante il fatto che si trattano di API molto giovani la loro compatibilità è molto alta con i browser moderni in circolazione:

page-visibility-notifications-compatibilita

Gli unici browser che non vedono di buon occhio le Notifications API sono soltanto quelli di casa Microsoft, per tutti gli altri la compadibilità è nativa o raggiungibile in pochi passi.

Ed è proprio per questo motivo che ho deciso di creare una piccola applicazione web che, dopo che gli avremo garantito l’accesso alle notifiche, ci avvertirà quando la pagina acquisterà o perderà il focus. Anche se l’esercizio che stiamo per svolgere sembra fin troppo semplice, ricorda che il trigger che lancia le nostre notifiche è la stessa API che permette di fermare la riproduzione di un video ;)

Un procedimento passo passo

Anche se semplice stiamo sempre approfondendo la conoscenza di un nuovo linguaggio e delle sue funzionalità. All’interno dell’esempio che trovi su CodePen trovi un file JavaScript all’interno del quale è contenuto tutto il codice che andremo a presentare in questo articolo. Per rendere l’apprendimento più digestibile ti presenterò questo codice pezzo pezzo, ma una volta terminata la lettura di questo articolo ti consiglio di andare a vedere il file completo e osservarlo all’opera.

La prima cosa che bisogna fare quando andiamo a lavorare con funzionalità alquanto giovani è assicurarsi che il browser sia in grado di gestirle. In diverse occasioni è utile utilizzare una libreria di nome Modernizr che, come spiegato meglio in questo articolo, permette di ottenere molte informazioni sul browser che sta consultanto le nostre pagine e ci permette anche di compiere delle scelte a riguardo.

Però il codice che utilizzeremo quest’oggi è focalizzato all’utilizzo di due singole feature e come ci insegna la stessa pagina di download di Modernizr, è sempre bene concentrarci su quello di cui abbiamo bisogno se vogliamo mantenere un buon livello di prestazioni. Per questo motivo i controlli che eseguiremo nel codice di esempio che ti presento qua sotto troverai i controlli sul tipo di browser che consulta la nostra pagina e ci permetterà di utilizzare le API adeguate.

Adesso che abbiamo controllato il tipo di browser e che quindi ci siamo preparati a utilizzare dei valori diversi per le nostre variabili, andiamo a controllare l’esistenza della funzione vera e propria, quella che ci permetterà di capire se la finestra è stata nascosta o meno.

Con la creazione della funzione handleVisibilityChange() abbiamo appena realizzato un controllo sul valore di visibilità della pagina stessa. Appena questa perde visibilità utilizzerà il sistema di notifiche del sistema utilizzato (mobile o desktop che sia) per avvertire il nostro utente dell’avvenimento di questa azione, mentre quando torneremo a visualizzare la pagina avremo un messaggio di festeggiamenti.

Adesso che abbiamo queste funzionalità a nostra disposizione non resta altro che scoprire quanto moderno sia il browser che sta visualizzando la nostra pagina e se è in grado di gestire le Page Visibility API.

Per comodità ho inserito entrambi i controlli all’interno del primo if in modo che se entrambe le condizioni risultano falze possiamo lanciare la funzione handleVisibilityChange() e lasciarle controllare lo stato delle nostre pagine.

Adesso che abbiamo eseguito tutti i controlli della situazione e ci siamo assicurati dello stato dei browser non resta altro che creare la funzione notify() utilizzata in handleVisibilityChange() che servirà a visualizzare le varie notifiche.

Con qualche semplice verifica e il codice giusto sei stato in grado di utilizzare due API che ti permettono di interagire meglio con gli utenti delle tue applicazioni. Ovviamente il mio consiglio è quello di approfondire queste soluzioni all’interno delle pagine presenti su MDN, in fin dei conti l’esempio che ti ho presentato in questo articolo è stato forkato da un esempio ben più concreto di quello che abbiamo fatto.

Con la lettura di questa pagina adesso sai come poter utilizzare le Notifications API e le Page Visibility API, nell’articolo di MDN che ti ho appena lasciato vengono utilizzate quest’ultime con quelle dedicate al video per interrompere e riprendere la riproduzione a seconda della visibilità della pagina.

Scommetto peró che dopo tutto questo parlare tu voglia vedere in azione questo codice quindi vai alla demo.

Conclusioni

Ebbene, spero che con la lettura di questo articolo tu abbia compreso veramente in che cosa si sta trasformando il web… Praticamente con gli stessi linguaggi di programmazione che utilizziamo per creare le nostre applicazioni web possiamo entrare sia nel mercato del mobile che in quello desktop.

Proprio come è successo per Brackets o Atom dove HTML, CSS e JavaScript sono i linguaggi con i quali è composta la loro interfaccia e animate le proprie azioni, anche tu sarai in grado di utilizzare queste tecnologie per costruire le tue applicazioni desktop. Non ti sto parlando di fantascienza ma di un framework che prende il nome di Electron e che ci permette di utilizzare le tecnologie che già conosciamo per farne applicazioni desktop completamente funzionanti.

Mi farebbe piacere conoscere la tua opinione sulla soluzione che ti ho appena presentato. Andrea me ne aveva parlato un po’ di tempo fa ma io ancora non ci ho prestato molta attenzione, cosa dici anpprofondiamo questo argomento?

Lascia il tuo Pensiero

9 Responses to “Lancia Notifiche Push dal tuo Sito”

  1. kekkorider

    Molto utile come introduzione, provando il codice al volo mi sono venute tante idee carine che non vedo l’ora di mettere in pratica.
    Electron l’hai provato? Se si, come ti è sembrato?

    Rispondi
    • Andrea Barghigiani

      Onestamente Electron è qualcosa che ha incuriosito molto il sottoscritto. Creare soluzioni ad hoc come dice Daniele sono un problema perché richiedono la realizzazione di maschere per ogni sistema operativo mentre quello che mi piaceva molto di questa soluzione è che potresti creare una versione multipiattaforma partendo da del codice HTML, CSS e JS.

      Per quanto riguarda Atom questo sembra funzionare alla grande ma sono curioso di provarlo anche per altre soluzioni. Magari mi metto a creare una calcolatrice; proprio come si fa le prime volte che si crea qualcosa in JavaScript :D

      Rispondi
  2. Pietro Della Notte

    Ciao Andrea, ciao a tutti.
    Con le Notifications API è possibile inviare notifiche a degli utenti specifici? Oppure a tutti gli utenti che accedono al tuo sito? Mi spiego meglio, la mia necessità è quella di inviare una notifica ad un utente in particolare, parlo di una intranet, lo intercetterei tramite un id oppure tramite l’ip. Devo scegliere cosa inviare e a chi inviarlo e gestire anche l’interazione lato client.
    Credi che si può fare senza passare per i socket?

    Rispondi
    • Daniele Scasciafratte

      Devi lavorare via JavaScript quindi per mandare le notifiche devi avere queste informazioni li quindi sta a te implementare un sistema che riesca a verificare quale utente sta navigando la pagina per eseguire quella notifica.

      Rispondi
      • Pietro Della Notte

        L’ho implementato via Javascript con long polling ajax, ma mi sembra una soluzione poco efficiente, lanciare una richiesta ogni x secondi per controllare se è presente una nuova notifica e visualizzarla al client, in più non sarebbe comunque in real time. Il mio sistema conta circa 300 utenti contemporanei e già il db viene stressato costantemente da altre query di select insert ed update, vorrei realizzarlo in maniera più pulita. Grazie

        Rispondi
  3. Carmine D'Amore

    Ciao a Tutti. Bel articolo. Ha stimolato il mio interesse su quest’argomento che ora voglio approfondire di più. Mentre leggevo l’articolo mi sono venute un paio di idee su come utilizzare le Notification API per i miei progetti. Vi farò sapere come è andata :)

    Rispondi
    • Andrea Barghigiani

      Curiosissimi di scoprire che cosa hai realizzato. Se poi crei un repository su GitHub potremmo anche utilizzarlo come base per un futuro articolo (sempre se non lo vuoi scrivere tu stesso). Insomma come sai da queste parti la condivisione è benvenuta :D

      Rispondi