jQuery Tutorial

Cos'è una Progressive Web App?

Articolo a cura di: Davide Copelli{ing}

Facebook

Le tecnologie web stanno diventando sempre di più "browser oriented" nel senso che grazie ad una rinata vitalità legata al linguaggio JavaScript e simili, il browser si sta pian piano evolvendo da semplice applicazione per la lettura di testo, a un vero e proprio ambiente di sviluppo per nuovi servizi.

E' il caso delle "Progressive Web App" (PWA) che semplificando possono essere pensate come a un classico sito web con l'aggiunta di funzionalità (notifiche, geolocalizzazione etc) che lo rendono simile nell'aspetto e nell'utilizzo ad un'applicazione. Elementi che la rendono appetibile chiaramente per chi accede alle pagine del sito sfruttando il proprio dispositivo mobile.

In linea di massima possiamo dire che gli elementi distintivi di una "Progressive Web App" sono:

  • Schermata di caricamento personalizzata
  • Caricamento molto rapido delle pagine
  • Possibilità di inviare notifiche push
  • Icona d'avvio sulla schermata home dei dispositivi mobili (ATHS)
  • Apertura delle pagine a tutto schermo, senza le classiche icone del browser
  • Installazione senza accedere a particolari "store"
  • Sicura perché l'accesso avviene tramite connessioni criptate HTTPS

Come vedi, elementi che sono tipici di un'applicazione nativa sviluppata con linguaggi diversi come Java o Swift, ma che è possibile sviluppare ora con semplice HTML e JavaScript.

Il fenomeno delle "APP progressive" è abbastanza recente e deve il suo successo allo sviluppo dei moderni browser oltre che al massiccio martellamento fatto da Google per trasformare i siti web in "responsive" ossia con un design che si adattasse alle dimensione dello schermo con cui l'utente visualizzava le pagine.

A differenza dei normali siti Web che di solito smettono di funzionare in assenza di una connessione internet, le Web APP possono memorizzare i dati nella cache del browser, per mantenere la funzionalità anche in modalità offline. Una classica pagina web infatti, in assenza di connessione, visualizza il messaggio di errore "pagina non disponibile".

E' chiaro che se la tua Web APP è studiata per mostrare le quotazioni di un titolo in borsa, e sei offline da diverse ore, non visualizzerai le ultime quotazione aggiornate, ma quelle memorizzate prima che passassi offline. Sicuramente meglio che vedere una pagina di errore.

La tipica struttura di una Web APP progressiva, prevede un'interfaccia realizzata con il classico HTML e CSS, la quale sarà salvata nel dispositivo, non appena l'utente si collega per la prima volta alla web app. In questo modo si garantisce una visualizzazione quasi immediata dello "scheletro" delle diverse pagine.

Il processo di salvataggio avviene grazie alla registrazione di un "service worker" (NB: non ancora disponibile in tutti i browser), ossia un particolare script creato dallo sviluppatore dell'app che agisce in background ed è separato dal browser, in modo che si possano inserire delle istruzioni indipendenti da quest'ultimo e dalle interazioni con il navigatore.

Tipico esempio è l'invio e ricezione di Notifiche Push o la sincronizzazione dei dati in background. Nel futuro e' probabile saranno aggiunte nuove funzionalità. Inoltre grazie al service worker, ho anche accesso all'API IndexDB che mi permette di leggere e scrivere i dati in modo permanente all'interno del dispositivo.

Affinchè il browser possa registrare lo script, è necessario che il collegamento tra la pagina dell'APP e il dispositivo avvenga tramite connessione protetta.

Per un elenco completo di quello che il tuo attuale browser e quindi la tua Web App progressiva possa eventualmente fare, consulta il link seguente: https://whatwebcando.today/


Davide Copelli{ing}Davide Copelli {ing} - Mi occupo di Web Marketing, Email Marketing, SEO, Programmazione, dal 2001, quando ho fondato la mia società di consulenza DCOP. Nel 2003 ho fondato il primo portale in Italia di e-learning sulla programmazione web, tramite VideoCorsi (Video-Corsi.com), molto prima della nascita di YouTube e del fenomeno "video". Sono "Chief Digital Media Planner" di GreeniTop.com, di cui sono co-fondatore.

Ricevi le anteprime dei nuovi corsi! Iscriviti Gratuitamente

La tua email è al sicuro. Potrai cancellarti definitivamente con un click e in ogni istante. Odiamo lo spam!

×