PWA o AMP per il vostro sito o applicazione web su dispositivi mobili? D’istinto verrebbe da rispondere perché non una app mobile direttamente, allora? Le app mobili sono sicuramente più adatte e potenti delle piattaforme web o desktop, in questo caso. Tuttavia, non sono l’unica opzione disponibile. In molti casi e ormai soprattutto per le piccole imprese, una app mobile è decisamente meglio di un sito che langue sul web senza visite.
Cosa significa e cosa è una PWA?
PWA è una sigla che sta per Progressive Web App (Applicazione Progressiva Web).
Un’applicazione web progressiva, o PWA, unisce i vantaggi delle app Web e mobili in un unico prodotto software. Come dichiarato da Google, le PWA sono “esperienze utente che hanno la portata del Web e sono affidabili, veloci e coinvolgenti”. È una tecnologia che consente di utilizzare un sito Web come se fosse una app nativa, ovvero una app costruita per un dispositivo mobile.
Twitter è una delle principali aziende che utilizzano PWA. Per installare la app, aprite la versione web sullo smartphone e la aggiungete alla schermata iniziale. Quando aprite Twitter dall’icona della schermata principale,questa si apre come una web app progressiva (v. immagine qui sotto).
Caratteristiche
Le PWA rappresentano una soluzione ottimale grazie alla loro reattività e condivisibilità. Inoltre possono funzionare offline perché memorizzano i file HTML e CSS nella cache del browser e li archiviano permettendo così l’uso della pagina Web senza linea. Le tre componenti essenziali delle PWA sono gli operatori di servizio, il file manifest e il protocollo sicuro HTTPS.
Operatori di servizio (Service workers)
Gli operatori di servizio sono parti di codice JavaScript (quindi sono dei software) che svolgono il ruolo di proxy tra la rete e il browser.
Quando si apre una pagina Web per la prima volta, gli operatori di servizio archiviano i dati necessari nella cache del browser. Quando lo si apre per la seconda volta, questi operatori recuperano i dati dalla cache prima che la app verifichi la disponibilità della rete.
Perciò, non solo offrono la possibilità di lavorare offline, ma aumentano notevolmente i tempi di risposta. Gli operatori di servizio gestiscono anche le notifiche push.
File manifest
Il file manifest è un file JSON contenente tutte le informazioni sulla app. Ad esempio, contiene dati relativi all’icona della schermata principale della PWA, il suo nome breve, la palette dei colori o il tema grafico dellìapplicazione.
Dato che Google è molto reattivo per le PWA, se si utilizza il browser Chrome su un telefono Android, il file manifest attiverà l’installazione automatica della PWA sul telefono come fosse una app nativa.
HTTPS
Il protocollo sicuro HTTPS ( Hypertext Transfer Protocol Secure) è di uso obbligatorio se si sviluppa una web app progressiva. Mentre gli operatori di servizio rendono possibile il concetto stesso di PWA, sono tuttavia vulnerabili a errori o violazioni della rete. Gli operatori di servizio possono intercettare le richieste di rete e modificare le risposte ma per garantire la sicurezza dei dati e la sicurezza della rete, è necessario utilizzare il protocollo sicuro.
Infatti il protocollo di comunicazione HTTPS è crittografato e rende quindi sicuro lo scambio dei dati. HTTPS garantisce l’autenticazione del sito Web visitato, la protezione della privacy e l’integrità dei dati scambiati durante la comunicazione. Protegge dagli attacchi di possibili intrusi (sia persone fisiche come ad esempio hacker che bot dannosi, ovvero software creati per rubare dati o inviare virus). Dato che questo protocollo opera con una crittografia bidirezionale tra un client e un server proteggendo da intercettazioni e manomissioni della comunicazione, ci fornisce una ragionevole garanzia che stiamo comunicando senza interferenze esterne con il sito Web in questione.
Altre aziende che fanno uso delle PWA
Oltre Twitter vi sono altri grandi attori del web che fanno ricorso alle PWA. Qui ve ne sono alcuni pubblicati da Google. Tra le maggiori citiamo Pinterest, Alibaba, Lancome e The Home Depot.
HTML
Dato che lo abbiamo citato sopra e che lo ritroveremo ora parlando della tecnologia AMP, diamo una breve descrizione di cosa è HTML per chi non lo sapesse.
HTML sta per HyperText Markup Language ed è il linguaggio di programmazione standard per i documenti e le pagine web, ovvero per quegli elementi che sono progettati per essere visualizzati in un browser web. Possiamo affermare che gli elementi HTML sono i mattoni delle pagine web che navighiamo.
Cosa significa e cosa è una AMP?
Una AMP è una pagina mobile accelerata, infatti AMP sta per “Accelerated Mobile Page”. È una pagina web ottimizzata per dispositivi mobili, progettata per essere caricata all’istante. Si tratta di una soluzione di caricamento rapida e senza problemi che viene sviluppata tenendo presente l’esperienza dell’utente. Presentata come progetto open source, la tecnologia AMP è stata integrata da Google a febbraio 2016. Questo sito stesso usa la tecnologia AMP.
Nel 2016, The Guardian, il noto quotidiano Inglese, ha annunciato che la loro piattaforma era ora disponibile come AMP. Per aiutare i lettori a capire come questa tecnologia funzionava, hanno visualizzato lo stesso articolo sia come versione Web che come versione AMP.
Potevano notarsi alcune piccole differenze ma di certo la visualizzazione AMP era di gran lunga più rapida. V. immagine qui sotto.
Caratteristiche
La tecnologia AMP si basa sulla riduzione delle funzionalità non necessarie in modo che la app visualizzi immediatamente i contenuti essenziali. I dati possono essere ridotti fino a dieci volte. Le tre componenti essenziali di AMP sono AMP HTML, AMP Components e AMP Cache.
AMP HTML
Si tratta una versione semplificata del normale HTML. AMP HTML non consente alcuni tag ed elementi di HTML (ad esempio, moduli). Per chi avesse conoscenze tecniche e volesse approfondire può vedere le caratteristiche del markup richiesto da AMP cliccando qui.
Componenti AMP
I componenti AMP sono gli script che consentono di fare a meno di JavaScript. L’idea di AMP è quella di sbarazzarsi di tutti gli script JavaScript poiché rende più lento il caricamento delle pagine web. JavaScript (anche abbreviato JS) è appunto un linguaggio di programmazione usato per produrre applicazioni web dal lato client (quindi non dal lato server). Ciò significa che il codice JavaScript è scritto in una pagina HTML. Quando un utente richiede una pagina HTML con JavaScript, lo script viene inviato al browser ed è compito del browser eseguirlo.
Dato che JavaScript consente la riproduzione anche di varie funzionaliltà grafiche, eliminarlo significa fare a meno di animazioni, modificare il layout, perdere magari anche dati di analisi, suggerimenti di completamento automatico o annunci pubblicitari. Tuttavia, esiste una vasta libreria di componenti che consentono di implementare queste e molte altre funzionalità su AMP. Per chi volesse approfondire può cliccare qui.
AMP Cache
Questa è una rete di distribuzione di contenuti basata su proxy che recupera e memorizza nella cache il contenuto della pagina. AMP Cache ti consente come proprietario dell’app di introdurre facilmente gli aggiornamenti delle pagine. Ottimizza e, se necessario, modifica l’AMP.
Chi usa AMP?
AMP è una tecnologia di largo uso. Tra i maggiori attori del web che ne fanno uso citiamo: Musement, RCS MediaGroup, CNBC, The Washington Post.
Similitudini tra PWA e AMP
Sia PWA che AMP sono tecnologie di visualizzazione di pagine Web su dispositivi mobili. Entrambi sono creati per migliorare l’esperienza dell’utente.
Entrambi hanno l’obiettivo di ridurre i tempi di caricamento della pagina sui dispositivi mobili. Mentre AMP si presenta come un metodo leggermente più efficace in termini di velocità di caricamento rispetto alla tecnologia PWA, la differenza tra i tempi di caricamento non è tuttavia così significativa, anzi, in molti casi è proprio impercettibile.
Entrambe le tecnologie sono attivamente supportate da Google. Google Developers dedica una pagina sia per PWA che per AMP. Ciò che interessa a Google, e maggiormente a noi come proprietari di siti web, è che il nostro sito carichi velocemente anche sui dispositivi mobili. Questo fa una grande differenza, infatti, il tempo stimato di attesa o meglio di pazienza di un utente quando visualizza un sito su uno smartphone è di appena 3 secondi, dopodiché chiude e difficilmente ritornerà mai su quel sito.
Vi sono altre similitudini tra le due tecnologie ma questa è la più importante.
Differenze tra PWA e AMP
Aspetto
Le PWA sono molto più simili alle app mobili native rispetto alle pagine AMP.
Sviluppo
Nel caso di PWA, il codice dell’applicazione viene scritto da zero o faceno ricorso ad alcune parti del codice esistente per l’applicazione iniziale web.
Nel caso di AMP, il codice esistente di una pagina Web è privo di CSS e JS non necessari in modo che la pagina Web si carichi più velocemente. Quindi, non è utilizzato il codice esistente.
Esperienza Utente
Le PWA offrono un’esperienza utente decisamente superiore. Hanno notifiche push, un’icona della schermata principale e nessuna scheda del browser. Inoltre, sono molto più facili da scaricare e di dimensioni inferiori rispetto a una app mobile normale. Le PWA si caricano più velocemente di una normale versione Web perché sono integrate con App Shell. Quest’ultima tecnologia – App Shell – è la parte di codice HTML, CSS e JavaScript minimi richiesti per alimentare l’interfaccia utente, che viene poi memorizzata nella cache offline. Per questo motivo, le PWA possono essere utilizzate quando la connessione di rete è inattiva.
Le AMP possono caricare la pagina in tempi leggermente più brevi rispetto alle PWA. Tuttavia, questo è l’unico vantaggio che offrono a livello di esperienza utente. Come già detto, a differenza delle PWA, le AMP non possono funzionare offline.
Prestazioni
Qui l’unico punto di discussione è l’ottimizzazione per i motori di ricerca, ovvero SEO e le cose si complicano, ovvero non possiamo dire chi è nettamente superiore.
Le AMP paiono vincere la competizione perché Google elenca queste pagine nel carosello delle storie principali, che può aumentare la percentuale di clic. Si tratta di quegli articoli che Google elenca nei nostri smartphone in base alle nostre preferenze.
Se è vero che le PWA sembrano non avere alcun vantaggio diretto per la SEO, tuttavia, una migliore esperienza utente si traduce in tassi di fidelizzazione più elevati, che aiutano con l’ottimizzazione SEO. Utenti soddisfatti, infatti, diventano utenti fedeli che usano e quasi sempre divulgano i contenuti di quel sito o app verso altri potenziali utenti.
Dispositivi
Le PWA non sono supportate allo stesso modo su tutti i dispositivi, è infatti facile riscontrare lievi inconvenienti quando vengono visualizzate su iOS. Inoltre, non supportano tutte le funzionalità hardware, come Bluetooth, NFC, GPS o accelerometri.
Le AMP, invece, sono supportate da tutti i principali browser su tutti i dispositivi, anche quelli iOS.
Cosa scegliere a seconda del tipo di app
Le PWA funzionano perfettamente per le app che richiedono interazioni dell’utente. Siti Web di e-commerce, social media o piattaforme di apprendimento online in cui la app deve essere reattiva e costantemente aggiornata è meglio che usino questa tecnologia. Questo è il motivo per cui Twitter utilizza un PWA, ad esempio.
Le AMP sono più adatte a piattaforme che pubblicano contenuti, come riviste, giornali online, blog. Le AMP caricano i contenuti all’istante, ma le opportunità di interazione sono limitate. Tuttavia, grandi testate giornalistiche, come appunto il citato The Guardian, hanno deciso di impiegare la tecnologia AMP.
Perché le PWA sono preferibili alle pagine Web
In altre parole, perché preferire una app PWA ad un tradizionale sito web che pure visualizza bene su apparecchi mobili?
Se accedi ad una pagina Web su dispositivi mobili, ti ritrovi a dover gestire le schede del browser, i tempi di caricamento lenti e i fastidiosi popup (direi orribili, invasivi e odiati popup!). Se il tuo dispositivo ha uno schermo relativamente piccolo o una connessione di rete lenta, navigare su un sito di questo tipo diventa insopportabile benché sia assolutamente leggibile su dispositivo mobile.
Questo problema è risolto dalle app web progressive, PWA. In pochi clic, installi la app sul tuo telefono e inizi a utilizzarla. Non è necessario digitare un collegamento URL (nome del sito punto estensione), nessuna scheda del browser e nessuna schermata popup. La app funziona velocemente anche se la connessione di rete non è attiva.
Bene, i vantaggi di questa soluzione sono evidenti, ma sono anche migliori delle app mobili native?
Vantaggi delle PWA rispetto alle app mobili native
Per utilizzare un’applicazione mobile nativa è necessario scaricarla da App Store o da Google Play. Questo comporta che bisogna anche avere spazio per poterla scaricare sul proprio dispositivo mobile.
Inoltre, le PWA sono installate e pronte per l’uso in pochi secondi. La dimensione del file è piccola (anche se è destinata ad aumentare mentre si fa uso della app e i dati si memorizzano nella cache). Tuttavia, la dimensione dei dati memorizzati nella cache dipende dalla quantità di spazio di archiviazione gratuito disponibile sul dispositivo e non dalla sua memoria interna.
Questi sono vantaggi indiscutibili delle PWA rispetto alle app native. Questo però non significa che una PWA può sostituire in tutti i casi una app mobile nativa.
Generalmente, le PWA hanno un costo inferiore alle app mobili native, tuttavia, vi sono funzionalità per le quali è necessario fare ricorso alle app native.
Se è necessario tenere sotto controllo ogni singola funzione di un sistema complesso allora è meglio sviluppare una app nativa. Le app native sono specifiche a seconda della piattaforma, per questo abbiamo app per Android, app per iOS, app per Windows. Non tutti i browser su tutti i dispositivi sono in grado di visualizzare perfettamente le PWA. Le applicazioni native offrono più opportunità in termini di interfaccia utente e dell’esperienza che questo fa durante il suo uso. Ad esempio, le PWA non consentono di utilizzare il 3D.
Ancora, va considerato che alcune funzioni di uno smartphone sono disponibili per le app mobili native e non lo sono per le PWA. Ad esempio, una PWA non può utilizzare il Bluetooth, che è necessario per connettersi con dispositivi intelligenti o utilizzare la geolocalizzazione interna.
Perché le AMP sono migliori dei siti web tradizionali
Come accennato in precedenza, i siti web tradizionali adattati ai dispositivi mobili (anche chiamate app web – non confondentele con le PWA!) sono lenti e scomodi, quando sono utilizzati appunto su smartphone.
Eliminando tutti i componenti Web non necessari per una buona esperienza utente, le pagine mobili accelerate (AMP) risolvono questo problema. Le AMP hanno prestazioni 4 volte più veloci e utilizzano 10 volte meno dati delle normali pagine Web. Durante la visualizzazione mobile, l’utente ha interesse a capire i contenuti del vostro sito, non è assolutamente interessato ad apprezzarne il layout grafico, che lo rallenta e costituisce un impaccio.
Perché le AMP non sono meglio della app native
Sfortunatamente, le AMP non possono sostituire completamente le app mobili native. Non possono essere installate nella schermata principale dello smartphone, hanno bisogno di usare le schede del browser e la loro funzionalità è limitata ad alcuni elementi di base.
Tuttavia, per un giornale online o per un sito Web informativo, come un blog, è meglio utilizzare AMP piuttosto che una app mobile nativa. Queste infatti, non richiedono alcuna funzionalità aggiuntive per la visualizzazione del contenuto della pagina.
Conclusioni
AMP e PWA sono potenti tecnologie che aiutano nella visualizzazione e quindi uso di contenuti web su smartphone. Per riassumere possiamo dire:
Le AMP sono più facili, veloci ed economiche da sviluppare
Le PWA offrono più vantaggi soprattutto quando è necessaria l’interazione con l’utente. Se ad esempio la mia applicazione richiede che l’utente fissi degli appuntamenti presso il mio studio, farò una PWA e non una AMP, stessa cosa se l’utente deve inviare degli ordini. Mentre sicuramente farò una AMP se il mio sito è un blog.
Tuttavia, è importante tenere presente che nessuna di queste tecnologie può coprire ogni esigenza. Anche l’utilizzo congiunto di AMP e PWA potrebbe non soddisfare tutte le vostre esigenze. A volte potrebbe essere necessario scegliere tipi di software più convenzionali. Questi progetti vanno studiati caso per caso affidandosi a seri professionisti. Non si possono demandare a chi non è in grado di gestirli.
Operando in questo settore da tanti anni, la nostra opinione è che le pagine mobili accelerate (AMP) sono una buona tecnologia ma troppo semplice e con funzioni limitate, per cui le PWA sono invece più complete e rappresentano una soluzione in generale migliore.
Queste 3 domande vi aiuteranno a capire se avete bisogno di una app nativa o di una PWA
- Preferisci concentrare tutto solo su dispositivi mobili e quindi non fare uso di una piattaforma desktop o web?
- Non vuoi consentire ai tuoi utenti di accedere alla tua app mediante un browser web?
- Hai necessità di avere funzionalità avanzate per dispositivi mobili? Ad esempio, scansione impronte digitali, Bluetooth, geolocalizzazione interna?
Nel caso in cui la risposta a queste 3 domande sia affermativa, allora sarà meglio una app nativa rispetto ad una PWA.
Se avete esigenze in tal senso, non esitate a contattarci: RP CONSULTING SRL, oppure tramite la pagina contatti di questo blog.