La guida definitiva alle app Web progressive nel 2022, con 50 esempi di PWA

Interessato a creare un'app web progressiva? Questa guida ti dirà tutto ciò che devi sapere, insieme a 50 esempi delle migliori PWA sul mercato!

Da anni predichiamo senza sosta: serve un'app nativa. C'erano buone ragioni per questo, e lo sosteniamo ancora.

Le nostre piattaforme News, Canvas e Canvas per l'eCommerce hanno aiutato i nostri clienti a migliorare notevolmente l'UX mobile, aumentare il traffico, fidelizzare e aumentare le entrate. Le app native funzionano in modo eccellente per costruire una relazione più profonda con la tua base di utenti principali e sono un must per qualsiasi marchio che valorizzi la lealtà, il coinvolgimento e la fidelizzazione.

Tuttavia, niente è perfetto. Le app native non sostituiscono le fantastiche esperienze web.

Le app native sono rilevanti solo per coloro che, beh, hanno installato l'app. Non fanno nulla per i nuovi visitatori che ti visitano sul Web per la prima volta, per gli utenti occasionali che scendono di tanto in tanto e non sono ancora abbastanza impegnati per installare l'app o per i clienti che si trovano sul desktop.

Anche questi potenziali clienti sono assolutamente cruciali per il successo. Le prime impressioni contano molto e le app native aiutano sempre nelle prime fasi della canalizzazione. Devi fornire un'esperienza veloce e fluida per l'intero viaggio. Come?

Inserisci le app Web progressive (PWA). Se hai un sito web ed è estremamente importante per te o per la tua azienda, hai bisogno di una PWA.

In questo articolo definiremo le app Web progressive, discuteremo dei loro vantaggi più importanti e condivideremo 50 esempi delle migliori PWA su Internet.

Concluderemo con alcuni suggerimenti su come creare una PWA e su come funzionano con le app mobili native per creare una combinazione vincente di UX mobile. Entriamo. Entro la fine di questo articolo, saprai tutto ciò che devi sapere per iniziare il tuo progetto di app web progressiva.

Inizieremo con la domanda fondamentale: cos'è una PWA?

Che cos'è esattamente un'app Web progressiva? Definiamo una PWA

Le app Web progressive combinano il meglio del Web con funzionalità che in precedenza erano possibili solo su app native.

Le PWA risiedono nel browser come un sito Web tradizionale e sono completamente connesse all'infrastruttura Web di collegamenti e indici dei motori di ricerca. Come le app native, anche se possono essere avviate da un'icona della schermata iniziale, inviare notifiche push al dispositivo dell'utente, caricarsi in una frazione di secondo ed essere create per funzionare offline.

Le app Web progressive non sono separate dal tuo sito. Sono un miglioramento del tuo sito che lo aggiorna con le migliori pratiche attuali e sfrutta la tecnologia Web all'avanguardia come gli operatori dei servizi per fornire un'esperienza simile a un'app da un browser mobile.

Forse non sei ancora sicuro di cosa siano esattamente .

Questo è comprensibile, poiché il termine è molto diffuso ma le definizioni solide sono sfuggenti. Diamo un'occhiata alla storia del termine per chiarire le cose.

La definizione originale di un'app Web progressiva

Il termine "Progressive Web App" è stato coniato nel 2015 da Francis Berriman e dall'ingegnere di Google Alex Russell. Stavano osservando l'emergere di una nuova classe di applicazioni web e durante la cena hanno deciso di definirle e nominarle.

Hanno escogitato i seguenti criteri:

• Reattivo: per adattarsi a qualsiasi fattore di forma
• Indipendente dalla connettività : progressivamente migliorato con Service Workers per consentirgli di lavorare offline
• Interazioni simili ad app: adotta un modello di applicazione Shell + Content per creare navigazioni e interazioni app
• Fresco : in modo trasparente e sempre aggiornato grazie al processo di aggiornamento di Service Worker
• Sicuro : servito tramite TLS (un requisito di Service Worker) per prevenire lo snooping
• Rilevabili : sono identificabili come "applicazioni" grazie ai manifesti W3C e all'ambito di registrazione degli operatori di servizio che consentono ai motori di ricerca di trovarli
• Riattivabile : può accedere alle UI di riattivazione del sistema operativo; ad es. Notifiche push
• Installabile : alla schermata iniziale tramite le istruzioni fornite dal browser, consentendo agli utenti di "conservare" le app che ritengono più utili senza il fastidio di un app store
• Collegabili : significa che sono senza attrito, installazione zero e facili da condividere. Il potere sociale degli URL è importante.

Puoi vedere come questi criteri soddisfano la parte "app web" della definizione.

Per molti anni aziende come noi e altri hanno creato piattaforme che hanno consentito alle aziende di creare esperienze di app con tecnologie web. Funziona alla grande fino ad oggi, ma ci sono dei compromessi. Per creare un'esperienza app nativa eccezionale, perdi la rilevabilità e la collegabilità del Web.

Nuove tecnologie web come gli operatori dei servizi (ne parleremo più avanti) sono emerse e hanno cambiato le cose, consentendo agli sviluppatori di creare esperienze che prendevano il meglio dell'esperienza utente nativa delle app e lo inserivano nel browser, mantenendo così tutti i vantaggi del web.

Non era più necessario accettare un'esperienza utente web mobile mediocre, spingendo le persone a scaricare le tue app native per ottenere il vero affare. Potresti offrire un'esperienza mobile eccezionale attraverso gli App Store e il Web, a tutti coloro che hanno interagito con il tuo marchio online.

Questo è ciò che hanno osservato Berriman e Russell. Non hanno inventato niente, hanno notato un cambiamento nel web e gli hanno dato il nome.

E la parte "progressista"?

In questo contesto significa che le app sono costruite con un miglioramento progressivo . Questa è una tecnica di progettazione incentrata sulla creazione di un'esperienza "di base" che funziona per tutti ma che si aggiorna e migliora su dispositivi più avanzati. L'esperienza di un'app Web progressiva non è necessariamente la stessa per tutti gli utenti, si adatta in base alla potenza del loro dispositivo e alle autorizzazioni che concedono.

Quindi è sufficiente la definizione di Berriman e Russell? Il problema è che poche PWA soddisfano effettivamente tutti questi criteri. Sono più come una lista dei desideri, o un obiettivo a cui mirare, o un caso modello.

La definizione di Google di un'app Web progressiva

Microsoft è da tempo entusiasta delle PWA. Apple è stata convincente e ora è (soprattutto) dentro. Tra le grandi tecnologie, però, è stato Google a sostenere davvero le PWA sin dall'inizio.

Detto questo, Google stesso non sembra essere sicuro al 100% della definizione. Nel 2015 hanno pubblicato una lista di 10 caratteristiche, poi l'hanno ridotta a sei, quindi ne hanno aggiunte tre di nuove.

Attualmente, la definizione di Google di un'app Web progressiva include tre pilastri. Nella loro pagina introduttiva, affermano che le PWA sono:

“Applicazioni Web progettate in modo che siano capaci, affidabili e installabili . Questi tre pilastri li trasformano in un'esperienza che sembra un'applicazione specifica della piattaforma"

Questo è più utile, ma non così utile in quanto è così ampio. Allude al punto chiave, tuttavia, che le PWA stanno portando sul Web esperienze tradizionalmente associate esclusivamente a piattaforme native.

La definizione tecnica di un'app Web progressiva

Un terzo modo in cui possiamo definire una PWA è specificando i criteri puramente tecnici, piuttosto che UX.

Questo è ciò che lo sviluppatore web e autore Jeremy Keith ha tentato nel suo post sul blog del 2017 What is a Progressive Web App? .

Keith pensa che la confusione sulle definizioni delle PWA sia infondata e che fondamentalmente debbano essere soddisfatti tre criteri:

1. HTTPS: le PWA devono essere eseguite su server sicuri che utilizzano HTTPS. Gli operatori dei servizi sono essenziali per il loro potenziale e possono essere utilizzati solo se si dispone di HTTPS.
2. Un Service Worker: essenzialmente un file JavaScript che viene eseguito separatamente dal "thread" del browser principale e consente allo sviluppatore il controllo su come l'app gestisce le richieste di rete e la memorizzazione nella cache. Questo aiuta a guidare la velocità impressionante e le capacità offline delle PWA.
3. Un manifesto dell'app Web: un file JSON che fornisce una descrizione dell'applicazione al browser, inclusi dettagli come il nome, l'autore, l'icona, la descrizione e le risorse per eseguirla. Ciò garantisce che l'applicazione sia rilevabile.

Keith continua osservando che questa è una definizione minimale, essenziale. Le PWA sono in grado di fare molto di più, ma devono soddisfare questi tre criteri tecnici per fare il taglio.

Quindi abbiamo visto la definizione osservativa/aspirativa originale, la definizione basata sull'esperienza utente di Google e una definizione tecnica minimalista. Cosa possiamo supporre? Anche se potrebbe esserci ancora una piccola ambiguità, ora abbiamo una buona idea di cosa sia un'app Web progressiva.

Una PWA è un sito Web moderno, sicuro e a caricamento rapido che utilizza tecnologie Web all'avanguardia per ottenere queste caratteristiche. A differenza dei siti Web tradizionali, si comporta e si sente per l'utente come un'app nativa e "sfugge" alla scheda del browser nel processo.

Come dice Alex Russell:

"Queste app non sono impacchettate e distribuite nei negozi, sono solo siti Web che hanno preso tutte le vitamine giuste"

Questo è un ottimo modo per dirlo. Le PWA sono l'ultima generazione del web. Sono app Web in grado di sfruttare il potenziale della moderna tecnologia dei browser. Trasformando il tuo sito Web in un PWA, gli dai le "vitamine" necessarie per funzionare in modo ottimale.

Passiamo ora ai vantaggi della creazione di un'app Web progressiva, prima di esaminare 50 esempi di PWA per ispirare il tuo progetto.

Vantaggi dell'app Web progressiva

Abbiamo affermato in precedenza che se hai un sito Web ed è in qualche modo legato al successo della tua attività, devi creare una PWA.

Può sembrare un'affermazione audace, ma è la verità. Come mai?

In poche parole, non costruendo una PWA lascerai probabilmente clienti, ricavi e crescita sul tavolo. Come affermano Pete LePage e Sam Richard del team web di Google:

“I numeri non mentono! Le aziende che hanno lanciato Progressive Web App hanno ottenuto risultati impressionanti. Ad esempio, Twitter ha registrato un aumento del 65% delle pagine per sessione, il 75% in più di Tweet e una diminuzione del 20% della frequenza di rimbalzo, il tutto riducendo le dimensioni della propria app di oltre il 97%. Dopo essere passato a una PWA, Nikkei ha registrato 2,3 volte più traffico organico, il 58% in più di abbonamenti e il 49% in più di utenti attivi giornalieri. Hulu ha sostituito l'esperienza desktop specifica della piattaforma con un'app Web progressiva e ha registrato un aumento del 27% delle visite successive"

Questo graffia solo la superficie.

Diamo un'occhiata ai risultati che altri noti marchi hanno ottenuto come diretta conseguenza del lancio delle PWA.

• Alibaba ha incrementato le conversioni web mobile del 76%, ha visto il 14% di utenti attivi in ​​più su iOS e il 30% su Android
• Debenhams ha registrato un aumento del 40% delle entrate mobili, un aumento del 20% delle conversioni e una crescita superiore al mercato online
• Pinterest ha registrato un aumento del 40% del tempo totale speso, una crescita del 44% delle entrate pubblicitarie generate dagli utenti e il 60% in più di coinvolgimento principale
• Forbes ha ottenuto un aumento del 43% delle sessioni per utente, un miglioramento del 20% nella visibilità degli annunci e il 100% in più di coinvolgimento
• BMW ha registrato un aumento del 30% del CTR sul proprio sito di vendita, tempi di caricamento 4 volte più rapidi, una crescita del 50% degli utenti mobili e il 49% in più di traffico organico
• MakeMyTrip ha aumentato la velocità della pagina del 38%, triplicato i tassi di conversione e ha visto un aumento del 160% delle sessioni di acquisto
• AliExpress ha incrementato i tassi di conversione per i nuovi utenti del 104% (+82% su iOS) e ha visto un aumento del 74% del tempo trascorso per sessione con 2 volte più pagine visitate per sessione
• Housing.com ha registrato il 38% di conversioni in più, una sessione media più lunga del 10%, una frequenza di rimbalzo inferiore del 40% e un tempo di caricamento della pagina complessivamente più rapido del 30%.
• Wego ha triplicato il CTR degli annunci e ha registrato il 26% di visitatori in più e il 95% di conversioni in più in generale. Su iOS, hanno ottenuto un impressionante aumento del 50% della conversione e un aumento del 35% della durata della sessione
• Treebo ha registrato un aumento di 4 volte delle conversioni anno dopo anno. Utenti ripetuti convertiti 3 volte in più.
• Tinder ha più che dimezzato i tempi di caricamento da 11,91 secondi a 4,69 secondi e ha visto il coinvolgimento su tutta la linea con una PWA inferiore del 90% rispetto alla loro app nativa

Come sono possibili tutti questi incredibili risultati? Molto si riduce al fatto che le PWA offrono un'esperienza utente molto migliore e da ciò derivano ottimi risultati aziendali.

C'è di più però. Diamo uno sguardo più dettagliato ad alcuni dei principali vantaggi dell'app Web progressiva, a cominciare da quello più importante: la velocità.

Le PWA sono velocissime

I consumatori moderni si aspettano un caricamento istantaneo. Se qualcosa non si carica in un batter d'occhio, molti perderanno interesse, forse in modo permanente. Questo è sia autoesplicativo, sia supportato da una tonnellata di dati:

• Quasi il 50% degli utenti afferma che la loro maggiore frustrazione sui dispositivi mobili è l'attesa del caricamento lento delle pagine (fonte)
• Le pagine che si caricano entro 2 secondi hanno una frequenza di rimbalzo del 9%, le pagine che impiegano 5 secondi hanno una frequenza di rimbalzo del 38% (fonte)
• Un "forte calo del tasso di conversione" è associato a tempi di caricamento medi che aumentano da 1 a 4 secondi (fonte)
• Ogni 1 secondo di miglioramento del tempo di caricamento aumenta il tasso di conversione del 2%, mentre un miglioramento di 100 millisecondi genera fino all'1% in più di entrate incrementali (fonte)

In sostanza, più velocemente si carica il tuo sito, meglio è. Se fai aspettare i tuoi clienti/lettori/utenti, una buona percentuale di loro rimbalzerà e non ti darà i suoi soldi.

Il miglioramento della velocità del sito porta a risultati migliori su tutta la linea. Questo è tutto ciò che c'è da fare.

Quindi, come può una PWA aiutarti a raggiungere questo obiettivo? Le app web progressive sono veloci. Davvero veloce.

Pinterest, ad esempio, è riuscito a ridurre il tempo di caricamento del "tempo per l'interattività" da un lento 23 secondi a soli 5,6 secondi. Questo era in media un hardware Android su una connessione 3G lenta. Ciò ha avuto un gradito impatto a catena sulle metriche chiave.

Non è affatto male. Tuttavia, i risultati di Pinterest non sono affatto insoliti.

La piattaforma di streaming ZEE5 ha triplicato la velocità del sito e dimezzato il tempo di buffering creando una PWA. La PWA di Uber si carica in meno di 3 secondi su reti 2G. Forbes ha ridotto i tempi di caricamento dei dispositivi mobili da 6,5 ​​secondi sul precedente sito mobile a soli 2,5 secondi con la sua PWA.

I miglioramenti della velocità sono garantiti quando crei un'app Web progressiva buona e ben progettata.

Perché le app Web progressive sono così veloci?

Le PWA sono così veloci grazie agli importantissimi addetti ai servizi. Come dice Jason Grigsby nel suo eccellente libro Progressive Web Apps:

“Le app Web progressive utilizzano i service worker per fornire un'esperienza eccezionalmente veloce. Gli operatori del servizio consentono agli sviluppatori di definire in modo esplicito quali file il browser deve archiviare nella cache locale e in quali circostanze il browser deve verificare la presenza di aggiornamenti ai file memorizzati nella cache. È possibile accedere ai file archiviati nella cache locale molto più rapidamente rispetto ai file recuperati dalla rete”

Grigsby continua spiegando che:

“Quando qualcuno richiede una nuova pagina da un'app Web progressiva, la maggior parte dei file necessari per eseguire il rendering di quella pagina sono già archiviati sul dispositivo locale. Ciò significa che la pagina può essere caricata quasi istantaneamente perché tutto ciò che il browser deve scaricare sono le informazioni incrementali necessarie per quella pagina”

Uno dei vantaggi tradizionali delle app native è che possono essere velocissime. Raggiungono questo risultato in modo simile: tutti i file necessari per eseguire l'app vengono scaricati quando la installi e deve solo recuperare nuovi dati. Gli addetti ai servizi consentono alle app Web progressive di offrire prestazioni impressionanti simili sul Web!

Le PWA forniscono un'esperienza utente simile a un'app sul Web

La velocità, di cui abbiamo già parlato, è ovviamente una parte enorme dell'UX. Tuttavia, ci sono altri fattori importanti e anche le PWA aiutano qui.

Le app mobili native sono state a lungo il gold standard per l'UX mobile. Lo sono ancora (almeno in qualche modo), ma ora le PWA possono abbinare gran parte della loro sensazione e funzionalità direttamente dal browser.

Ad esempio, le PWA possono:

• Lavora offline o in cattive condizioni di rete (ne parleremo più avanti)
• Essere installato sul dispositivo dell'utente e accessibile tramite un'icona della schermata iniziale come un'app nativa
• Invia notifiche push alla schermata di blocco del dispositivo (purtroppo solo su Android)
• Essere sviluppato per offrire un'esperienza "immersiva" a schermo intero con una struttura di navigazione che imita un'app nativa
• Usa le animazioni come un'app nativa
• Essere sviluppato per accedere all'hardware del dispositivo come la fotocamera e il GPS

Il primo Web mobile era piuttosto duro. Il vecchio paradigma di un browser desktop era "imbullonato" agli smartphone dove non si adattava davvero. L'era del design reattivo ha migliorato questo in modo significativo, ma c'era sempre qualcosa che mancava.

Le app native sono state create senza ambiguità per gli smartphone. Hanno sempre adattato meglio l'esperienza del dispositivo. Tuttavia, le PWA hanno offuscato questa linea, la distinzione in termini di esperienza può essere difficile da individuare.

Ad esempio, hai mai usato Instagram Lite, Google Maps Go o Twitter Lite?

Puoi scaricarli su Google Play Store e controllarli e vedere come si sentono come qualsiasi altra app nativa.

Saresti perdonato per supporre che queste siano versioni più leggere e snelle delle loro principali app native. Come avrai intuito, però , sono app web progressive.

Questo dimostra il potenziale delle PWA per ricreare le esperienze delle app native che tutti conosciamo e amiamo. Quando arriveremo agli esempi un po' più tardi, vedrai esattamente cosa intendiamo!

Nota: potresti aver notato che queste PWA sono attive sul Google Play Store. Google ha aperto il Play Store alle PWA all'inizio del 2019! Ciò dimostra quanto siano fiduciosi sul futuro delle PWA come applicazioni realmente multipiattaforma. Devi saltare attraverso alcuni cerchi per ottenere il tuo PWA lì, ma è certamente possibile. Al momento, non ci sono informazioni da parte di Apple sul fatto che ciò sarà mai possibile sull'App Store iOS.

Le PWA sono affidabili

Abbiamo tutti avuto l'esperienza di provare a utilizzare un sito Web o un'app Web su una connessione mobile instabile. Non è divertente.

Grazie ancora agli addetti ai servizi, che definiscono in modo specifico ciò che il browser dovrebbe memorizzare nella cache locale: le PWA possono essere create per offrire un'esperienza completa e veloce anche quando l'utente ha una connettività scarsa.

Anche questo può essere fatto un passo avanti. Attraverso il "precaching", ovvero quando l'intera applicazione viene scaricata e archiviata alla prima visita, le PWA possono funzionare anche completamente offline!

Questo è davvero importante, se si considera quante persone vivono ancora in aree rurali e scarsamente servite e il miliardo di persone che si collegano per la prima volta online nei prossimi anni, molte delle quali non godranno di una connettività impeccabile.

Le PWA sono sicure, efficienti e adattabili

Affinché gli operatori dei servizi possano fare le loro cose, il tuo sito Web deve essere completamente sicuro con HTTPS.

Si spera che lo faccia già, ma in caso contrario la creazione di una PWA ti costringerà a fare tutto il lavoro necessario per rendere il tuo sito sicuro al 100%.

Anche le PWA sono molto efficienti . Un fattore chiave che scoraggia le persone dal download di app mobili native è lo spazio di archiviazione disponibile sul proprio dispositivo. Come dicono gli autori di The PWA Book:

“Trattano i loro dispositivi mobili come fotocamere, computer, taccuini, assistenti e, soprattutto, come un tesoro di ricordi. Se scaricare un'app significa sacrificare foto o messaggi preziosi, ci pensano tre volte prima di fare clic su Sì".

Le PWA non costringono le persone a prendere decisioni così difficili. Sono molto più leggere delle app native e il processo di installazione ha meno attrito (un tocco su un pulsante e un collegamento viene creato sulla schermata iniziale). La PWA occupa un po' di spazio sul dispositivo, ma è trascurabile in confronto.

Gli addetti all'assistenza che guidano questa efficienza sono anche responsabili della riduzione del carico del server e della riduzione al minimo del rischio di prestazioni lente e di arresti anomali durante i periodi intensi.

Anche le app web progressive sono molto adattabili. Poiché sono basate sul web, possono essere mantenute, aggiornate più facilmente rispetto alle app mobili native.

Quando si desidera modificare o aggiornare qualcosa che si può spostare velocemente, non è necessario occuparsi dei gatekeeper dell'App Store, richiedere all'utente di aggiornare manualmente o contrattare sviluppatori di app native specializzate.

È facile come aggiornare il tuo sito oggi e gli aggiornamenti (distribuiti su un server) sono disponibili quasi istantaneamente per l'utente.

Le PWA ti consentono di coinvolgere gli utenti con le notifiche push

Sono anni che parliamo del potere delle notifiche push. Sono il modo migliore per coinvolgere e comunicare con il tuo pubblico sui dispositivi mobili, nessuno escluso. Puoi usarli per aggiornare gli utenti, spingerli di nuovo nelle app, promuovere offerte e prodotti e, in generale, rimanere al primo posto nella loro vita frenetica.

Ecco alcuni esempi di come diverse aziende potrebbero utilizzare le notifiche push:

• Editori di notizie

"Ultime notizie, X e Y sono appena accadute!"

Le notifiche push funzionano alla grande per gli editori digitali e consentono loro di indirizzare il traffico verso le loro notizie principali e avvisare gli utenti con notizie importanti in base al tempo.

• Negozi di e-commerce

"Offerta speciale / hai abbandonato il carrello / i tuoi articoli sono stati spediti"

Push funziona meravigliosamente per l'eCommerce. Le app per lo shopping inviano regolarmente notifiche per avvisare gli utenti di offerte e nuovi prodotti, tenerli aggiornati con il processo di consegna e fornire codici coupon speciali solo per app.

• Piattaforme Sociali e Comunità

"Il tuo amico ti ha appena inviato un messaggio/richiesta di amicizia/ti ha risposto"

Probabilmente tutti abbiamo già sperimentato messaggi push dalle piattaforme social. Sono l'ingrediente segreto che le app social utilizzano per riportarti sulla loro piattaforma, coinvolgendo e interagendo con altri utenti.

Questi sono alcuni dei casi d'uso. Ma davvero le notifiche push possono essere una grande spinta per qualsiasi azienda. Erano (e sono tuttora) uno dei motivi più validi per creare app native.

Grazie ancora ai nostri operatori del servizio di amicizia: non hai più bisogno di app native per inviare notifiche push. Puoi inviarli dal tuo sito web (se lo trasformi in una PWA).

Le notifiche push devono essere utilizzate correttamente e non abusate, ma possono portare molti vantaggi e sono un grande vantaggio della creazione di una PWA.

Ad esempio, dopo aver creato una PWA, Lancome ha riscontrato che l'8% dei consumatori che toccano una notifica push effettua un acquisto e ha migliorato i tassi di conversione sui carrelli recuperati del 12% tramite le notifiche push.

Un altro è eXtra Electronics, il principale rivenditore di elettronica dell'Arabia Saudita. eXtra ha realizzato il 100% in più di vendite dagli utenti che arrivano tramite web push e ha notato che coloro che hanno attivato le notifiche push sono tornati 4 volte più spesso e hanno trascorso il doppio del tempo sul sito. Il direttore dello sviluppo aziendale Mujeed Hazzaa ha affermato che:

“Le notifiche push sono una parte importante della nostra strategia di coinvolgimento sui dispositivi mobili. È un modo più personale per comunicare con i nostri clienti. Questo è incredibilmente prezioso per i nostri profitti”.

Quando trasformi il tuo sito in un'app web progressiva, puoi ottenere ottimi risultati anche per la tua attività. C'è un grande avvertimento: puoi usarli solo su Android. iOS non li supporta e nessuno può indovinare se mai lo farà. Se le notifiche push sono importanti per te e desideri inviarle a tutti gli utenti , dovrai creare app mobili native.

Le app Web progressive faranno crescere la tua attività

Abbiamo esaminato alcuni dei vantaggi più importanti di trasformare il tuo sito in un'app web progressiva.

La linea di fondo è che hanno perfettamente senso per qualsiasi attività commerciale con un sito web. Ti consentono di aggiornare l'intera UX web e offrono un'esperienza veloce e moderna che è quasi garantita per migliorare le metriche chiave.

Quali sono gli svantaggi della creazione di una PWA?

Nessuno in realtà, tranne il tempo e il denaro che devi investire per costruirne uno. Anche così, una PWA è relativamente conveniente e molto probabilmente (più di) si ripagherà da sola nel tempo, specialmente se il tuo sito è legato a qualsiasi tipo di reddito attraverso pubblicità, eCommerce o abbonamenti.

Hai ancora bisogno di convincere?

Leghiamo il tutto con alcuni esempi. Evidenzieremo 50 dei migliori esempi di app Web progressive su Internet e ti mostreremo in prima persona ciò di cui abbiamo discusso finora.

Esempi di app Web progressive: le 50 migliori PWA su Internet nel 2020

Se vuoi sviluppare una PWA impressionante, il primo passo è guardare esempi di app web progressive di successo per trarre ispirazione.

Come parte della nostra missione di ispirarti, abbiamo raccolto 50 esempi di modelli delle migliori PWA disponibili in questo momento. Puoi passare alla sezione più rilevante per la tua attività, scorrere l'elenco finché qualcosa non attira la tua attenzione o leggere tutti gli esempi di app Web progressive per avere una buona panoramica!

Entriamo nei nostri 50 migliori esempi di PWA.

e-commerce e vendita al dettaglio

Starbucks

Per una delle catene di caffè più famose al mondo, Starbucks ha sviluppato il suo PWA per aumentare il coinvolgimento dei clienti grazie a programmi fedeltà e un processo di ordinazione più semplice.

L'app è stata progettata per sostituire la sua vecchia app mobile per mantenere il suo coinvolgimento migliore indipendentemente dal dispositivo.

Gli utenti possono prima visualizzare la sua sezione Premi in cui i clienti possono riscattare cibo e bevande gratuiti, regali di compleanno, ricariche e opzioni di pagamento quando ordinano tramite il proprio smartphone.

Il resto della pagina dell'app presenta ordini personalizzati, disponibilità del negozio, dettagli di consegna e menu dell'app.

E proprio come ordinare da un barista, ordinare la tua bevanda preferita ti consente di personalizzarne le dimensioni, i componenti aggiuntivi e le opzioni di scatto. Starbucks aggiunge anche le sezioni Informazioni nutrizionali, Ingredienti e Allergeni per coloro che controllano la propria dieta.

Cosa ci piace di questa PWA eCommerce:

• Funziona bene anche con connessioni di rete deboli
• Completamente integrato con altre piattaforme e servizi di altri marchi come Spotify, Lyft e Ford
• Processi di pagamento e checkout mobili senza interruzioni
• Design estremamente intuitivo

Giumia

Quello che Alibaba è per la Cina, Jumia è per l'Africa. Questo mercato online di successo è stato lanciato per la prima volta in Nigeria nel 2012 e da allora ha rapidamente conquistato il settore dell'e-commerce africano.

Nel 2016 ha lanciato la sua PWA come risposta alle connessioni Internet instabili nella regione subsahariana. Con PWA, è stata in grado di conquistare una fetta significativa del mercato facendo affidamento su reti 2G con limiti di dati.

L'introduzione di una PWA è stata la soluzione perfetta per offrire un'esperienza utente simile a un'app senza consumare un'ampia larghezza di banda dati.

Il risultato? Secondo Google, l'azienda ha aumentato il suo tasso di conversione del 33% e ha fatto crescere i suoi utenti 12 volte di più (rispetto alle app native). Inoltre, ha notevolmente ridotto la frequenza di rimbalzo e i requisiti di archiviazione del dispositivo dell'utente.

Cosa ci piace di questa PWA eCommerce:

• Accesso offline affidabile
• Capacità di ricerca veloce
• Processo di caricamento veloce
• Installazione facile

OLX.in

Quando si tratta di PWA per il mercato online, fidati della società indiana di annunci economici OLX.in. Con le sue robuste categorie che vanno dalle proprietà alla moda, venditori e acquirenti si abbinano meglio con il PWA dell'azienda.

Gli utenti possono facilmente notare la facilità di utilizzo dell'app quando cercano prodotti specifici o ottengono ottimi affari dai venditori.

OLX ha rivelato di aver registrato un CTR più elevato sui suoi annunci e un enorme calo dell'80% delle frequenze di rimbalzo da quando è passato a PWA, come riportato da Google.

Cosa ci piace di questa PWA eCommerce:

• Notifiche push anche in modalità offline
• Funzionalità di integrazione della fotocamera semplice creata per i venditori
• Funzione di cronologia delle ricerche

Flipkart

Un altro concorrente nella scena dell'eCommerce indiano è Flipkart che continua a ridefinire l'esperienza di acquisto online con il suo PWA.

Man mano che gli utenti scorrono l'app, vengono presentate categorie di prodotti, offerte limitate, bestseller e sconti, con l'obiettivo di invogliare il cliente a navigare e trascorrere più tempo sull'app.

La PWA di Flipkart è iniziata nel 2015 attraverso Flipkart Lite. L'azienda voleva rendere gli acquisti più accessibili tra gli indiani anche se le connessioni Internet erano intermittenti nella maggior parte delle aree.

Cosa ci piace di questa PWA eCommerce:

• Le notifiche push per le ultime notizie e gli aggiornamenti sono coerenti
• Il processo di acquisto online è semplificato
• La capacità di ricerca è accurata

Formule pure

Rendendosi conto che il mercato degli integratori per la salute è diventato più competitivo che mai, Pure Formulas, con sede negli Stati Uniti, è considerata un pioniere in questo settore quando si tratta di lanciare il proprio PWA.

Dopo aver scoperto che il suo sito Web e l'app mobile soffrivano di frequenze di rimbalzo molto elevate a causa di un processo di checkout lento, l'azienda ha sviluppato una PWA che ha dato loro una svolta completa.

Ha riportato conversioni più elevate e aumento del valore medio dell'ordine (AOV).

Cosa ci piace di questa PWA eCommerce:

• Procedura di pagamento molto conveniente
• Design minimalista
• Requisiti di archiviazione del dispositivo molto leggeri
• Transazioni altamente sicure

AliExpress

Con una PWA altamente reattiva, Ali Express è considerata una delle app più richieste oggi per le transazioni B2C.

Grazie all'ampia copertura di categorie di prodotti da parte dell'azienda, gli utenti possono navigare tra migliaia di opzioni senza rallentare il caricamento della pagina utilizzando la PWA.

Dal suo lancio, AliExpress ha annunciato di aver sperimentato migliori re-engagement e statistiche di conversione grazie al suo PWA.

Cosa ci piace di questa PWA eCommerce:

• Facile navigazione del prodotto
• Tempo di caricamento più rapido
• Layout intuitivo

Alibaba

The Alibaba Group di Jack Ma non ha bisogno di ulteriori presentazioni quando si tratta del successo del suo Alibaba PWA. L'app eCommerce B2B è un modello ideale per qualsiasi PWA: veloce, reattiva, leggera e molto coinvolgente.

Alibaba ha avuto successo in termini di web mobile e lanci di app mobili. Tuttavia, doveva conquistare una parte enorme del mercato attraverso un maggiore coinvolgimento. E la PWA dell'azienda era la soluzione perfetta a questo.

Ha riportato un aumento del 76% delle conversioni totali secondo Google.

Cosa ci piace di questa PWA eCommerce:

• Facile navigazione del prodotto
• Integrazione con gli strumenti del sito web come Feed, Messenger e Il mio account Alibaba
• Tempo di caricamento più rapido

Obbiettivo

Per non essere superata dai suoi concorrenti, l'ottava catena di vendita al dettaglio più grande d'America, Target, ha rapidamente agito in base al suo studio di analisi dei clienti. Nel 2015 ha scoperto che i suoi clienti iniziano il loro viaggio sul proprio dispositivo mobile e poi effettuano l'acquisto utilizzando il proprio computer.

Il management ha pensato di introdurre una PWA e da allora gli utenti delle sue app sono aumentati enormemente e le transazioni online sono migliorate notevolmente senza alienare gli utenti su dispositivi diversi.

Cosa ci piace di questa PWA eCommerce:

• Facile opzione di aggiunta al carrello
• Immagini a caricamento rapido indipendentemente dalle dimensioni

Walmart

Per un'esperienza di app senza interruzioni, la PWA di Walmart ha appena raggiunto la lunga lista di controllo di uno sviluppatore di app. Con migliaia di offerte di prodotti, il gigante della vendita al dettaglio è in grado di integrare gli acquisti online e le scelte di ritiro/consegna per ogni transazione.

La sua funzione di geo-tracciamento monitora gli articoli più venduti nell'area dell'utente, il che consente all'app di offrire consigli basati su tale elenco.

Infine, il suo uso efficace delle notifiche push consente all'azienda di far conoscere alla sua fedele base di fan offerte eccezionali e nuove scoperte.

Cosa ci piace di questa PWA eCommerce:

• Sezione feedback
• Funzione di geo-tracciamento
• Interfaccia molto reattiva
• Prestazioni senza interruzioni su rete instabile

Macy's

Il marchio di vendita al dettaglio di fascia alta, Macy's, aveva un obiettivo in mente quando ha lanciato la sua PWA: fornire la migliore esperienza per i suoi milioni di visitatori mensili.

Riconoscendo la crescita degli utenti delle sue app, la PWA dell'azienda è stata un'aggiunta gradita ai suoi strumenti per i consumatori per mantenere i suoi acquirenti sintonizzati sulle novità sugli scaffali dei negozi.

Cosa ci piace di questa PWA eCommerce:

• Strumento affidabile per la ricerca di negozi
• Layout del prodotto organizzato

Lancome

Il marchio francese di cosmetici di lusso Lancome ha incontrato un ostacolo nelle vendite online: gli utenti mobili erano in aumento ma le conversioni stavano scivolando.

Per comprendere il problema, l'azienda ha esaminato il comportamento dei clienti e ha scoperto che avevano un'esperienza utente terribile sull'app mobile.

Il marchio è passato a PWA per ridurre i tempi di caricamento e rendere l'app altamente accessibile. Secondo Google, le notifiche push hanno contribuito per il 12% alle conversioni e le sessioni mobili sono aumentate al 51%.

Cosa ci piace di questa PWA eCommerce:

• Fast search results
• Easy navigation

News

Financial Times

The Financial Times PWA is considered as one of the best PWAs in the news industry. Covering business and global markets, the app takes a similar look and feel of the paper with its traditional salmon-colored background.

The publication is one of the first news sites to abandon its native app and transition to a PWA. It works well even on slow networks, making news easily accessible for business people on the go.

What we like about this News Publisher PWA:

• Reliable offline
• Very fast loading time
• Real-time updates on content
• Seamless video content experience

Infobae

This Buenos Aires-based news website has proven to be successful in the PWA scene thanks to its Spanish readers. According to Google, the Latin American audience contributed to three times more page views compared to its old mobile site, and spent more sessions on the app as well.

Infobae switched from its mobile site to PWA in 2017 to improve the speed of access among its mobile users. This was influenced by the huge drop in session duration (3 minutes on mobile compared to 27 minutes on desktop).

What we like about this news publisher PWA:

• Very fast loading time
• High-quality visuals loading seamlessly
• Easy navigation

Nau.ch

One of Switzerland's leading news websites became extremely popular when it began flashing content in public areas such as terminals and petrol stations.

Nau (an abbreviation for “new”) was founded in 2007 with the goal of prominently displaying news in public transport to reach millions of commuters on their daily route.

To improve its reach, the company launched its PWA and has achieved 400 times more installations than its old mobile site in the first two days.

What we like about this news publisher PWA:

• Impressive user interface
• Easy navigation
• Content loads much faster relative to other news-related PWAs

Nikkei

Regarded as the world's largest financial newspaper (more than 3 million in daily circulation), Nikkei launched its PWA in 2017 with the goal of reducing load time, improve reader interaction and boost engagement.

Realizing that their website was not mobile-friendly (even taking more than 20 seconds to be fully interactive), the company assembled a team of five front-end engineers who worked on launching a PWA.

The result was truly impressive: improved loading speed, higher interactivity as well as better user experience with offline support according to Google.

What we like about this news publisher PWA:

• Prefetch feature (instant page navigation)
• Preloaded key requests
• Optimized JavaScript bundles
• Optimized images
• Enabled HTTP caching

The Washington Post

As a global authoritative news organization, The Washington Post has released one of the most responsive PWAs to reach out to a wider audience on mobile.

Launched in March 2016, the paper's goal is to provide “frictionless, uninterrupted reading.” This comes after its readers expressed their concerns over slow load times on its old mobile app.

With more than 1,000 articles published daily, they have announced that an 88% improvement in load times was initially observed. This has contributed to an increase in retention rate and longer readership according to Google.

What we like about this news publisher PWA:

• Fast loading time
• Real-time live updates
• Same look and feel as the website

medio

With social journalism becoming a necessity for readers and publishers alike, Medium has made a mark in the online publishing industry with its 120 million readers.

Medium's initial goal in 2012 was to reinvent the blogging platform through small stories that matter to any type of audience.

Now that it has grown into subscription-based service, its loyal users can follow exclusive content and audio narrations through its PWA even when working offline.

What we like about this news publisher PWA:

• reattivo
• Seamless functionality even on an unstable connection

Wired

When tech publisher Wired launched its PWA in 2017, its main objective was to increase its app's page speed and reach out to its 11 million users.

And true enough, it did. Not only did it result in higher readership but also more impressions per session, leading other Conde Nast publications to follow suit through what its chief of technology refers to as Alien Web Apps (AWA).

What we like about this news publisher PWA:

• Fast loading time
• Highly responsive
• Reliable background caching

Forbes

With almost a 50% lift in sessions, triple the rise in scroll depth and 100% boost in engagements according to Google, Forbes has definitely reaped the benefits of launching its fully functional PWA in 2017.

Its Chief Product Officer, Lewis Dvorkin, wanted a no-friction experience for its users to have content served to their devices the way they want.

In addition, Dvorkin states that the more people stay longer on their app, the more they view ads, thanks to increased personalization that yields better engagement.

What we like about this news publisher PWA:

• Stunning visual content
• Fast loading times
• Unique number of readers infographic

The Guardian

To make its online content more accessible, UK's leading news and media outlet, The Guardian, launched its PWA in 2017.

The app features high-quality images, interactive multimedia, and thousands of new content without compromising loading time and user experience.

The company also created a US-based innovation team called The Guardian Mobile Innovation Lab, which operated from 2015 to 2018, which explored mobile tools and chat apps to improve user experience.

What we like about this news publisher PWA:

• Customizable sections
• News alert feature
• Offline access

Sports Mole

Sports fans – football, F1, tennis, rugby, cricket, golf and even snooker – are able to enjoy Sports Mole's website features right in their own devices through the site's PWA.

Video clips, real-time scores and game schedules are just some of the exciting features in the PWA.

The result of this move led to higher readership rate and increased session time on the app.

What we like about this news publisher PWA:

• Search functionality
• Seamless video playback
• Real-time updates
• No lag on page transitions

The Weather Channel

Since the 1980s, The Weather Channel has been a trusted companion by travelers and households when it comes to providing an average of 40 billion daily weather forecasts.

While its previous native app was used by half of its total users through mobile web, the company found out that there are still users who don't enjoy reliable connections or are not equipped with advanced smartphones.

Through its PWA, The Weather Channel is able to cater to millions of its global users in 62 languages. Google reports that it has improved its page load time by 80% through the app.

What we like about this news publisher PWA:

• Search functionality
• Multiple language availability
• Push notifications

MyNet

Offering a wide range of content from news to sports, travel to education, and weather to finance, MyNet is one of Turkey's largest web portals.

Its old mobile site was plagued with complaints, most especially very slow loading speed. This led the company to develop a PWA to deliver fast and a highly engaging website.

Google reports that introducing PWA to MyNet's readers influenced a 15% rise in average views per session and a 23% drop in bounce rate.

What we like about this news publisher PWA:

• Aggiornamenti in tempo reale
• Funzionalità di ricerca

Directory

Kopa

Precedentemente noto come PadPiper, Kopa è un mercato per appartamenti arredati e affittuari. Offre la verifica sia per gli affittuari che per gli host di noleggio, quindi abbinarli è più sicuro.

PadPiper ha inizialmente lanciato il suo PWA per aiutare gli studenti a trovare un alloggio adatto durante l'anno scolastico o una volta iniziato il tirocinio. Ha anche pensato di sfruttare l'occasione per mettere in contatto gli studenti e scoprire chi sta lavorando vicino a loro per facilitare le partite di coinquilina.

Cosa ci piace di questa directory PWA:

• Risultati di ricerca veloci
• Funzionalità di hosting a noleggio
• Design minimalista

Renzio

Questo mercato di noleggio di fotocamere ed elettrodomestici è una soluzione per coloro che necessitano temporaneamente di tali articoli.

Gli utenti effettuano un ordine online e aspettano che l'articolo venga spedito lo stesso giorno. Al termine del periodo di noleggio, l'utente dovrà restituire l'articolo o scegliere di acquistarlo.

La PWA di Rentio (in giapponese o inglese) offre un'interfaccia di facile navigazione, risultati di ricerca rapidi, numerose categorie e tempi di risposta rapidi.

Cosa ci piace di questa directory PWA:

• Capacità di ricerca
• Processo di transazione veloce
• Navigazione comoda

Joppy

In quanto piattaforma di reclutamento di sviluppatori, Joppy si rivolge alle aziende alla ricerca di talenti e ad alcuni dei migliori candidati per opportunità di lavoro nel settore tecnologico.

Questa piattaforma si concentra sulla corrispondenza delle preferenze dei candidati con i requisiti stabiliti dai reclutatori. Ma a differenza di altre bacheche di lavoro online, gli aspiranti al lavoro possono impostare il proprio profilo su anonimo in modo che nessuno possa disturbarli con proposte non richieste.

La PWA di Joppy è chiaramente progettata sia per il reclutatore che per il candidato (che si trovano principalmente a Barcellona) per rendere più snello il processo di candidatura.

Cosa ci piace di questa directory PWA:

• Tempo di risposta veloce
• Processo di abbinamento veloce

OpenRent

La ricerca di un mercato immobiliare in affitto nel Regno Unito può essere un mal di testa senza il giusto strumento online. Con la PWA di OpenRent, inquilini e proprietari possono cercare comodamente la soluzione giusta quando si tratta di proprietà disponibili.

La PWA fornisce una risposta rapida e aggiornamenti in tempo reale. Questo è fondamentale per il sito poiché OpenRent rimuove le inserzioni non appena vengono lasciate per evitare annunci fantasma che frustrano i potenziali affittuari.

Cosa ci piace di questa directory PWA:

• Capacità di filtro dei risultati
• Facile aggiunta di proprietà
• Tempo di risposta veloce

Vendite di automobili

Per un mercato automobilistico online su PWA, Carsales, una delle destinazioni più popolari per gli acquirenti di auto in Australia, offre molti vantaggi ai suoi utenti.

Gli acquirenti possono cercare le auto in base al tipo di carrozzeria, marca, prezzo, offerte speciali. I venditori, invece, possono chiedere una valutazione della propria auto e al resto penserà Carsales.

La PWA offre anche consigli di esperti attraverso recensioni, consigli e consigli su come prendersi cura della propria auto.

Cosa ci piace di questa directory PWA :

• Ottima esperienza mobile-first
• Reattivo a qualsiasi dimensione dello schermo
• Facile esperienza offline

Carigami

Carigami è un broker francese di vendita al dettaglio di auto che collega fornitori e noleggiatori. Il PWA fornisce confronti affidabili dei prezzi delle auto in base alle preferenze di ricerca dell'utente su città, età del conducente, data e ora.

L'app restituisce in pochi secondi i risultati di ricerca completi di tutti i dettagli di ogni autonoleggio.

Cosa ci piace di questa directory PWA:

• Tempo di caricamento veloce
• Risultati di ricerca accurati
• Filtri di ricerca

Brillare

Shine è il secondo portale per il lavoro più importante dell'India, fondato nel 2008. Trova candidati per più di 15.000 aziende in una varietà di settori.

La sua PWA è una delle migliori per un sito di corrispondenza di lavoro. Ad esempio, la ricerca di lavori specifici può essere facilmente filtrata in base a competenze, designazione, reparto, settore, ubicazione e istruzione.

Gli avvisi di lavoro vengono inoltre inviati senza problemi al dispositivo di un utente.

Cosa ci piace di questa directory PWA:

• Notifiche push
• Completamente accessibile
• Pagina offline personalizzata

Sociale o di comunità

Tinder

Quando Tinder ha sconvolto il mercato della scena degli appuntamenti, molti utenti hanno adorato l'app per il suo approccio innovativo al matchmaking.

Nel 2017, l'azienda ha investito nella propria PWA dopo tre mesi di sviluppo. I vantaggi sono stati immediatamente osservati. Innanzitutto, è stato in grado di ridurre il suo investimento di dati da 30 MB sulla sua app nativa a soli 2,8 MB sulla PWA.

Ha anche segnalato un caricamento più rapido della pagina e un migliore coinvolgimento degli utenti (in termini di sessioni di scorrimento, messaggistica, acquisto e spesa).

Cosa ci piace di questa PWA sociale:

• Notifiche push
• Facilità d'uso
• Prestazioni ottimizzate (suddivisione del codice basata sul percorso)

Pinterest

Per tre mesi, Pinterest, la popolare piattaforma di condivisione di immagini e social media, ha creato una PWA per espandere la sua base di utenti internazionali. Secondo Google, rispetto al suo vecchio sito mobile che era di 650 KB, la dimensione di 150 KB della PWA era sufficiente per impressionare i suoi utenti.

Gli abbonati Pinterest ora possono anche attendere solo 5,6 secondi affinché l'interfaccia utente sia utilizzabile rispetto ai 23 secondi precedenti dell'app mobile precedente.

I primi risultati del passaggio alla PWA sono stati promettenti: oltre il 40% di tempo trascorso sull'app, gli annunci generati dagli utenti sono aumentati del 44%, i clickthrough degli annunci sono aumentati del 50% e i coinvolgimenti principali sono migliorati del 60%.

Cosa ci piace di questa PWA sociale:

• Notifiche push
• Basso utilizzo della larghezza di banda
• Supporto offline impressionante

Telegramma

Telegram ha interrotto il servizio di messaggistica istantanea nel 2013 fornendo uno strumento basato su cloud compatibile con diversi dispositivi.

Al momento della stesura di questo articolo, oltre 400 milioni di utenti attivi mensili si affidano a questo servizio sicuro multipiattaforma per scambiare messaggi di testo, foto, video e file audio.

Quando la sua PWA è stata lanciata per fornire le stesse funzionalità della sua app mobile nativa (ma con dimensioni più ridotte), l'azienda ha registrato un aumento delle sessioni per utente e del tempo di conservazione del 50%.

Cosa ci piace di questa PWA sociale:

• Installabile su iOS e Android
• Supporto offline
• Manifesto

Twitter

Una delle prime PWA lanciate proviene da Twitter con la sua Twitter Lite PWA nel lontano 2017. Gli sviluppatori di app l'hanno successivamente utilizzata come modello per integrare le funzionalità delle app Web e native in un'app più ideale per dispositivi mobili.

Secondo Google, l'obiettivo della PWA era migliorare il coinvolgimento dei suoi 250.000 utenti giornalieri che controllano i propri account in media quattro volte al giorno.

Riducendo il consumo di dati, migliorando il caricamento istantaneo (5 secondi su una rete 3G) e migliorando il coinvolgimento degli utenti, l'azienda ha registrato un aumento del 65% delle visualizzazioni di pagina per sessione, un aumento del 75% dei Tweet inviati e un calo del 20% della frequenza di rimbalzo .

Cosa ci piace di questa PWA sociale:

• Ottimizzato per browser (divisione del codice basata sul percorso)
• Minore utilizzo della larghezza di banda
• Aggiornamenti veloci

Instagram

Instagram ha seguito la strategia di Twitter di offrire una PWA non appena l'app di quest'ultima è stata rilasciata. All'inizio del 2020, Instagram ha anche aggiornato la sua app di Windows 10 in modo che fosse una PWA completa di messaggistica diretta.

Sebbene la sua app nativa sia ancora commercializzata, il sito sul browser mobile di un dispositivo offre la stessa funzionalità ed esperienza utente. Gli utenti ottengono le stesse funzionalità che apprezzano da tempo dall'app desktop e mobile.

Cosa ci piace di questa PWA sociale:

• Notifiche push
• Tempo di caricamento istantaneo
• Risposta veloce

Viaggi e Prenotazioni

Airbnb

Airbnb è una piattaforma online che offre comode modalità di noleggio ed esperienze turistiche in tutto il mondo. Nel 2008, l'azienda ha iniziato a collegare i proprietari di case che cercavano di affittare le loro stanze extra con i viaggiatori in cerca di sistemazioni convenienti.

Dieci anni dopo, la PWA è stata aggiornata per funzionare bene con Edge su Windows 10 mobile. Il risultato sono transizioni di pagina istantanee più fluide per i clienti. Ad oggi, ci sono più di 80 milioni di visitatori mensili su Airbnb, la maggior parte dei quali sulla sua app.

Cosa ci piace di questa PWA:

• Notifiche push
• Risposta veloce
• Immagini di alta qualità che si caricano in pochi secondi

Treebo

Un altro leader nel settore delle prenotazioni online è Treebo, una piattaforma di prenotazione alberghiera. Offrendo scelte di alloggio in più di 165 città in India, gli utenti possono confrontare le scelte per le migliori offerte.

Secondo Google, la sua PWA si carica in soli quattro secondi su rete 3G. Il sito segnala inoltre di aver ottenuto un numero di clic cinque volte superiore e di aver triplicato il tasso di conversione.

Cosa ci piace di questa PWA:

• Rendering lato server
• Time-to-interattivo veloce
• Rendering progressivo (streaming HTML)

Andiamo

Soprannominato il più grande sito di viaggi nelle regioni dell'Asia Pacifico e del Medio Oriente, Wego ha tenuto conto del comportamento dei suoi consumatori quando ha progettato il suo PWA.

Poiché la maggior parte dei viaggiatori si affida ai propri telefoni per salvare le foto, lo spazio di archiviazione può facilmente esaurirsi. Inoltre, viaggiare in luoghi diversi può essere frustrante a causa delle connessioni Internet lente e instabili.

Per offrire ai suoi utenti la comodità di prenotare camere d'albergo e voli, è stata creata una PWA. Wego ha annunciato di aver ridotto il tempo di caricamento della pagina da 12 secondi a poco meno di tre secondi secondo Google.

Cosa ci piace di questa PWA:

• Risposta estremamente veloce
• Design minimalista
• Risultati di ricerca accurati
• Leggero

Fai il mio viaggio

MakeMyTrip, una delle principali agenzie di viaggio online dell'India, si è unita al carrozzone della PWA per soddisfare al meglio i suoi 8 milioni di visitatori mensili.

Dopo aver riscontrato il successo nella sua app nativa, l'azienda ha scoperto che la connettività limitata nel paese con limiti di dati su smartphone di qualità inferiore può rendere l'accesso degli utenti molto frustrante.

Inoltre, ha notato che i visitatori trascorrevano più tempo sul proprio sito Web rispetto alla propria app nativa. Replicare la stessa esperienza è quindi fondamentale per gli utenti di telefoni cellulari.

Il risultato è un enorme aumento del 160% delle sessioni dei clienti e un calo del 20% della frequenza di rimbalzo secondo Google. Inoltre, è probabile che gli acquirenti per la prima volta convertano tre volte di più rispetto a coloro che hanno utilizzato l'app nativa in precedenza.

Cosa ci piace di questa PWA:

• Navigazione facile
• Installabile su qualsiasi sistema operativo
• Tempo di caricamento veloce

Inizia il viaggio

Sfruttando il successo del suo mercato online, Jumia si è avventurata nel settore dei viaggi con Jumia Travel. La sua PWA è stata determinante per aumentare il traffico di dodici volte e i tassi di conversione del 33% secondo Google.

Jumia Travel è stata poi acquisita da Travelstart nel 2019 per creare una delle più grandi piattaforme nel settore dei viaggi. Gli utenti mobili di Jumia Travel vengono reindirizzati a Travelstart anche sulla PWA dove possono prenotare voli, sistemazioni alberghiere e auto a noleggio.

Cosa ci piace di questa PWA:

• Tempo di caricamento veloce
• Interfaccia semplice

Trivago

Per accogliere i suoi 120 milioni di visitatori al mese, la società tecnologica tedesca Trivago ha lanciato il suo PWA per aiutare più utenti a cercare e confrontare i prezzi degli hotel prima di partire per un viaggio.

Coprendo quasi 200 siti di prenotazione, l'app funziona velocemente in termini di generazione di confronti dei prezzi. Gli utenti possono anche utilizzare comodamente la mappa di Trivago, le recensioni degli hotel reali e fare riferimento alle ricerche precedenti per risparmiare tempo e larghezza di banda.

La PWA è stata aggiunta da oltre mezzo milione di utenti provenienti da 55 paesi alle loro schermate iniziali, il che ha comportato un aumento del 150% del coinvolgimento e del 97% dei click-out alle offerte alberghiere in base al rapporto di Google.

Cosa ci piace di questa PWA:

• Installabile su Android e iOS
• Eccellente supporto offline
• Risposta veloce
• Filtri di ricerca
• Supporto multilingue

Uber

La PWA di Uber è una delle app dal design più esclusivo di oggi. La società di ride-hailing ha inserito la sua app Window 10 dietro le quinte nel 2018 a favore del PWA lanciato per la prima volta a luglio 2019.

Rispetto alla sua app mobile nativa, la PWA di Uber occupa solo 50 KB di spazio di archiviazione. Si carica molto rapidamente, il che lo rende così conveniente quando sei bloccato in un'area con una rete debole.

A seconda della propria posizione, Uber offre servizi di ride-hailing, consegna di cibo, noleggio di biciclette e scooter e condivisione di viaggi in aereo con un semplice tocco sul proprio dispositivo mobile.

Cosa ci piace di questa PWA:

• Tempo di caricamento veloce
• Supporto offline
• Leggero
• Processo di prenotazione estremamente veloce

Lyft

La concorrente di Uber, Lyft, fondata nel 2012, ha ampliato le sue basi di motociclisti e conducenti negli Stati Uniti e in Canada.

Offrendo tariffe più convenienti (in termini di un piano di abbonamento per i passeggeri abituali), la compagnia ha conquistato un'enorme quota di mercato che un tempo era dominata da Uber. Ha introdotto la sua PWA nel 2016

Per i nuovi utenti, la PWA offre un facile processo di registrazione e servizi di prenotazione, per i quali la sua app nativa è nota.

Cosa ci piace di questa PWA:

• Tempo di risposta veloce
• Aggiornamenti affidabili in tempo reale

Tajawal

Tajawal, un'app molto popolare per la prenotazione di voli e hotel negli Emirati Arabi Uniti, offre soluzioni complete per accedere a più di 450 compagnie aeree e migliaia di hotel per i viaggiatori.

La PWA funziona molto velocemente e offre soluzioni di prenotazione facili attraverso un processo semplificato. L'interfaccia è semplice e si concentra principalmente sulle prenotazioni.

Cosa ci piace di questa PWA:

• Caricamento della pagina molto veloce
• Transazioni sicure

Fine settimana del volo

Questa esclusiva società di prenotazione di viaggi è stata fondata nel 2017 ad Amsterdam. L'obiettivo è offrire agli utenti itinerari di viaggio solo per il fine settimana in modo che possano salire su un aereo e vivere un ritiro di due giorni in base alla raccomandazione del sistema.

Gli utenti FlyWeeked inseriscono semplicemente la loro posizione attuale e selezionano un fine settimana in cui desiderano fare una pausa. Quindi il sistema fornisce un elenco di città cliccabili che l'utente può scegliere di “scorrere via” se non è interessato, o invece prenotare il viaggio.

La PWA è facile da usare, il che garantisce un maggiore coinvolgimento grazie al concetto unico.

Cosa ci piace di questa PWA:

• Tempo di risposta veloce
• Caricamento rapido della pagina

Fresco cugino

Visitare un paese straniero può essere reso più eccitante quando un locale che condivide i tuoi interessi può guidarti durante il tuo viaggio. Con Cool Cousin, i visitatori possono selezionare affidabili guide locali della città sulla loro piattaforma facile da usare.

I cosiddetti "cugini" vanno dai chirurghi ai musicisti, ma condividono tutti la stessa passione di ospitare i turisti nella loro città natale.

La sua PWA è stata lanciata nel 2018 per fornire un'esperienza di accesso più rapida e agevole tra i suoi utenti. Nel loro aggiornamento ufficiale, la società ha annunciato che l'app ha ridotto il tempo di caricamento del 25% e ha ridotto l'accesso ad altre fonti online da parte degli utenti.

Cosa ci piace di questa PWA:

• Tempo di risposta veloce
• Navigazione facile

Divertimento

Soundslice

Imparare a suonare la chitarra, il piano, il sax o il banjo è ora più facile con Soundslice, un'app che sincronizza la notazione musicale con l'audio reale.

La PWA di Soundslice è perfetta per sessioni di autoapprendimento utilizzando un dispositivo mobile. Consente all'utente di modificare il tono, le sezioni del loop e annotare la musica. D'altra parte, gli insegnanti di musica possono sviluppare sessioni interattive utilizzando lo strumento.

Le "fette" di esempio consentono agli utenti di riprodurre l'audio accompagnato da una guida verticale in movimento sullo spartito.

Cosa ci piace di questa PWA:

• Progettazione interattiva
• Tempo di caricamento veloce

Spotify

Per il servizio di streaming di musica digitale Spotify, sfruttare un'app leggera tramite PWA è un must per perseguire più abbonati.

L'app desktop e mobile di Spotify viene replicata nella PWA, offrendo agli ascoltatori la stessa comodità anche durante l'ascolto offline. Il PWA si carica molto più velocemente, inoltre i colori di sfondo si adattano ai generi degli album per un tocco più personalizzato.

Cosa ci piace di questa PWA:

• Interfaccia utente adattiva
• Supporto offline
• Progettazione interattiva

1 Accordatore

Contrariamente alla credenza popolare, la radio non è morta. Con 1Tuner, qualsiasi utente può ascoltare stazioni radio (ovunque nel mondo) e podcast.

Possono persino creare playlist per non perdere l'occasione di ascoltare le trasmissioni dal Brasile o le migliori tracce trasmesse dalle stazioni locali londinesi.

Anche il PWA funziona perfettamente. La selezione di una particolare stazione radio consente di ascoltare la trasmissione in tempo reale. D'altra parte, i podcast vengono forniti con una qualità audio eccezionale.

Cosa ci piace di questa PWA:

• Tema personalizzabile
• Numero enorme di consigli sui contenuti

9GAG

L'umorismo online non è mai stato lo stesso dal lancio di 9GAG. Con meme Internet, video e immagini condivisi da utenti di tutto il mondo, il sito è diventato una fonte di intrattenimento.

Tuttavia, si è presto reso conto che la sua vecchia app nativa richiedeva più tempo per essere caricata, soprattutto quando i contenuti di tendenza riguardavano molti video.

9GAG è passato a PWA per ridurre la velocità di caricamento della pagina e incoraggiare un migliore coinvolgimento degli utenti. Il sito ha rivelato che i suoi utenti sono rimasti sull'app il 25% più a lungo rispetto alla sua app nativa.

Cosa ci piace di questa PWA:

• Installabile su Android e iOS
• Supporto offline
• Tempo di caricamento veloce

Lotto.de

Le informazioni raccolte in tempo reale sugli ultimi risultati del lotto Euro su questo PWA forniscono una risorsa utile per i giocatori.

La PWA si carica estremamente velocemente e funziona bene con dispositivi di fascia bassa e con connessioni Internet scarse. Per ogni giocatore del lotto che non vede l'ora di conoscere gli ultimi risultati, questo PWA è un compagno utile.

Cosa ci piace di questa PWA:

• Esperienza utente fluida
• Disponibilità in tedesco e inglese

Conclusione dei 50 migliori esempi di PWA

Si spera che questi esempi di app Web progressivi abbiano evidenziato alcuni dei punti principali che abbiamo illustrato in questa guida.

Questi marchi hanno investito nella loro UX mobile e ne hanno raccolto i frutti. Puoi e dovresti seguire le loro orme e andare "mobile first" con un'impressionante app Web progressiva per la tua attività. Ti diremo come, ma prima risponderemo a una domanda chiave: "che dire delle app native?"

Forse stavi giocando con l'idea di creare tu stesso app iOS e Android e invece sei stato sviato a guardare le PWA. Forse non sei così preoccupato per il lancio sugli App Store e desideri solo un sito Web molto migliore.

Ad ogni modo, tratteremo brevemente il dibattito "nativo vs PWA" e spiegheremo perché pensiamo che un PWA sia il minimo e l'app PWA + nativa sia ottimale.

Che tipo di app dovresti creare? App Web progressive e app native

C'è un'idea in giro che le app Web progressive e le app native siano rivali. Le PWA renderanno le app native irrilevanti e non necessarie. Che le aziende sceglieranno tra la creazione di una PWA e un'app nativa e opteranno sempre per quest'ultima.

Questa narrazione è fuorviante e presenta app native vs PWA come una scelta o/o, che è una falsa dicotomia. La verità è che le PWA e le app native sono una combinazione brillante e lavorano in sinergia insieme. Si coprono a vicenda e garantiscono a tutti un'esperienza utente ottimale indipendentemente dal canale.

Le PWA beneficiano della portata, della rilevabilità e dell'ubiquità del web. Attirano traffico organico e impressionano i visitatori per la prima volta con un'esperienza veloce ed elegante, convincendoli a spendere più tempo (e denaro) sul tuo sito. Offrono un'opzione di installazione semplice che riduce l'attrito e i gatekeeper e possono fare appello anche a coloro che sono preoccupati per lo spazio di archiviazione limitato del dispositivo.

Forniscono il mezzo perfetto per creare una connessione con i nuovi visitatori e coloro che sono abbastanza coinvolti da tornare ma non abbastanza da scaricare le tue app native per qualsiasi motivo. Le PWA sono il mezzo perfetto per nutrire le persone attraverso la tua canalizzazione.

Le app native, d'altra parte, hanno una portata e una visibilità ridotte rispetto alle PWA. Si trovano dietro i "giardini recintati" degli App Store e richiedono un livello di impegno maggiore da parte dell'utente per installarli e scaricarli. D'altra parte, sono più in linea con le abitudini degli utenti esistenti, ti consentono di inviare notifiche push agli utenti iOS e possono farti aumentare la visibilità/presenza del marchio sugli App Store.

Le app native sono ottime per i tuoi lettori/clienti/utenti principali. La tua base più fedele dovrebbe essere incoraggiata a scaricare le tue app native e ad accedervi, anche dietro una schermata di accesso o addirittura un paywall, in modo da poterle raccogliere in un unico posto e concentrarti davvero sulla comprensione e sul coinvolgimento, massimizzando l'LTV e la fidelizzazione il più possibile.

Le app native sono un'ottima "casa" per i tuoi più grandi fan.

Google lo mette in questo modo:

“Le PWA non devono sostituire le app native; possono lavorare in tandem con loro. I rivenditori, ad esempio, possono utilizzare un'app nativa per coinvolgere utenti fedeli che hanno maggiori probabilità di installare un'app, ma utilizzano una PWA per raggiungere facilmente nuovi utenti. Agli utenti che interagiscono con la PWA può quindi essere richiesto di scaricare l'app mobile in futuro”

La nostra raccomandazione: costruisci entrambi!

Se hai un budget limitato, scegli una PWA. Se hai un'app nativa ma non una PWA, dovresti assolutamente crearne una al più presto. Se sei completamente impegnato a costruire un'esperienza utente mobile-first ottimale e sei in grado di investire per raggiungerlo, costruisci entrambi e falli completare a vicenda i punti di forza e di debolezza.

Puoi ottenere fantastiche app native con MobiLoud, tutto ciò di cui hai bisogno è un sito Web o un'app Web. Mettiti in contatto con il nostro team per saperne di più!

Come creare un'app Web progressiva

Lo scopo di questa guida è fornire una panoramica completa di alto livello delle PWA. La complessità del loro sviluppo non è qualcosa in cui ci addentreremo, ma esporremo le tue opzioni in modo che tu possa fare la scelta da solo.

Ci sono molti contenuti che circolano online su come creare una PWA in "10 minuti". Con la promessa di portare quella sensazione di app nativa in un'app Web tradizionale tutto da zero in meno di un'ora, è facile farsi sedurre da questi tutorial.

È legittimo però?

Sì e no. Questi "hack" di PWA servono anche a soddisfare il criterio minimo assoluto a: HTTPS, manifest web e service worker. Se sei interessato a creare un'app Web progressiva molto semplice e funzionale, puoi provare PWABuilder di Microsoft. Con un po' di armeggiare e di know-how tecnico potresti ottenere qualcosa di decente attivo e funzionante.

Per creare un'app Web progressiva unica, ottimizzata e ricca di funzionalità, che realizzi davvero il suo potenziale, è necessario investire di più. Per capire perché, analizziamo i passaggi fondamentali.

1. Acquista un certificato SSL da configurare tramite il tuo servizio di hosting
2. Sviluppa una shell per app
3. Verifica se il browser supporta i lavoratori del servizio
4. Registra il file di lavoro del servizio
5. Aggiungi notifiche push e manifest dell'app web
6. Configura il prompt di installazione
7. Testa le funzionalità dell'app
8. Controlla l'elenco di controllo di Lighthouse basato sull'app
9. Correggi i bug
10. Avvia l'app

Sembra facile, vero?

In realtà, per farlo bene e creare una buona app Web progressiva personalizzata, sono necessari sviluppatori front-end con esperienza nella creazione di app Web complesse.

Il lavoro fondamentale di configurazione dell'operatore del servizio e della memorizzazione nella cache per prestazioni ottimali è complesso e richiede abilità reali. Quindi, a seconda delle tue esigenze, potresti anche aver bisogno di designer che comprendano l'esperienza utente dell'app nativa e come applicarla in modo efficace sul Web.

A meno che tu non sia un'azienda piuttosto grande, probabilmente non hai un carico di sviluppatori front-end di talento seduti ad aspettare che tu dica loro cosa fare. Dovresti trovarli, assumerli e mettere insieme una squadra e gestirli: un compito difficile se non hai esperienza con queste cose. Anche un buon sviluppatore front-end è sempre richiesto e le loro tariffe contrattuali lo riflettono.

Costo e tempi di realizzazione di un'app web progressiva

Quindi quanto costerebbe? Beh, è ​​un po' come il classico "quanto è lungo un pezzo di spago?"

Dipende interamente dalla complessità dell'app che desideri creare. Secondo gli autori di The PWA Book:

La creazione di una PWA da zero richiederà qualcosa tra 3400 Wh (per una piccola app) e 9000 Wh (un progetto dedicato che abbiamo realizzato). Ciò significa un costo compreso tra $ 400.000 e $ 1 milione. L'utilizzo di una piattaforma cloud sarà almeno il 75% più economico e anche il Time to Market sarà più breve del 75% (2-3 mesi invece di 8-12 mesi).

– Capitolo 10, Il libro PWA

Questo sembra costoso, ma ti dà un'idea di come i grandi marchi come quelli che abbiamo visto sopra investono nelle loro esperienze.

Ovviamente se stai convertendo un sito in una PWA piuttosto che costruirlo da zero, nella maggior parte dei casi sarà più economico e semplice. Come stima approssimativa, stai cercando di investire almeno 3 mesi e $ 20.000 a $ 50.000 per ottenere un ottimo risultato.

Gli sviluppatori seguono diverse fasi del progetto, ma nella maggior parte dei casi si tratta di sette fasi: scoperta, progettazione, revisione, sviluppo preliminare, test, correzione di bug e lancio finale.

Se la tua PWA è più complessa, aspettati che il suo completamento duri più a lungo considerando le funzionalità avanzate che devono essere integrate come GPS, supporto per i social media e accesso alla fotocamera.

Detto questo, le semplici PWA possono richiedere meno di tre mesi (o anche solo un paio di settimane se sono scarne). Se desideri avere funzionalità più avanzate come il pannello di amministrazione del back-end, i modelli di visualizzazione e altre integrazioni, puoi comunque avere la tua PWA in meno di sei mesi.

Può sembrare un importo considerevole, ma se lo metti nel contesto ne vale la pena. Non solo sono più convenienti e veloci da costruire rispetto alle app native, ma è probabile che la velocità e l'esperienza utente migliorata si ripaghino da sole a lungo termine.

Se sei su WordPress, ci sono alcuni modi più semplici per trasformare il tuo sito WordPress in una PWA e alcuni plug-in PWA di WordPress che puoi provare.

Possiamo aiutarti a consigliarti sulle tue opzioni e, se il tuo sito è adatto, utilizza la nostra piattaforma personalizzata per convertirlo in una PWA in sole 2 settimane, a una frazione del costo standard. Possiamo anche creare app native iOS e Android dal tuo sito in un arco di tempo simile, così hai tutte le tue basi mobili coperte per il 2021 e oltre!

Mettiti in contatto con uno dei nostri esperti di telefonia mobile per una consulenza per saperne di più.

È nelle tue mani: inizia a creare un'app Web progressiva oggi!

A questo punto dovresti avere una buona panoramica delle caratteristiche e della potenza delle app web progressive.

Per saperne di più, dai un'occhiata a queste risorse:

• Il libro PWA
• Le risorse di Google su web.dev e Google Developers
• Statistiche PWA (metriche interessanti e casi di studio)
• PWA Roadshow di Google (grande serie di video)
• Le eccellenti linee guida PWA di Mozilla
• Il libro di Jason Grigsby Progressive Web Apps
• Cosa può fare il Web oggi? (mostra come si è sviluppata la tecnologia web)
• Sì, quel progetto web dovrebbe essere una PWA (eccellente guida/articolo)
• La nostra guida sulla differenza tra app native, web e ibride

Ora è il tuo turno. Può sembrare un compito arduo, ma devi trasformare il tuo sito Web in un'app Web progressiva per avere davvero una presenza sul Web impressionante, moderna e ottimale.

Quando sarà pronto per il lancio, sarai felice, te lo garantiamo. E i tuoi clienti ti ricompenseranno dedicando più tempo, attenzione e denaro al coinvolgimento della tua attività.

Come accennato, però, una PWA non sostituisce le app native. Le PWA sono principalmente un sito Web molto migliore. Può essere difficile convincere gli utenti a installarli sui propri dispositivi, poiché non sono ancora abituati a questo e ti perdi l'invio di notifiche push agli utenti iOS e la presenza del marchio sugli App Store.

Dovresti creare anche app native?

Una PWA è un must, ma le app native sono ancora l'esperienza utente mobile definitiva. L'unico motivo per cui alcuni sono diffidenti o negativi riguardo alla prospettiva delle app native è la grande spesa (oltre $ 50.000) e il lungo e laborioso processo di sviluppo che tradizionalmente li ha accompagnati.

Se condividi queste preoccupazioni, ma sei interessato a creare app iOS e Android per il tuo marchio, dai un'occhiata alle nostre piattaforme News, Canvas for eCommerce o Canvas. Qualunque sia la soluzione giusta per te: puoi convertire il tuo sito o la tua app web in app native di alta qualità in poche settimane, a partire da $ 100/m.

Le nostre piattaforme possono essere utilizzate per convertire qualsiasi sito Web in un'app mobile. Non importa con cosa è costruito il tuo sito. MobiLoud è ottimo per costruire:

• App WordPress
• App a bolle
• App Squarespace
• App Wix
• App WooCommerce
• App di flusso web

E qualsiasi cosa nel mezzo! Verrai configurato con notifiche push illimitate su Android e iOS e avrai tutte le funzionalità necessarie per costruire una presenza multipiattaforma vincente sul web e sugli App Store.

Possiamo anche aiutarti con una PWA, così avrai la combinazione mobile ideale per il futuro. Se questo suona bene, contattaci e prenota una demo oggi. Se decidi di intraprendere un'altra strada, buona fortuna per il tuo viaggio. Ci auguriamo che gli esempi di PWA ti siano piaciuti e che tu abbia avuto ispirazione per aiutarti a prosperare sui dispositivi mobili!