PROGRESSIVE WEB APP: che cosa sono?

Le Progressive Web App sono "normali" applicazioni web che uniscono però i vantaggi delle app native per dispositivi mobile a quelle dei siti web tradizionali.

Come sono costituite le progressive web app?

Queste applicazioni sono infatti costituite, come per qualsiasi pagina web, da un documento HTML generato dal server che viene inviato al browser dell'utente e che tramite una serie di funzioni Javascript forniscono un'interfaccia per interagire col programma.

Come una normale pagina web non necessitano di un App store per essere installate e non occupano una rilevante quantità di memoria sul dispositivo.

A differenza di una normale pagina Web però, possono sfruttare dei meccanismi disponibili sui moderni Browser Web che consentono loro di "comportarsi" come un'applicazione nativa, di sfruttare un caricamento molto più veloce ed efficiente e di sopperire alla mancanza di connettività del dispositivo che le utilizza.

Quali sono le caratteristiche delle web app?

Queste innovative caratteristiche fondamentali sono realizzate principalmente grazie al "MANIFEST" e ai "SERVICE WORKERS".

Il Manifest è un elementare file JSON che ha il compito di configurare parametri base dell'applicazione utili a definire l'aspetto della stessa al momento dell'apertura quali nome, icone, colori, font e orientamento dello schermo. Inoltre definiscono la possibilità di aggiungere sulla home screen del dispositivo l'icona per lanciare velocemente l'APP in questione.

Come vengono identificate le PWA dai motori di ricerca?

Grazie al Manifest e a un Service Worker particolare le PWA sono identificate dai motori di ricerca come "Applicazioni".
Essendo di fatto dei siti web hanno il vantaggio di venire correttamente indicizzate come tali.

I Service Workers sono il cuore pulsante delle Progressive Web App: script eseguiti in background che apportano funzionalità per le quali non è richiesta l'interazione dell'utente.

Grazie ai Service Workers diventano possibili alcune funzionalità tipiche delle APP native, quali le notifiche PUSH e la sincronizzazione dei dati in background.

Agendo tra la connessione di rete e il Browser che esegue la Web App, hanno inoltre la capacità di gestire le richieste di rete e i meccanismi di cache delle risposte, fornendo ad esempio funzionalità anche in caso di dispositivo OFFLINE. Questa caratteristica aumenta notevolmente il controllo, per lo sviluppatore, dell'esperienza utente.

Le web app come gestiscono il caricamento delle pagine?

Per poter gestire un caricamento più veloce le PWA memorizzano una "cornice base" dell'interfaccia utente, chiamata Shell, il cui codice viene salvato nella cache locale del browser tramite il lavoro di un Service Worker.

In questa cornice iniziale i dati possono essere caricati dinamicamente e progressivamente a seconda della qualità della connessione a disposizione del dispositivo. Infatti il termine Progressive sta proprio a indicare il fatto che il caricamento dei dati e delle funzionalità più "pesanti" avviene solamente dopo quello del contenuto principale, il quale deve essere sempre fruibile da tutti gli utenti, indipendentemente dalla velocità della loro rete.

Le PWA sono dunque multipiattaforma e sono sempre aggiornate grazie al servizio offerto dai Service Workers.

Esempio di PWA

Due esempi famosi che vi permetteranno di capire come sono strutturate le PWA sono Pinterest e Twitter.