Indice:
- Cos’è una Progressive Web App?
- Principali caratteristiche delle Progressive Web App
- Vantaggi di una PWA
- Limiti di una PWA
- Come creare e installare una Progressive Web App
- 5 esempi di PWA più famose
- Conclusione
Le mobile app sono diventate uno strumento essenziale nel kit di ogni azienda che intende offrire un’esperienza sorprendente e raggiungere ottimi risultati.
Negli ultimi anni, si sta diffondendo un nuovo tipo di app, le Progressive Web Apps (PWA), che combinano funzioni delle app native e accessibilità dei siti web.
In questo articolo ti forniremo una panoramica su cosa sono le app PWA, quali vantaggi e limiti portano con sé e condivideremo alcuni esempi di marchi esistenti che attualmente le utilizzano.
Cos’è una Progressive Web App?
Le Progressive Web Applications (PWA) sono software aventi caratteristiche tipiche delle app classiche, ma sviluppate attraverso tecnologie web quali HTML, CSS e JavaScript.
Le PWA sfruttano l’enorme ecosistema web – che include plug-in, community e relativa facilità di distribuzione e mantenimento di un sito Web – e lo intersecano con le funzionalità delle native app – come la possibilità di attivare notifiche push o di lavorare offline.
Il termine “progressive” si riferisce al fatto che queste app vengono costruite e migliorate progressivamente attraverso l’utilizzo di API moderne, per offrire funzionalità avanzate, affidabilità e installabilità, e raggiungere chiunque, ovunque e su qualsiasi dispositivo con un’unica base di codice.
Questo rende lo sviluppo di una PWA molto più rapido e semplice di quello di una native app, per le quali è necessario usare un linguaggio di programmazione diverso e specifico per una piattaforma e dispositivo (iOS o Android).
Principali caratteristiche delle Progressive Web App
Per essere definita “progressive”, una web app deve presentare le seguenti caratteristiche:
- Utilizzo multi-platform – tutti gli utenti devono poter utilizzare il prodotto indipendentemente dal browser e dal dispositivo sul quale lo utilizzano (telefoni cellulari, tablet, laptop, TV, e così via)
- Installabilità – le PWA possono essere installate e avviate dalla schermata iniziale del dispositivo, dal dock, dalla barra delle applicazioni o dallo scaffale dell’utente
- Utilizzo offline – le progressive web app possono essere utilizzate anche quando non si è connessi alla rete, offrendo agli utenti un’esperienza sempre più simile a quella di un’app nativa
- Rilevabilità – Anche se sviluppate sul browser, grazie al W3C (World Wide Web Consortium) manifest le PWA vengono identificate come applicazioni a tutti gli effetti e i contenuti possono essere trovati attraverso i motori di ricerca
- Estetica – L’aspetto delle progressive web app richiama quello di un’app normale, il che le rende più fluide nell’utilizzo rispetto ad un normale sito web
- Progressività – le PWA offrono una user experience eccellente sui browser più recenti e funzionano bene anche su browser più obsoleti
- Sicurezza – le PWA vengono esposte su protocollo HTTPS e le connessioni tra utente, app e server sono protette da eventuali terze parti che tentano di accedere a dati sensibili
- Condivisione tramite link – le PWA possono essere condivise da chiunque e con chiunque tramite link
- Indipendenza dagli store – a differenza delle app native che devono soddisfare requisiti spesso stringenti degli store per poter essere pubblicate, le PWA garantiscono maggiore libertà nello sviluppo e non devono rispettare limitazioni particolari
Vantaggi di una PWA
Molte organizzazioni – sia private che pubbliche – stanno passando alle PWA perché offrono una serie di vantaggi e un maggiore coinvolgimento dell’utente finale.
1. Tempi di sviluppo più brevi
Gli sviluppatori hanno accesso a opzioni di design che si adattano a più piattaforme e dimensioni dello schermo, attraverso funzionalità reading e reactive.
Inoltre, il service worker offre al team di sviluppo una maggiore governance sul modo in cui l’applicazione naviga in rete.
2. Costi inferiori
L’essere indipendenti dagli store consente alle PWA di adattarsi a varie piattaforme e di arrivare ad enormi risparmi perché non è necessario assumere due team di sviluppo iOS e Android separati che lavorano su ciascuna app nativa contemporaneamente, le PWA sono dotate di decine di framework e librerie e il team dedica meno tempo allo sviluppo, che è anche un fattore chiave per aumentare i costi di qualsiasi progetto di sviluppo software. Una sequenza temporale del progetto più breve ci porta al vantaggio successivo di seguito.
Leggi di più: Sviluppo software: principali metodologie e framework per scegliere il giusto partner tecnologico
3. Tempi di commercializzazione più breve
Avere un team di sviluppo software significa che puoi portare soluzioni su più piattaforme contemporaneamente. Inoltre, uno dei vantaggi dell’indipendenza dalla piattaforma delle PWA è che non è necessario inviare l’app all’App Store per l’approvazione. Questo processo di candidatura può essere noioso e richiedere molto tempo. Tuttavia, con un’app più reattiva, adattiva e ottimizzata, le aziende possono portare i prodotti sul mercato più velocemente che mai.
4. Manutenzione più facile
Poiché le PWA sono indipendenti dai servizi di distribuzione tramite Google Play, l’App Store o persino gli sviluppatori Microsoft, non devono rispettare requisiti rigorosi per mantenere la loro app. Questa “libertà” rende più facile per i proprietari regolare e aggiornare le proprie app in base alle esigenze dei clienti.
5. Prodotti e servizi disponibili anche offline
Essendo che le PWA possono essere memorizzate nella cache dal browser Web e utilizzate anche offline, consentono alle aziende di mostrare i propri prodotti e servizi anche quando gli utenti non sono connessi a Internet, aumentando i tassi di coinvolgimento e portando potenzialmente a maggiori entrate.
6. Prestazioni migliori
Poiché le PWA utilizzano i cosiddetti “service worker” – file JavaScript che vengono eseguiti separatamente dal thread del browser principale e controllano in modo proattivo la memorizzazione nella cache delle risorse – possono offrire prestazioni migliori rispetto alle tradizionali app Web ed essere nettamente più veloci.
Leggi anche: Sviluppare un’app aziendale: 6 motivi strategici per cui è vantaggioso
Limiti di una PWA
Come ogni cosa, anche queste le progressive web app presentano dei limiti, che ad oggi sono fondamentalmente 2:
1. Compatibilità con iOS
Da iOS 11.3 è possibile eseguire PWA su dispositivi Apple, ma non su dispositivi meno recenti e il limite più grande si lega alle notifiche.
Su iOS non è possibile attivare le notifiche sul proprio dispositivo, per questo le PWA non sostituiscono ancora del tutto le app native, almeno sui dispositivi Apple.
Inoltre, Apple non consente alle PWA di accedere a molte funzionalità importanti, tra cui Touch ID, Face ID, ARKit, Bluetooth, seriale, Beacon, sensore altimetro e persino informazioni sulla batteria.
2. Problemi con i dispositivi legacy
Le PWA esistono da pochi anni, quindi i dispositivi mobili più vecchi con browser Web obsoleti non le supportano troppo bene. Sebbene questo problema si risolverà inevitabilmente da solo in futuro, potrebbe essere fonte di reclami da parte dei clienti per alcune aziende.
Come creare e installare una Progressive Web App
Per sviluppare una PWA sono necessari:
- Strumenti: La tecnologia più conosciuta per sviluppare PWA è Angular. Altri includono React e Polymer.
- HTTPS: Avrai bisogno di un server con una connessione HTTPS. Questo assicura che i dati dell’utente siano al sicuro e aggiunge un ulteriore livello di sicurezza al tuo sito.
- Shell dell’applicazione: Fornisce una buona prima impressione quando l’app viene caricata. In parole più semplici, questo è ciò che l’utente vede quando interagisce con la tua app per la prima volta.
- Service worker: Questa è una delle tecnologie chiave alla base delle PWA. Aiutano a supportare il lavoro offline della tua app, eseguono la memorizzazione nella cache avanzata ed eseguono attività in background. Gli addetti all’assistenza possono completare le attività anche quando la tua PWA non è in esecuzione.
Di seguito, ti mostreremo come installare una PWA sul tuo computer o sul tuo dispositivo mobile.
Sul Computer
- Apri il tuo browser
- Inserisci il nome della pwa che desideri installare.
- Clicca sull’indirizzo web
- In alto a destra sulla barra degli indirizzi, fai clic su “Installa” .
- Segui le istruzioni sullo schermo per installare la PWA.
- Suggerimento: alcune app offrono collegamenti alle funzionalità. Per trovare un elenco di collegamenti alle app su un computer Windows, fai clic con il pulsante destro del mouse sulla PWA sul dock.
Su Android
- Apri il browser sul tuo dispositivo.
- Inserisci il nome della pwa che desideri installare
- Clicca sull’indirizzo web
- In alto a destra sulla barra degli indirizzi, fai clic su “Installa” .
- Segui le istruzioni sullo schermo.
Su iOS
- Apri Safari sul tuo dispositivo.
- Inserisci il nome della pwa che desideri installare
- Clicca sull’indirizzo web
- In basso a destra fai clic sul tasto “condividi”
- Clicca su “Aggiungi alla schermata home”
5 esempi di PWA più famose
Di seguito una lista di Progressive Web App in vari settori, utilizzate ogni giorno da milioni di utenti nel mondo.
Facebook – Facebook Progressive Web App
La nuova app di Facebook è stata reintrodotta silenziosamente nel 2021 ed è ora una PWA. Sembra che Meta (il nuovo nome della società di Zuckerberg) ora concentrerà un’attenzione più strategica sulla propria PWA, con TechCrunch che riporta che la società sta pianificando di integrare i dispositivi VR Oculus con la loro app Web progressiva attualmente in 2D.
Starbucks – Starbucks Progressive Web App
Con la PWA, i clienti possono visualizzare il menu, aggiornare il carrello e aggiungere articoli, il tutto offline. Inoltre, l’app è super reattiva, veloce e ha un’interfaccia utente piacevole che include transizioni fluide che riflettono ciò che gli utenti trovano sull’app nativa.
L’app è intuitiva e, se un utente è online, consente al cliente di scegliere menu e voci di prezzo in base alla posizione. Inoltre, il cliente può inserire il proprio ordine sull’app prima di unirsi alla linea di ritiro.
Uber – Uber Progressive Web App
Con l’espansione dell’azienda in nuovi mercati, il sito web di Uber è stato ricreato da zero come PWA per offrire un’esperienza di prenotazione paragonabile all’app mobile nativa.
Il cuore della web app pesa solo 50kB consentendo di caricarla in 3 secondi anche su una rete lenta come la 2G.
Spotify – Spotify Progressive Web App
Dopo la disputa con Apple che voleva imporgli una commissione del 30% sull’app store nel 2017, Spotify ha sviluppato rapidamente la propria app Web progressiva per iOS, aggirando la commissione di terze parti e continuando a far crescere la sua base di abbonati.
La PWA è molto più veloce, si possono ascoltare i brani anche offline e l’interfaccia utente è leggermente diversa dalle app native.
Pinterest – Pinterest Progressive Web App
Quando l’azienda ha lanciato per la prima volta la sua app mobile, ha scoperto un debole assorbimento. Solo l’1% dei loro utenti mobili si è convertito in clienti effettivi che hanno installato, registrato o effettuato l’accesso all’app.
Da quando ha implementato la sua PWA nel 2019, la piattaforma ha aumentato il tempo dei visitatori fino al 40% rispetto al suo sito web mobile. Inoltre, un’altra statistica notevole è stata che hanno registrato un aumento del 44% del tasso di entrate pubblicitarie e un aumento del 60% del coinvolgimento degli utenti.
Un altro notevole miglioramento è la riduzione del tempo di caricamento a 5,6 secondi dai 23 secondi precedenti.
Conclusione
Tenendo presente che le PWA sono una novità nel settore e non sono state ancora completamente utilizzate, possono essere un’ottima aggiunta al tuo toolkit.
Con le ultime tecnologie e gli strumenti giusti, iniziare con le PWA può in definitiva aumentare le vendite e il guadagno monetario per il tuo prodotto sia come individuo che come organizzazione.
Con le sue numerose funzionalità, tra velocità, fruibilità offline e user interface simile alle app native, ciò che offre ai tuoi utenti è un’esperienza eccezionale e soddisfacente.
Leggi anche: L’importanza della User Experience nello sviluppo di Web App
