Navigazione offline, Service Worker e PWA
Nuovo aggiornamento di Etiena.com che permette la navigazione anche in assenza di connessione Internet, grazie all’implementazione del Service Worker. Oltre a ciò, da adesso sarà possibile installare l'applicativo web, sottoforma di PWA, direttamente sul tuo dispositivo che sia smartphone, tablet, laptop, computer o altro.
Se ti stessi chiedendo come una navigazione offline sia fattibile e soprattutto quali vantaggi possa portare, di seguito troverai le risposte a tutte le tue domande.
Naviga anche in aereo
Quante volte ti sarà capitato di andare in aereo, in metro o di attraversare una zona non coperta da WI-FI e quindi non poter navigare in internet? Ti confido un segreto: ho lavorato sodo per permettere a tutti i visitatori di Etiena.com di navigare sul mio sito anche nel bel mezzo del Sahara 🙃.
Come è possibile tutto ciò? Semplicemente grazie ad un un po' di codice JavaScript necessario per creare uno script all'interno del browser chiamato Service Worker. Un Service Worker, di cui ti parlerò più specificamente nel prossimo capitolo, ha tra le sue funzioni proprio quella di permettere la navigazione offline.
A prescindere dalla qualità e presenze della connessione Internet, l’accesso ad applicazioni web leggere e veloci dovrebbe essere una prerogativa per tutti gli utenti, considerando il fatto che la maggior parte dei Paesi in via di sviluppo non ha ancora una connessione ad Internet equivalente ai nostri standard. Ecco che anche i questi casi il Service Worker gioca un ruolo fondamentale rendendo ottimale l'esperienza di navigazione a veramente tutti gli utenti dovunque essi si trovino.
Service Worker
Il Service Worker può essere equiparato a un server proxy, perché di fatto si trova nel bel mezzo dell'applicazione Web, il browser e la rete Internet, quando disponibile [Schema sottostante].
Un Service Worker ha diverse peculiarità e funzionalità tra le quali le più importanti sono:
- Consentire la creazione di esperienze di navigazione offline
- Ricevere le richieste dalla rete
- Eseguire specifiche azioni a seconda della disponibilità della rete
- Aggiornare le risorse che risiedono sul server
- Creare PWA, Progressive Web Application
- Gestire e utilizzare le notifiche push
Il Service Worker viene eseguito dal browser in background ed è completamente slegato dalla pagina web e ciò permette all’utente di utilizzare il sito web mentre il browser interagisce con il Service Worker.
Si installa durante la prima visita dell’utente sull’applicativo web e, qualora la versione del Service Worker venisse modificata, il browser scaricherà e aggiornerà il nuovo Service Worker.
Le fasi di ogni Service Worker, dette ciclo di vita, sono quattro:
- Registrazione: il Service Worker viene scaricato, analizzato ed eseguito dal browser
- Installazione: il Service Worker viene installato all’interno del browser
- Attivazione: il Service Worker verifica la versione installata ed è funzionale per controllare gli eventi originati dal client
- Fetch: il Service Worker è pronto per ricevere e gestire le richieste da parte del client
Importante sottolineare che i Service Worker funzionano solo in presenza di un certificato di sicurezza SSL e protocollo HTTPS, inoltre sono supportati dai maggiori browser.
Attualmente i Service Worker non sono superdiffusi, ma considerando i loro benefici come il tempo di risposta istantaneo delle pagine web su cui vi è installato, la possibilità di gestire la cache del browser in piena autonomia e la navigazione offline (lato client), credo prenderanno piede molto velocemente.
PWA, Progressive Web Application
PWA è l’acronimo di Progressive Web Application. Basata su codice HTML, CSS e Javascript, una Progressive Web Application è molto simile ad un app nativa o programma per il PC, di fatto è possibile installarla direttamente su smartphone, tablet, laptop oppure computer.
L’installazione di una Progressive Web Application non avviene in automatico come per il Service Worker, ma viene consigliata all’utente tramite un messaggio da parte del browser durante la navigazione del sito web. Essendo questa tecnologia abbastanza nuova, non troverai molti applicativi web che possiedono anche la relativa versione PWA.
I vantaggi di una Progressive Web Application sono numerosi, ecco un elenco:
- Navigazione in totale assenza di Internet
- Altissima velocità del caricamento dei dati, per una miglior esperienza dell’utente
- Le PWA utilizzano le stesse tecnologie di un applicativo web pertanto la loro realizzazione richiede meno tempo e soldoni
- Le PWA sono rilevabili tramite i motori di ricerca, che hanno un pubblico molto più ampio rispetto agli store delle applicazioni [E’ comunque possibile distribuire le PWA negli App store]
- L'installazione di una PWA porta a un maggiore coinvolgimento, possibile anche tramite le notifiche push
- A differenza delle App classiche, le PWA si aggiornano in background e automatico permettendo il rilascio di nuove funzionalità all’istante
- Gestione delle notifiche, geolocalizzazione, accesso alla fotocamera e molto altro...