Lascia un commento Scritto da Giovanni Sacheli 25/10/2017 . Ultimo aggiornamento 31/10/2017 .
Il titolo inganna, in realtà questa guida è adatta a tutti i siti web e CMS. Ho scritto “WordPress” perché avevo ancora dei caratteri liberi nella tag title (deformazione professionale) e perché comunque WP è il più diffuso. Quindi non temere non perderai tempo a leggere questa guida.
Chi naviga questo sito da mobile avrà notato che da novembre 2016 appare questa notifica:
Il pulsante “aggiungi” installa sul proprio smartphone il sito web come se fosse una vera e propria app. Questa app potrà essere rimossa come qualsiasi altra app dal menu di gestione delle applicazioni del telefono.
Quando presento le PWA ai clienti, la domanda più frequente che sento è:
Perché dovrei installare una app che non è nulla di diverso dal navigare il sito via classico browser?
Perché a differenza di quanto possa sembrare, qualcosa cambia. Ci sono infatti svariati vantaggi nel rendere il tuo sito una Progressive Web App.
Installare la Progressive Web App nel telefono permette:
Navigazione quasi istantanea: le PWA possono usare un sistema di cache locale per velocizzare drasticamente la navigazione
Navigazione offline: salvando le pagine in cache queste saranno navigabili anche offline.
Massima usabilità ed esperienza utente: le Progressive Web App possono essere impostate per occupare tutto lo schermo, senza barra degli indirizzi come sui browser, tutto a vantaggio dell’usabilità del sito web.
Personalizzazione: è possibile personalizzare il colore della barra degli indirizzi. Inoltre una volta installata, l’app verrà avviata con uno splash screen personalizzabile
Inoltre pensa a questa cosa, quante volte una persona guarda il telefono in un giorno? Quante volte ti sei messo a scorrere le app anche se non avevi nulla di particolare da fare? Vedere spesso l’icona del tuo sito aiuta l’utente a ricordasi di visitarlo, è come se facessi una impression gratuita nei telefoni dei tuoi lettori ad ogni apertura del cassetto delle app.
Nel momento in cui premi il bottone aggiungi, la PWA crea un pacchetto di file e lo installa nel tuo telefono. In questo pacchetto è possibile inserire file per la cache locale: pagine HTML, file CSS e JS, immagini e tutto quello che serve al rendering di una pagina web.
Quando lancerai l’app dal tuo telefono il browser interno alla app non scaricherà i file che hai già in cache. Si hai capito bene, se metti in cache i file critici il caricamento della pagina sarà praticamente istantaneo.
Continuando quanto detto nel paragrafo precedente, possiamo giungere alla conclusione che inserendo in cache le pagine più importanti del sito e le loro dipendenze (CSS, JS e immagini), quelle pagine saranno navigabili anche senza rete, offline. Fantastico.
In tutti i browser mobile appare la barra degli indirizzi del sito che si sta navigando. Una Progressive Web App invece può essere impostata per non mostrare la barra ed occupare quindi uno spazio maggiore, full-screen, più bella da vedere e più comoda da usare.
Come vedrai tra poche righe è possibile personalizzare il colore di sfondo della barra degli indirizzi e migliorare il feeling visivo del sito web.
Ora che ti ho elencato tutti questi vantaggi, sei ancora indeciso se creare la tua prima PWA? Onestamente non ci ho pensato due volte. Per creare la tua Progressive Web App continua a leggere.
Il processo per creare una Progressive Web App è banale, per procedere basta avere il protocollo HTTPS sul proprio sito web e creare due file nel tuo sito: il file Manifest – manifest.json, ed il Service Worker – sw.js.
start_url: inserisci l’URL che verrà caricato quando viene lanciata l’app. E’ qui che devi usare il parametro UTM se vuoi tracciare le visite con Google Analytics.
display: inserisci standalone, fullscreen o browser per modificare lo spazio occupato dalla app. I primi due nascondono la barra degli indirizzi dall’app.
lang: inserisci il linguaggio della tua app.
Ora devi creare l’ultima dipendenza per la tua Progressive Web App: il Service Worker. Il Service Worker è uno script in JavaScript che gestisce il comportamento dei file in cache: quali file devono essere salvati localmente nel device.
Crea con un editor di testo il file sw.js e copia il contenuto dell’esempio. Le uniche righe che devi modificare vanno da riga 13 a riga 20 dove si elencano tutti i file da inserire in cache (puoi aggiungerne altre o rimuoverle se preferisci)
Prima di testare la Progressive Web App cancella la cache (non usare la navigazione da incognito). Ora naviga il sito web via smartphone e vedi se esce la notifica per aggiungere alla home.
Fare una PWA implica anche avere un sito rapido per rispondere alle necessità di usabilità degli utenti da mobile. Quindi, in un modo o nell’altro, dovrai lavorare molto per ottimizzare i tempi di caricamento portandoli sotto una certa soglia. A questo punto dovresti avere tutto: le idee chiare, i concetti di base ed i file necessari. Fammi sapere cosa sei riuscito a fare nei commenti!