Native App contro PWA: qual è la migliore soluzione?

Quando si parla di app mobile, la domanda che più spesso ci viene posta è: "Fra PWA e Native, chi vince?” .

Le domande subito successive che sorgono sono: 

• Quali sono le differenze e i limiti delle due tecnologie? 
• Quali sono i costi e i vantaggi delle due soluzioni?
• Qual è la soluzione più vantaggiosa per il mio progetto? 

Ovviamente non c’è una risposta assoluta, ma una serie di vantaggi e svantaggi per ognuna delle tipologie. Inoltre, quando si sceglie una tecnologia per un progetto, non si può parlare solo di fattibilità e features disponibili, ma bisogna anche tenere presenti aspetti quali costi di realizzazione, manutenzione, tempi di sviluppo, prestazioni, usabilità, manutenibilità, resilienza, seo, discoverability ecc.

Lo scopo di questo articolo è demistificare la difficoltà di scelta fra le due tipologie di app, offrendo anche una panoramica degli aspetti secondari che orbitano attorno alla creazione di un’app, dando un punteggio alle caratteristiche salienti come se "PWA vs Native" si svolgesse su un ipotetico ring, come un incontro virtuale di boxe.

Ma prima di partire a elencare differenze e punti di forza, definiamo di cosa stiamo parlando.

Una App nativa è un’applicazione sviluppata con linguaggio nativo del dispositivo che le ospita, ovvero con viste e funzionalità create appositamente per il sistema operativo del telefono o tablet. La maggior parte sono per le due piattaforme più diffuse: Android (scritte in linguaggio Java) e iOS (scritte in Objective C).

Le app native girano sui dispositivi e loro prerogativa è la possibilità di sfruttare appieno le capacità software e hardware del dispositivo (come fotocamere, GPS, bluetooth, notifiche) e l’interazione con altre app o risorse del sistema operativo (ad esempio contatti, telefono, app social). 

Il concetto di app nativa si è allargato molto negli ultimi anni, soprattutto con l’avvento di framework quali Swift (di Apple, 2014), React Native (di Facebook, 2015) e Flutter (di Google, 2017) che consentono di sviluppare un’unica app ibrida, che chiameremo “cross-platform”, e compilarla in più versioni native per le piattaforme interessate.

Questo ha permesso di velocizzare enormemente la realizzazione di applicazioni native ridimensionando sia costi sia tempi di produzione, allargando al contempo lo sviluppo a un pubblico più ampio, come ad esempio chi opera nel settore web.

Questa diffusione, la crescente domanda di app, e i livelli di astrazione introdotti nello sviluppo da linguaggi di larga diffusione, hanno permesso a questi framework di crescere rapidamente e di raggiungere livelli di qualità apprezzabili, tanto da far risultare indistinguibili queste app cross-platform dalle app scritte in linguaggio nativo.

PWA è l’acronimo di Progressive Web App.
Una PWA è un applicativo web, quindi tecnicamente un sito web a tutti gli effetti, che si prefigge lo scopo di offrire agli utenti un’esperienza molto simile ad un’app mobile nativa in termini di interfaccia, interazioni e performance.

L’aggettivo Progressive indica diversi aspetti del comportamento di una PWA, principalmente si riferisce alla tecnica di “progressive enhancement” ovvero suddividere il caricamento iniziale (il primo in assoluto)  in due fasi, la prima, quasi istantanea per il “guscio” dell’app ovvero per gli elementi indispensabili al suo utilizzo (quali menu, barre navigazione, footer ecc.), e una successiva “lazy” che comprende tutti i contenuti dinamici e pesanti. 

Dopo questo primo rendering (fatto una tantum), la PWA mette a disposizione degli strumenti per fare caching specifico dei contenuti, per ottenere dal secondo rendering in poi una versione istantanea dell’app, ripristinata dai contenuti memorizzati in cache, mentre in sottofondo viene lanciato in “lazy load” l’aggiornamento dei nuovi contenuti. 

Queste tecnica progressiva permette, tramite un tuning aggressivo del caching, di arrivare ad avere un’app completa di contenuti disponibile anche in modalità offline.

Le PWA hanno svariati vantaggi ma le principali caratteristiche che ne hanno reso possibile la diffusione sono queste: 

• Installabili, ovvero possibilità di aggiungere un’icona alla schermata di home 
• Ricevere notifiche tramite push dal browser 
• Remote, ovvero girano su un server e non sul device dell’utente. 
• Sviluppate con HTML, CSS, e JavaScript.

Anche solo la capacità di aggiungere un sito come un’app sulla home del telefono ha fatto guadagnare a questa soluzione diversi punti nel “blindatissimo” mercato mobile.

Di seguito le caratteristiche principali che definiscono una PWA riportate da Wikipedia:

• Progressive - Funzionano per ogni utente, a prescindere dal browser scelto perché sono costruite alla base con principi di miglioramento progressivo.
• Responsive - Si adattano alle varie dimensioni dello schermo: desktop, mobile, tablet, o dimensioni che potranno in seguito rendersi disponibili.
• Indipendenti dalla disponibilità della connessione - I Service worker consentono di far funzionare l'applicazione offline, in mancanza di connessione o con connessioni a bassa qualità.
• App-like - Si comportano con l'utente come se fossero delle app native, in termini di interazione e navigazione.
• Aggiornate - Le informazioni sono sempre aggiornate grazie al processo di aggiornamento dei dati offerto dai service worker.
• Sicure - Vengono esposte su protocollo HTTPS per evitare che la connessione esponga informazioni o che i contenuti vengano alterati.
• Discoverable - Vengono identificate come “applicazioni” grazie al manifesto W3C[10] e al service worker registration scope che consente ai motori di ricerca di trovarle.
• Riattivabili - Rendono facile la riattivazione dell'applicazione grazie a capacità quali le notifiche push.
• Installabili - Consentono all'utente di "salvare" le app che considera più utili con la corrispondente icona sullo schermo del proprio terminale mobile (home screen) senza che si debba affrontare tutti i passaggi e problemi legati all'uso dell'app store.
• Linkabili - Facilmente condivisibili tramite l'URL e non richiedono complesse installazioni.

Quindi le PWA e le App Native sono due mondi distinti, ma vengono confrontate perchè sono due strumenti per arrivare allo stesso fine… ovvero realizzare un prodotto in grado di raggiungere gli innumerevoli utenti del mondo mobile. 

Sebbene adesso le PWA vengono utilizzate in un'accezione più ampia (anche ad esempio come tool di performance per siti web), e in molti framework web sono ormai preconfigurate come default, hanno ancora strada da fare per colmare il gap di funzionalità del mondo native. 

Uno dei grandi punti a favore delle PWA da tenere in considerazione è che, essendo fuori dalla catena degli app store, possono evitare di corrispondere commissioni per servizi compravendita, e non sono soggette ad approvazioni da parte dei big come Google e Apple. 

Le app native al contrario hanno bisogno di utilizzare meccanismi di “In-App Purchase” definiti e approvati dagli store.

Quando si parla di tempi di realizzazione, a parità di features, il costo delle app native supera di molto l'equivalente PWA. 

Questo perché gli sviluppi su native sono molto più difficoltosi e lenti, richiedono inoltre una maggiore cura e precisione dell’interfaccia e possono contare su un numero più limitato di integrazioni e plugin.

💁‍♂️ Questo è un round che va a favore delle PWA.

Quando si parla di engagement nell’ambito mobile, si intende principalmente Push Messaging, ovvero la funzionalità che permette di ricevere notifiche e aggiornamenti asincroni, anche ad app chiusa, in grado di coinvolgere e riportare periodicamente l’utente all’app.

Ma non è il solo punto da considerare; ha altrettanta importanza per il coinvolgimento dell’utente anche come viene “percepita” l’app.

Premesso che entrambe le soluzioni PWA e Native possono inviare notifiche push e costruire interfacce ricche, funzionali e belle da vedere, ci sono delle limitazioni per quanto riguarda le PWA su entrambi questi due punti.

Push

Mentre le app native hanno pieno controllo su questo strumento, le PWA si basano un push web, che dipende dal browser che le ospita. Attualmente Safari non supporta il push web, mentre Chrome sì, quindi per funzionare su IOS, l’utente dovrebbe installare le PWA con un browser diverso da quello di default. Probabilmente in futuro anche Safari supporterà questa feature, ma non sembra che succederà a breve.

Look and Feel

L’interfaccia delle PWA è HTML e CSS creato ad hoc per somigliare a un'app; per fare questo si ricorre spesso a librerie Material Design, che prevedono barre di navigazione , componenti con feedback touch e altri accorgimenti, ma spesso il risultato ottenuto non è soddisfacente come una versione native. 

Inoltre, come già detto, le PWA sono siti web che girano in un browser: questo fa sì che in alcuni casi il feel risulti poco morbido e poco performante, ad esempio nell’utilizzo di mappe, scroll e swiping, pinch, animazioni troppo pesanti… e altri casi particolari. 

🙋‍♂️ Due punti a favore di Native.

Il canale principale per trovare un’applicazione nativa sono gli “App Store”, e rappresentano delle armi a doppio taglio: da una parte sono una certificazione di garanzia della bontà dell’app, e permettono all’utente di avere un luogo centralizzato dove cercare app e capirne dalle review la qualità, dall’altra il crescente numero di app sugli store (si stima oltre 2.5mln su Google e 1.8mln Apple) non facilita molto la vita a chi crea le app e vuole essere cercato.

Sempre in ottica dei creatori, le politiche di rating tra applicazioni della stessa categoria può fare la differenza per i criteri di ricerca e numero di download, quindi un’app deve prima diventare virale per trarre vantaggio dagli store.

Spesso le app native hanno anche una pagina web dedicata per compensare le ricerche tramite motori di ricerca. 

Le PWA hanno l'opportunità di utilizzare tag SEO e vengono indicizzate automaticamente, inoltre una PWA ha un file di Manifest, che è un descrittore dell’app che la rende ricercabile e la categorizza come app fruibile da mobile, il loro canale di discovery è solo web. 

Anche se sembra che sia possibile incapsulare pwa e renderle accessibili da Google Play.

🙅‍♂️ In questo round, sia native sia pwa portano a casa un punto. 

Le PWA sono autonome, indipendenti dalla piattaforma, basta metterle online per essere fruibili istantaneamente, e non sono soggette alle reviews degli store né devono essere scaricate, ma possono essere installate quando si raggiunge l’URL dell’app. 

Mettere online una PWA necessita solo di un hosting https, ed eventualmente di una configurazione DNS; ad oggi hosting come Netlify, Surge e Zeit permettono di farlo gratuitamente e velocemente.

La pubblicazione di un’app su uno store non è impresa da poco, perché richiede questi passaggi: 

• creare la scheda dell’app;
• firmare e caricare l’app sullo store;
• gestire le versioni;
• abilitare gli user di test;
• verificare la compatibilità con i device;
• aspettare l’approvazione.

Sono tutte operazioni necessarie per la pubblicazione che allungano i tempi di realizzazione e sono spesso soggette a fallimenti per svariati motivi.

Esistono anche altri canali di distribuzione, come ad esempio store non ufficiali (Aptoide, Amazon Appstore), che permettono di installare le app abilitando l’installazione da terze parti, ma di solito chi realizza un'app native ha tutto l’interesse di farsi trovare sugli store ufficiali. 

💁‍♂️ Per quanto concerne la semplicità di distribuzione, qui PWA si aggiudica un punto.

Per quanto riguarda gli update e gli aggiornamenti delle app native, la procedura è la stessa della pubblicazione. A fronte di ogni aggiornamento c’è il pericolo di incompatibilità dati o errori con le versioni precedenti; inoltre è l’utente che decide di aggiornare l’app sul proprio dispositivo, e quindi gli update devono essere retrocompatibili.

Inoltre con il passare del tempo l’applicazione può soffrire di incompatibilità e ritrovarsi funzionalità deprecate o non compatibili con classi di device per aggiornamenti degli SDK, introduzione di nuove permissions, e nuovi sistemi operativi delle piattaforme.

In tal caso è necessario rimettere mano allo sviluppo per aggiornare l’app.

Lato PWA invece è tutto molto più semplice, dato che l’app è remota (e non su ogni singolo device come le app native): basta aggiornare l’applicazione e tutti avranno immediatamente la nuova versione. Inoltre è svincolata dall'incompatibilità dei device, e non hackable perché su https.

💁‍♂️ Per questo motivo, questo round è per le PWA.

Le dimensioni medie delle app native sono intorno ai 40 MB, mentre una PWA in media è di qualche mega al massimo, ovvero il peso della pagina web iniziale. 

Le PWA da questo punto di vista sono molto più immediate come utilizzo, dato che non necessitano di essere scaricate e aperte. Inoltre uno dei punti di forza delle PWA sono le performance di caricamento anche al primo utilizzo.

Uno dei grandi inconvenienti delle PWA è il consumo di memoria e processore, che comporta un grosso dispendio in termini di batteria. Questo è dovuto al fatto che il browser mobile che le ospita deve lavorare duramente per interpretare il javascript, e i browser mobile non sono esattamente fatti per questo. 

🙅‍♂️ Questo round è in parità: native guadagna un punto per le performance, PWA per il peso piuma.

Un’applicazione nativa in media accede a una o più delle seguenti funzionalità del device: camera, bluetooth, GPS, media player, contatti, microfono, accelerometro, NFC e molte altre. Inoltre le app native hanno la possibilità di interagire con altre app e account sul device, oltre a funzionalità di deep linking, e share fra app. 

Si pensi ad esempio a un login social con Google o Facebook: questo può essere fatto in automatico sfruttando la sessione attuale dell’app sul device senza introdurre credenziali. 

Fare la stessa cosa con le PWA non è altrettanto immediato, le funzionalità a cui può accedere sono principalmente quelle per cui esiste un equivalente web-api e che sono supportate dal browser che si sta utilizzando.

Alcune feature non sono disponibili per nessun browser, come leggere contatti o SMS da device o interagire con app installate.

Diverse feature sono disponibili per Chrome e Firefox, mentre su Safari molte meno, che per esempio non supporta le notifiche push.

Di seguito, trovate una lista presa da What Web Can Do Today delle funzionalità supportate rispettivamente da Chrome e da Safari.

🙋‍♂️ La flessibilità e l'accesso a tutte le funzionalità dello smartphone offrono alle app native due punti in questo round.

🤦‍♂️ Le PWA rischiano il KO nel caso tali funzionalità siano fondamentali per il funzionamento dell’app.

Chi ha vinto, alla fine? Ai punti, si può dire che si tratti di un onorevole pareggio fra due combattenti molto diversi fra loro. 

In definitiva possiamo dire che le PWA sono valide alternative alle app native, con molti vantaggi accessori, e un futuro luminoso davanti.

Minimizzando potremmo dire che se non c’è necessità di utilizzare funzionalità avanzate o non supportate del device, se si accetta la parziale copertura del servizio di push e si rinuncia ad essere presenti su un app-store, una PWA è una soluzione soddisfacente, meno costosa e versatile. 

Per tutti gli altri casi la strada da seguire è l’app nativa.

https://www.codica.com/blog/progressive-web-apps-vs-native/

https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0

https://dev.to/uyouthe/pwa-checklist-2019-25j4