Lancia notifiche push dal tuo sito

In molti sono convinti che Internet sia semplicemente un grande raccoglitore di brochure di aziende, eppure esistono anche applicativi di grande complessità che usiamo quotidianamente. Quello che vede l’utente finale è semplicemente una pagina web ma noi sappiamo che è molto di più.

Al giorno d’oggi le cose sono molto cambiate dai tempi di tabelle e stili applicati direttamente nell’elemento HTML e questo grazie agli avanzamenti che abbiamo vissuto negli ultimi anni soprattutto grazie a JavaScript possiamo eseguire dei veri e propri applicazioni mobile e desktop come Atom o GitKraken.

I linguaggi di programmazione che possiamo usare per lavorare sui file presenti nel nostro sistema sono linguaggi web, al tempo stesso lavorano a livello macchina che è molto più basso rispetto a quello del browser e che gli consente di interagire con i file presenti nel sistema.

Sempre per elencare le funzionalità che possiamo avere al giorno d’oggi voglio ricordare l’esistenza di siti web che permettono di caricare foto e altri file multimediali e di modificarle online, praticamente accedono alle API del tuo filesystem per navigare all’interno delle cartelle e ottenere il file. 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 come inviare delle notifiche push su qualsiasi dispositivo stia visitando la tua pagina web sia questo desktop, tablet o smartphone.

Non preoccuparti se il termine notifiche push ti sembra troppo generico, 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 il sistema operativo che sta usando il nostro utente.

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 privato 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:

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 ci accingiamo a fare un semplice esercizio, stiamo sempre approfondendo la conoscenza di un nuovo linguaggio e delle sue funzionalità. All’interno dell’esempio che trovi su CodePen è presente il codice JavaScript che andremo a presentare in questo articolo. Per rendere l’apprendimento più digestibile ti presenterò questo codice un passo alla volta, ma terminata la lettura 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à abbastanza giovani è assicurarsi che il browser sia in grado di gestirle. In molti casi potresti preferire l’uso di una libreria completa come Modernizr che, come spiegato meglio in questo articolo, permette di ottenere molte informazioni sul browser che sta consultanto le nostre pagine e permette anche di compiere delle scelte a riguardo.

Però l’esercizio che stiamo facendo è focalizzato sull’uso di due singole feature  (Notification e Page Visibility API) 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 al posto di utilizzare l’intera libreria Modernizr o anche una sua configurazione preferisco mostrarti come si fanno dei controlli direttamente nel codice di esempio.

// Veriabili di controllo
var hidden, visibilityChange; 

// Controllo tipo di evento
if (typeof document.hidden !== "undefined") { //Per tutti i browser moderni
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") { // Firefox fino v17
  hidden = "mozHidden";
  visibilityChange = "mozvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") { // Chrome fino v32, Android fino v4.4, Blackberry fino v10
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}

Come spesso accade, ogni browser decide indipendentemente come implementare una specifica funzionalità e per questo motivo sono costretto a creare questa condizione else if. Quello che sto facendo è controllare che nel browser che sta eseguendo il codice JavaScript siano presenti le proprietà specifiche per browser che mi consentono di impostare i valori delle variabili hidden e visibilityChange che utilizzeremo più avanti all’interno dello script.

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.

if (typeof document.addEventListener === "undefined" || typeof document.hidden === "undefined") {
    // Lascio un messaggio se il browser non supporta le Page Visibility API
    alert("Hai bisogno di un browser moderno per utilizzare le Page Visibility API.");
} else {
    // Se tutto va bene mi metto in ascolto dell'evento visibilityChange
    document.addEventListener(visibilityChange, handleVisibilityChange, false);
}

In questo blocco di codice sto facendo due controlli distinti:

• typeof document.addEventListener === "undefined" – con questo primo controllo sto chiedendo al browser se non è in grado di aggiungere un evento alla sua esecuzione
• typeof document.hidden === "undefined" – mentre con questo controllo che il browser sia in grado di gestire le PAge Visibility

Nel caso in cui uno dei due controlli sia positivo, allora mostriamo un semplice messaggio al visitatore per invogliarlo a utilizzare un browser moderno perché il codice che andremo a sviluppare successivamente non potrà assolutamente funzionare.

Però se il browser che sta utilizzando la pagina è in grado di gestire entrambe le funzionalità allora andremo a utilizzare addEventListener() per collegare la funzione handleVisibilityChange() (che realizzeremo a breve) al nome dell’evento corretto che abbiamo salvato nella variabile visibilityChange.

function handleVisibilityChange() {
  if (document.hidden) {
    // Messaggio se la pagina è nascosta
    notify('Sei andato via! :\('); 
  } else {
    // Messaggio se la pagina è visibile
    notify('Grande! Sei tornato :\)'); 
  }
}

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.

Come puoi notare tu stesso questa funzione utilizza notify() per preparare il messaggio che verrà visualizzato all’interno della notifica. Nel blocco di codice che segue sono presenti alcune porzioni di codice che ci permettono di scoprire ancora più nel dettaglio se il browser che sta visualizzando la pagina è in grado di gestire le notifiche oppure no perché è sempre meglio spendere un paio di righe di codice in più per assicurarci che il nostro codice funzioni correttamente piuttosto che dover tornare e sistemare nuovamente il codice.

function notify(message) {
    // Controlliamo se il browser supporta le notifiche
    if (!("Notification" in window)) {
        alert("Questo browser non supporta le Notification API, usa un browser moderno");
    }

    // Controlliamo se l'utente accetta le nostre notifiche
    else if (Notification.permission === "granted") {
        // Se è tutto a posto, creiamo una notifica
        var notification = new Notification(message);
    }

    // Se l'utente non ha accettato le notifiche, chiediamo il permesso
    else if (Notification.permission !== 'denied') {
        Notification.requestPermission(function (permission) {
            // Se è tutto a posto, creiamo una notifica
            if (permission === "granted") {
                var notification = new Notification(message);
            }
        });
    }
}

Oltre primo controllo che facciamo e che ci permette di scoprire se le notifiche possono essere create correttamente all’interno del browser che sta visualizzando la pagina, con Notification.permission stiamo facendo un controllo che ritengo ancora più importante perché stiamo chiedendo al browser se l’utente ha scelto di visualizzare o meno le notifiche provenienti dal nostro sito web.

Fare questo tipo di controlli è molto importante perché distinguerà la nostra applicazione dal classico SPAM.

Una volta che ci siamo accertati che tutto sia corretto e funzionante possiamo creare la nostra notifica con l’istruzione new Notification() al quale inseriamo il parametro message che viene passato alla funzione notify().

Se sei come il sottoscritto ed hai pensato che mandare un semplice messaggio sia un po’ limitante devi sapere che le Notification API hanno una lista di proprietà molto ampia che ci permettono di aggiungere immagini, icone, bottoni e molte altre caratteristiche interessanti che puoi trovare documentate all’interno delle specifiche.

Se sei arrivato a questo punto questo dimostra che 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 una 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?