Oggi, oltre il 60% dell'utilizzo totale di Internet avviene tramite telefono cellulare. La portabilità, l'hardware economico, l'accesso facilitato a Internet e l'aumento del numero di servizi su Internet e sulle reti 4G/5G sono alcune delle motivazioni. La Progressive Web App consente alle applicazioni Web di caricarsi quando la rete è assente, di sincronizzarsi in background e di svolgere le proprie funzioni senza soluzione di continuità, fornendo agli utenti un'esperienza simile a quella nativa.

Tester online PWA

Analizza e diagnostica il tuo punteggio delle Progressive Web App

Controlla le prestazioni della tua PWA e inizia a costruire app di alta qualità, accattivanti, veloci e adattabili a tutti i dispositivi.

Tester e validatori

4 Condividi

Inserisci URL da controllare

Includi il tipo di protocollo (http o https)

ANALISI

Cosa è una PWA?

Perché dovrebbe interessarti?

Ad oggi, più del 60% dell'utilizzo di internet avviene tramite telefono mobile. La Portabilità, l'hardware a basso costo, l'accesso facilitato ad internet ed il crescente numero di servizi internet sulle reti 4G/5G sono alcune delle motivazioni.

Quando le aziende hanno un'applicazione mobile nativa dedicata, è possibile che molti utenti preferiscano la versione web responsive per evitare il download e l'installazione dell'applicazione a causa dei limiti di memoria, limiti dell'hardware o per preferenze personali.

Prendiamo in esempio Whatsapp sul tuo telefono. Quando non c'è nessuna connessione, puoi mantenere l'applicazione aperta, controllare i vecchi messaggi e rispondere a qualcuno. Quando ritorna la connessione internet, i messaggi scritti vengono inviati automaticamente in background.

Questo è quello che una PWA promette nelle applicazioni web. Permette alle applicazioni web di caricarsi in assenza di rete, di sincronizzarsi in background e di svolgere senza problemi le sue funzioni, offrendo agli utenti un'esperienza simile a quella nativa.

Progressive Web Apps are user experiences that have the reach of the web, and are:

Reliable (Affidabili): Si caricano istantaneamente e non mostrano mai il downasaur (il dinosauro che appare in Google Chrome quando la connessione internet è assente), anche quando la connessione incerta.
Fast (Veloci): Rispondono immediatamente alle interazioni dell'utente con animazioni fluide e senza scorrere in modo strano.
Engaging (Coinvolgenti): Si presentano come un’app naturale del dispositivo, garantendo un'esperienza utente immersiva.

Questo alto livello di qualità consente alle Progressive Web App di guadagnarsi un posto nella schermata home dei dispositivi.

Affidabili

Quando i service workers vengono lanciati nella schermata iniziale dell'utente, la progressive web app si carica istantaneamente, indipendentemente dallo stato della connessione.

Un service worker, scritto in javascript, è come un proxy lato client che consente di controllare la cache e le modalità di risposta alle richieste di risorse. Il pre-caching delle risorse chiave permette di eliminare la dipendenza di rete, garantendo esperienze immediate ed affidabili agli utenti.

Veloce

Il 53% degli utenti abbandona un sito se impiega più di 3 secondi a caricarsi!

E una volta caricato, gli utenti si aspettano che il sito sia veloce, senza scorrimenti frettolosi o con interfacce lente nella risposta.

Coinvolgente

Le Progressive Web App sono installabili e si trovano nella schermata home dell'utente, senza bisogno di un app store. Con l'aiuto di un web app file manifest offrono un'esperienza immersiva a schermo intero e possono coinvolgere nuovamente gli utenti con notifiche push.

I Web App Manifest consentono di controllare il modo in cui l'applicazione viene visualizzata e lanciata. Puoi specificare le icone della schermata iniziale, la pagina da caricare all'avvio, l'orientamento dello schermo e persino se mostrare o meno il browser chrome.

Le PWA arrivano su desktop e su OS Chrome

Google I/O '19

Le Progressive Web App non sono più solo per i dispositivi mobili, ma forniscono applicazioni di alta qualità e capacità su Windows, Mac, Linux e Chrome OS.

Vi illustreremo gli aspetti fondamentali da sapere per costruirle, alcune delle caratteristiche uniche che offrono, le best practice da seguire e come sono state realizzate alcune delle nostre PWA desktop preferite.

Riferimenti Audit

La barra degli indirizzi si abbina ai colori del marchio	Modellare la barra degli indirizzi del browser in modo che corrisponda ai colori del marchio offre un'esperienza utente più coinvolgente.
La cache contiene start_url dal Manifest	Assicura che una progressive web app venga avviata correttamente dalla schermata iniziale di un dispositivo mobile mentre questo è offline.
Configurazione per una schermata iniziale personalizzata	Una schermata iniziale personalizzata fa sì che una progressive web app (PWA) sia più simile a un'applicazione nativa.
Mantiene alcuni contenuti quando JavaScript non è disponibile	Il miglioramento progressivo è una strategia di sviluppo web che garantisce che il tuo sito web sia accessibile al maggior numero di utenti possibile.
Contenuto della dimensione corretta per la Viewport	Questo controllo verifica che la larghezza del contenuto della pagina sia uguale alla larghezza della viewport. Spesso se la larghezza del contenuto è inferiore o superiore a quella della viewport, è perché la pagina non è ottimizzata per gli schermi mobili.
Ha un meta-tag viewport con larghezza o scala-iniziale	Senza un meta-tag viewport, i dispositivi mobile visualizzano le pagine con la larghezza tipica degli schermi desktop, successivamente scalano le pagine per adattarle allo schermo del dispositivo mobile. Impostare la viewport consente di controllare la larghezza e il ridimensionamento della viewport.
ll Manifest contiene icone di almeno 192px	Quando un utente aggiunge l’applicazione nella schermata iniziale, il dispositivo mobile deve visualizzare necessariamente un'icona. L'icona è specificata nell'array icons del Web App Manifest.
Il Manifest contiene background_color	Quando la web app viene caricata nella schermata home dell'utente, il browser utilizza la proprietà background_color per richiamare il colore di sfondo del browser durante il caricamento dell'applicazione. Viene a crearsi quindi una transizione fluida tra l'avvio dell'applicazione e il caricamento del suo contenuto.
Il Manifest contiene il nome	La proprietà name della Web App Manifest è un nome per l’applicazione in una versione facilmente leggibile, pensata per essere visualizzata sul dispositivo mobile dell'utente.
Il manifest contiene lo short_name	Dopo che l'utente aggiunge l'applicazione alla schermata iniziale, lo short_name è il testo che viene visualizzato nella home accanto all'icona dell'applicazione. In generale, viene utilizzato quando non c'è spazio sufficiente per visualizzare il nome completo dell'applicazione.
Il Manifest contiene l'URL di avvio	Dopo che la web app è stata aggiunta nella schermata home dell'utente, la proprietà start_url della Web App Manifest determina quale pagina dell'applicazione viene caricata per prima quando l'utente lancia l'applicazione dalla schermata home.
Manifest Exists	La Web App Manifest è la tecnologia web che permette di aggiungere la propria applicazione web alla schermata home dell'utente. Questa funzione è comunemente chiamata "Add to Homescreen (A2HS)".
Impostazione proprietà display del Manifest	Quando l'applicazione viene avviata nella home, è possibile usare la proprietà display della Web App Manifest per specificare la modalità di visualizzazione dell'applicazione.
Il caricamento della pagina è veloce su dispositivi mobile	Molti utenti visitano le pagine del sito con connessioni di rete lente. Assicurarsi che la pagina si carichi velocemente su una rete mobile simulata assicura che la pagina venga caricata in tempi ragionevoli per gli utenti mobile.
Reindirizza il traffico HTTP verso HTTPS	Tutti i siti dovrebbero essere protetti con l'HTTPS. Per conoscerne il motivo, consulta il documento Lighthouse: Il sito è su HTTPS. Una volta impostato l'HTTPS, è necessario assicurarsi che tutto il traffico HTTP non sicuro verso il sito sia reindirizzato all'HTTPS.
Registrare un Service Worker	La registrazione di un service worker è il primo passo per abilitare le funzionalità delle progressive web app: Offline, Notifiche push, Aggiungi alla schermata home.
Risponde con uno status code 200 quando è offline	Le Progressive web apps funzionano offline. Se Lighthouse non riceve una risposta HTTP 200 quando si accede ad una pagina offline, vuol dire che la pagina non è accessibile offline.
All'utente può essere richiesto di installare l'applicazione web	La richiesta di installazione di un'applicazione web consente agli utenti di aggiungere l'applicazione alla propria Schermata Home. Gli utenti che aggiungono le app nella schermata home le utilizzano maggiormente.
Utilizza HTTPS	Tutti i siti web dovrebbero essere protetti da HTTPS, anche quelli che non gestiscono dati sensibili. L'HTTPS impedisce agli intrusi di manomettere o ascoltare passivamente le comunicazioni tra il sito e gli utenti.