Progressive Web App

Atterrando sulla pagina iniziale l’utente potrà scaricare il sito in locale sul proprio telefono, conferendogli caratteristiche simili a quelle di una app nativa.

* Da iOS 11.3

Sito Web

E' il punto di partenza. Un buon sito full- responsive e con un sistema di ottimizzazione dei contenuti (compressione immagini, lazy loading, caching, ecc) si presta bene per diventare una PWA

Attivazione

E' il momento più importante, quello in cui l'utente accedendo ad un sito PWA è chiamato ad effettuarne il download sul proprio telefono, attraverso una segnalazione (alert, modale o altro) del proprio browser

PWA

L'utente accede al sito come se fosse un'App, direttamente dal menu del proprio smartphone.
La pwa dispone di tutte le impostazioni presenti su una qualunque App: gestione della memoria locale, batteria, utilizzo dati, ecc.

Da sito a PWA

Il processo di trasformazione prevede:

nel migliore dei casi

l’aggiunta di alcuni file nella root di progetto: un service worker, un manifest, uno script di ottimizzazione delle impostazioni di caching

nel peggiore dei casi

la parziale rifattorizzazione del progetto di sviluppo; solo un’accurata analisi può evidenziare le eventuali criticità previste lungo il persorso di implementazione

Requisiti minimi

Prima di pensare alla conversione in PWA è bene che almeno il sito sia perfettamente responsive ed esposto su un protocollo HTTPS con un frontend standalone.

Disponibile su iPhone, iPad and all Android devices da 5.5

Manifest

Un semplice file JSON o xml che definisce i parametri fondamentali delle PWA, per controllare come l’app dovrebbe apparire all’utente e definire il suo aspetto al momento del lancio: icone, altre caratteristiche di base come colori, caratteri, orientamento dello schermo e la possibilità di essere installata sulla home screen.

Service worker

è uno script eseguito in background dal browser di navigazione. È capace di eseguire azioni in risposta a richieste di rete o informazioni trasmesse dal sistema operativo (cambi di connettività ad esempio)

Installazione

Guarda il video per vedere come si sviluppa esattamente il processo di download su Android e iOS

Guarda

Caratteristiche della PWA

Una serie di caratteristiche che la rendono equiparabile ad una comune app nativa

Progressive

Funzionano per ogni utente perché sono costruite alla base con principi di miglioramento progressivo

Aggiornate

Le informazioni sono sempre aggiornate grazie al processo di aggiornamento dei dati offerto dai service worker

App-link

Si comportano con l’utente come se fossero delle app native, in termini di interazione e navigazione

Ricercabili

Rendono facile la riattivazione dell’applicazione grazie a capacità quali le notifiche web.

Responsive

Si adattano alle varie dimensioni dello schermo: desktop, mobile, tablet, o dimensioni che potranno in seguito rendersi disponibili

Linkabili

Facilmente condivisibili tramite l’URL senza complesse installazioni.

Installabili

Possono essere salvati con l'icona sull'home screen senza che si debba affrontare tutti i passaggi e problemi legati all’uso dell’app store

Offline

Lo “scheletro” dell’app richiama la struttura della pagina e i suoi elementi

Home Screen

Il favicon del sito diventa l'icona dell'App sul menu del telefono

iOS

IOS

Android

Impostazioni

Le pwa sono gestibile dalle impostazioni dell'OS come tutte le altre App

Apple Android

.Apk

In alcuni casi è possibile convertire il progetto in .Apk, l'estensione riconosciuta dal Play Store per la pubblicazione di app Android sul suo store ufficiale

Punti Deboli

In alcuni casi le App native rimangono ancora la soluzione migliore a causa dei seguenti limiti delle PWA (che col tempo verrano comunque risolti)

Supporto iOS dalla versione 11.3 in poi;
Maggior utilizzo della batteria del device;
Non tutti i dispositivi supportano l’intera gamma di funzionalità delle PWA (stesso discorso per i sistemi operativi iOS e Android);
Non è possibile stabilire un re-engagement forte per gli utenti iOS (url schema, notifiche web standard);

Il supporto all’esecuzione offline è comunque limitato;
Mancata presenza sugli store (non c’è la possibilità di acquisire traffico da quel canale);
Non c’è un “ente” di controllo (come gli store) e un processo di approvazione;
Limitato accesso ad alcuni componenti hardware dei device;
Poca flessibilità riguardo contenuti “speciali” per gli utenti (es. programmi fedeltà, loyalty, ecc).

Le tecnologie più compatibili

Esistono diversi framework per la creazione delle Progressive Web App, principalmente basati su JavaScript, con diverse caratteristiche.