Progressive Web Apps (PWA): Guida Completa al Futuro Mobile

Cosa sono le Progressive Web Apps o PWA?

Le Progressive Web Apps sono la combinazione tecnologica di applicazioni native e applicazioni web basate su HTML5 che conosciamo. Le PWA sono arrivate per colmare il gap tecnologico tra app e pagine web.

Google è stato uno dei principali sostenitori nell'incoraggiare lo sviluppo di questo tipo di tecnologia. Per comprendere meglio le sue caratteristiche, dobbiamo parlare di applicazioni che devono essere affidabili, veloci e coinvolgenti.

Caratteristiche che le Progressive Web Apps devono avere

Per rendere il concetto di PWA sufficientemente chiaro e spiegato, immergiamoci nelle caratteristiche essenziali che queste tecnologie devono avere.

Naturalmente, parliamo in termini generali. Da lì, ogni modello di business/servizio adatterà i suoi obiettivi alle esigenze del proprio target.

Velocità

Il tempo è denaro, non solo per Google ma per tutte quelle attività in cui un caricamento lento dei loro prodotti può far abbandonare un potenziale acquisto agli utenti.

Google ha enfatizzato questa premessa per molto tempo. La nascita del progetto AMP aveva questo obiettivo, e ora le PWA si uniscono alla necessità di un accesso rapido alle informazioni dalle applicazioni.

Gli utenti oggi non hanno pazienza; non aspettano che un sito si carichi completamente. Il 53% degli utenti non aspetta più di 3 secondi affinché un sito web si carichi, secondo Think with Google

Affidabile

Quando parliamo di affidabilità, ci riferiamo alle garanzie operative del sito. Grazie a quelli che sono noti come Service Worker, i problemi di connessione di rete non dovrebbero impedire il caricamento della PWA.

Installabile

Le PWA possono essere installate senza dover andare al Chrome Store, all'Apple Store, o a qualsiasi altro app store esistente. Ricorda che non sono applicazioni native, quindi possiamo accedervi senza passare per questi store.

L'installazione si comporta semplicemente come una scorciatoia; non ha bisogno di spazio per memorizzare i diversi file.

Dispositivi diversi: Mobile e Desktop

La codebase è unificata tra entrambi i dispositivi, il che significa che le tecniche di design responsive si applicano sia su mobile che su desktop.

Vantaggi e svantaggi delle PWA

Alcuni vantaggi sono già stati menzionati sopra spiegando le caratteristiche delle applicazioni progressive. Ma ci sono molte più ragioni per considerare l'uso di questa tecnologia nel nostro business.

• ›Risparmio di risorse
• ›Nessuna installazione richiesta
• ›Velocità di caricamento molto elevata
• ›Notifiche push direttamente sugli smartphone
• ›Funziona su tutti i sistemi operativi
• ›Sicurezza migliorata
• ›Meno lavoro di sviluppo e manutenzione rispetto a un'app nativa.
• ›Più economica di un'app nativa.

Svantaggi

• ›Richiede connessione internet.
• ›Non tutti i browser supportano le PWA.
• ›Alto consumo di batteria

Cos'è un Service Worker?

Tornando brevemente al lato tecnico, dobbiamo parlare di certi aspetti senza i quali le applicazioni progressive non potrebbero funzionare. I service worker sono script che vengono eseguiti in background, facendo richieste alle applicazioni web, alla cache, o alla rete stessa.

Una cosa importante che dovremmo sapere è che i Service Worker possono funzionare solo se hai un certificato SSL e li servi tramite https.

Ora vediamo tutto con un esempio: il sito web di BMW e la sua PWA.

Esempio di PWA: BMW

Ho cercato di scrivere un articolo senza approfondire gli aspetti tecnici, e ora vedremo un esempio di un'applicazione che aiuterà a comprendere meglio il concetto di PWA.

Se entriamo nel sito web di BMW, possiamo vedere che hanno un design molto attraente, dando priorità al visivo, ma oltre a parlare di design, vediamo che tipo di sito web abbiamo davanti.

Apparentemente è un sito web "normale", ma se scavi nel codice abbiamo la nostra prima sorpresa. Effettivamente, è un sito web interamente sviluppato in AMP, non solo la versione mobile.

Ma andiamo alla questione di oggi.

Una volta dentro il sito web, andiamo alla barra "personalizza e controlla" di Chrome.

Come hai potuto vedere, si è aperta una finestra con il contenuto del sito web BMW. Confrontando entrambi i contenuti, vediamo che sono praticamente identici.

Immagine del sito web nel browser (Chrome)

Immagine del sito web in PWA desktop

Gli sviluppatori di BMW sono riusciti a mantenere un aspetto visivo identico. Quando accettiamo l'"installazione" della PWA nella nostra cartella delle applicazioni Chrome o anche sul desktop (a seconda del SO, attualmente sto usando MacOS), è stata scaricata una scorciatoia alla PWA.

Se siamo sopraffatti dall'installazione di app e vogliamo disinstallarla, dobbiamo solo andare alla nostra finestra della versione PWA, cliccare sul lato destro proprio come in Chrome, e selezionare disinstalla.

Nella versione mobile è praticamente simile. Quando entriamo nel sito web con versione PWA, riceviamo una notifica per "creare una scorciatoia".

Quando si entra in un sito web con PWA; vedremo un'opzione per creare una scorciatoia.

Se accettiamo, vedremo un'icona PWA sul nostro desktop mobile.

DevTools per saperne di più sulle PWA

A questo punto, voglio approfondire gli esempi per spiegare concetti e caratteristiche di questo tipo di applicazione.

Per questo useremo lo strumento di sviluppo che Chrome fornisce (DevTools). Apriamo l'inspector con il tasto destro e andiamo su Application.

Chrome Devtools

App Manifest (Web Application Manifest)

Il manifest è un piccolo file JSON con aspetti di stile di base che fornisce al browser per evitare cambiamenti bruschi.

Esempio di Manifest (JSON)

Service Worker

Come abbiamo spiegato prima, ora possiamo vedere di cosa si tratta. Vediamo il file JS e in esso gli script che usa. Il Service Worker viene installato nel browser. Ne avremo diversi da altre applicazioni web.

Una delle funzioni principali di questo tipo di codice è garantire che venga sempre servita la stessa versione (controlla la cache) anche se apriamo un'altra scheda.

Come implementare PWA in WordPress?

Mentre se abbiamo sviluppato il nostro sito web con il nostro codice dovremo fare un bel po' di lavoro manuale, la situazione sarà molto diversa se abbiamo sviluppato il nostro sito web in WordPress. Se è così, avremo a nostra disposizione diversi plugin che ci permetteranno di abilitare la tecnologia PWA in un paio di click. La versione PWA di SEO Alive, infatti, è il risultato di questo plugin che raccomandiamo.

Plugin più popolari per implementare PWA in WordPress.

PWA nel Marketing

Per quelli di noi che lavorano nel marketing, le Progressive Web Apps possono aiutarci a raggiungere obiettivi che ogni dipartimento marketing ha in mente per far crescere un brand.

Fidelizzazione e Vendite

Uno degli obiettivi peggio lavorati da alcuni brand. Tutti conosciamo il basso coinvolgimento che i brand di telefoni cellulari hanno nel trattare i loro clienti, per fare un esempio.

Le notifiche push nelle PWA sono una delle azioni che funzionano meglio e contribuiscono alla generazione di vendite.

Uno studio condotto da Gartner sulle PWA ci fornisce una serie di statistiche molto interessanti su Lancôme e Alibaba; Lancôme riporta un aumento del 17% nelle conversioni, del 51% nelle sessioni da dispositivi mobili, e del 52% su iOS. Alibaba (il gruppo a cui appartiene Aliexpress) ha migliorato il suo tasso di conversione del 76%.

Anche se abbiamo parlato di 2 giganti globali, avere un'app sul tuo cellulare dove il tempo di caricamento ed esecuzione non è un freno, oltre a rispettare un buon design, ha dimostrato di aumentare il tasso di conversione.

In conclusione, possiamo dire che le PWA si stanno diffondendo sempre di più, principalmente tra i grandi brand. In Spagna, probabilmente ci vorrà un po' di tempo per renderci conto dell'enorme potenziale di questa tecnologia, ma prima o poi verrà implementata.

Qualsiasi tecnologia che faciliti la navigazione mobile ha grande importanza; passiamo molte ore con i nostri smartphone, e in definitiva, l'accesso sia ai contenuti che ai prodotti è business.

Riferimenti

• ›Documentazione Google sulle PWA