Nel contesto attuale, in cui gli utenti hanno aspettative sempre più grandi rispetto alla disponibilità delle funzionalità più avanzate, supporto offline, notifiche push e altre funzionalità delle app native, rappresentano solo alcune delle funzionalità sfruttabili ad esempio dalle piattaforme e-commerce che vedono invece nelle Progressive Web App il loro futuro.
Nell’ultimo periodo infatti si sta sempre più sviluppando l’idea che le Progressive Web App possano essere una soluzione ideale da usare per gli e-commerce. Quest’idea nasce dal fatto che le PWA grazie alle loro caratteristiche hanno la capacità di migliorare la user experience aumentando il coinvolgimento dei clienti così come le conversioni.
A tale scopo cresce sempre più l’idea di trasformare i propri siti Web reattivi in PWA. Per capire meglio lo sviluppo di questa tendenza è utile conoscere i dati elaborati da Statista rispetto alle vendite online, che mostrano come nel 2021, ben il 70% di tutte le visite ai siti Web al dettaglio in tutto il mondo sono state effettuate dagli smartphone e solo negli Stati Uniti entro il 2025, si prevede che oltre il dieci percento di tutte le vendite al dettaglio sarà generato tramite il commercio mobile, una cifra che rappresenterebbe una crescita di quasi sette punti percentuali rispetto al 2018.
Questi dati fanno ben comprendere come l’esigenza di migliorare la user esperience portandola ai massimi livelli sia una necessità impellente per gli addetti ai lavori che si trovano grazie alle PWA a poter rivoluzionare il frontend per ottenere gli obiettivi desiderati in merito alla UX.
A sottolineare l’impellenza di trovare soluzioni in grado di aumentare la UX troviamo la crescita del mobile commerce che, secondo i dati, entro i prossimi due anni controllerà il 73% di tutte le vendite e-commerce nel mondo.
La facilità di accesso e le prestazioni elevate sono quindi i requisiti richiesti dagli utenti che è possibile ottenere grazie alle Progressive Web App.
Vediamo quindi quali sono le tecnologie usate per lo sviluppo delle PWA.
Le caratteristiche delle PWA
Le PWA sono Web Application che usano le moderne tecnologie dei browser per offrire agli utenti un’esperienza molto similare rispetto a quella offerta da un’applicazione nativa.
Le Progressive Web App si caratterizzano per essere:
- Progressive, grazie ai principi di miglioramento progressivo funzionano con qualsiasi browser;
- Responsive perché si adattano alle dimensioni del device usato;
- Sicure perché sono esposte su protocollo HTTPS;
- Installabili, senza passare dall’app store possono essere salvate sullo schermo;
- Aggiornate sempre grazie ai service worker;
- Linkabili, possono essere condivise attraverso un URL;
- Ricercabili, poiché sono indicizzate dai motori di ricerca.
Una PWA può praticamente considerarsi a tutti gli effetti un sito Web e attraverso queste i consumatori sono in grado di acquistare prodotti su dispositivi, connessioni o persino sistemi operativi.
Gli elementi distintivi delle PWA possono essere riassunti in tre punti:
- l’App Shell, ovvero un codice che viene memorizzato localmente nella cache del browser del terminale mobile, dove sono contenuti gli elementi principali dell’interfaccia utente che i service worker memorizzano in modalità Responsive Web Design per offrire un caricamento veloce delle pagine. È proprio grazie a questa Shell che gli utenti possono interagire con l’app grazie a un caricamento progressivo dei contenuti;
- il Service Worker, una tecnologia introdotta da Google che ti consente di controllare le richieste di rete a livello di programmazione, creare esperienze offline e fornire velocità istantanea e permette la ricezione di notifiche push, prima impossibile a causa delle limitazioni del browser. In pratica il Service Worker fornisce il meglio delle funzionalità delle app native e tradizionali. I benefici del Service Worker sono: capacità di gestire facilmente le notifiche push, sincronizzazione dei dati in background, capacità di rispondere alle richieste di risorse che sono state generate da altre parti e ricezione di aggiornamenti centralizzati;
- il JSON Manifest, il file contenente i metadati utili all‘indicizzazione dell’app che al suo interno ha anche informazioni come icone, colori, caratteri, URL della pagina di destinazione, nome della web application, la dichiarazione dell’orientamento di default della web app, l’abilitazione a impostare la modalità dello schermo. Gli user agent possono creare modalità di fruizione per le Progressive Web App con le stesse caratteristiche delle app native grazie alle modifiche fatte ai metadati dagli sviluppatori.
Tutte le caratteristiche fin qui evidenziate e le funzionalità proprie delle Progressive Web App le rendono un efficiente strumento di miglioramento della user experience e quindi oggi un elemento fondamentale da conoscere per ogni sviluppatore, che voglia puntare a realizzare un prodotto in grado di migliorare engagement e UX.
Per migliorare engagement e UX le PWA si basano su due fattori:
- la massimizzazione delle prestazioni
- la semplificazione della navigazione
Questi fattori si snocciolano in diversi elementi per tradursi in una serie di vantaggi che vedremo nel dettaglio in questo articolo. Vediamo però prima quali sono le tecnologie utili per il loro sviluppo.
Le tecnologie di sviluppo delle Progressive web app
Per lo sviluppo di una progressive web app è bene sapere che è necessario prima di tutto un sito web su cui poter lavorare e l’uso di HTTPS necessario per la sicurezza.
Le progressive web app vengono sviluppate utilizzando HTML5, CSS e JavaScript, ma nello sviluppo possono essere utilizzati ulteriori strumenti. Tra questi troviamo
- Magento PWA Studio, un toolkit progettato per le piattaforme Magento 2 responsive che utilizza potenti framework e strumenti come UPWARD, PWA-buildpack e server Magento condiviso
- ScandiPWA, un primo tema Magento open source progettato per siti Web Magento responsive con prestazioni eccellenti perché non richiede middleware, servizi aggiuntivi o database che utilizzando anche GraphQL, consente rendering delle pagine più veloci
- PWA Builder, un utile strumento per trasformare i siti Web responsive in PWA
- Angular, il framework utile per semplificare la creazione di PWA affidabili e reattive
- React PWA Library, tra le soluzioni più popolari per lo sviluppo di PWA è un framework utile per costruire interfacce utente dinamiche e moderne
- VueJS, un framework che consente di creare app Web interattive molto usato dagli sviluppatori per lo sviluppo front-end. Offre ottime funzionalità alle PWA in termini di sicurezza e permette una eccellente integrazione delle app con altre applicazioni.
Le differenze tra Progressive Web App, app native e app tradizionali
A differenziare le PWA dalle app native e tradizionali troviamo una serie di funzionalità, che non sono proprie delle app native e tradizionali. Eccone alcune:
- possono essere installate con pochi e semplici passaggi che prevedono la visita al sito, l’aggiunta opzionale nella schermata home e l’apertura per l’uso;
- non necessitano di essere scaricate e installate, basterà salvarle sulla schermata iniziale di un dispositivo come un computer o uno smartphone e l’accesso avverrà come per le app mobile;
- sono fruibili sui principali sistemi operativi per Mobile (Android, iOS e Windows Phone);
- hanno una capacità di aggiornamento automatico a differenza delle app native che necessitano di un aggiornamento manuale;
- richiedono uno spazio di archiviazione molto ridotto rispetto alle native a cui serve più memoria;
- si può usufruire di molte funzioni del dispositivo utilizzato per la visualizzazione, come localizzazione GPS, notifiche push, l microfono o telecamera;
- possono essere indicizzate sui motori di ricerca, cosa impossibile per le app tradizionali, garantendo un’ampia visibilità.
I vantaggi nel creare una Progressive Web App
Prima di esaminare i vantaggi che le PWA sono in grado di apportare, facciamo il punto sugli obiettivi delle PWA. Le progressive web app (PWA) nascono essenzialmente con un obiettivo principale e possiamo dire anche già raggiunto: offrire agli utenti un’esperienza pari alle app native.
Nel farlo, le Progressive web app sono in grado di garantire molteplici vantaggi rispetto alle app native, riassumibili in:
- semplicità e velocità di accesso grazie al fatto che è possibile aggiungere alla home del telefono l’icona del proprio sito/web app accedendo con un semplice click;
- fidelizzazione dell’utente e miglioramento delle conversioni grazie all’invio delle notifiche push, ai miglioramenti generali dell’esperienza utente e ai minori tempi di caricamento;
- facilità e velocità di sviluppo;
- velocità di caricamento delle pagine, grazie a un sistema di cache interna al telefono che velocizza la navigazione;
- navigazione offline grazie alla strategia cache-first per archiviare i dati offline in cache come immagini, file CSS e JS;
- aggiornamenti manuali non necessari, perché le PWA si aggiornano ogni volta che il dispositivo è connesso a Internet senza dover effettuare alcun download;
- costi di realizzazione ridotti eliminando la necessità di sviluppo, manutenzione e marketing di qualsiasi piattaforma diversa dal sito Web PWA;
- tracciamento ed engagement grazie a Google Analytics che consente di tracciare le pageviews;
- Linkability e un’indicizzazione sui motori di ricerca che permette di posizionarsi e ricevere traffico organico ottenendo un costo di acquisizione dell’utente inferiore;
- maggiore libertà nello sviluppo rispetto alle app native, che per essere pubblicate devono avere i requisiti richiesti dagli store;
- massimo livello di usabilità ed user experience;
- personalizzazione attraverso la modifica del colore della barra degli indirizzi;
- minore utilizzo dei dati e meno spazio di archiviazione richiesto;
- la possibilità di usare maggiormente la visualizzazione sul dispositivo, visualizzando il contenuto a tutto schermo senza la tipica barra degli indirizzi del browser;
- sicurezza perché ogni PWA deve essere usata tramite il protocollo HTTPS per non incorrere in un’esposizione delle informazioni o in un’alterazione dei contenuti;
- l’usabilità su tutti i dispositivi e adattamento al relativo display;
- indipendenza dagli store per cui non è necessario passare per ottenere le PWA che porta ad minori restrizioni e maggiore libertà riguardo a design e funzionalità;
- servizi di geolocalizzazione grazie all’API Geolocation.
La maggior parte di questi benefici si traducono in grandi vantaggi usufruibili da un lato da chi sviluppa l’app e dall’altro da parte dell’utente finale.
Agli sviluppatori viene infatti data l’opportunità di sviluppare un prodotto similare alle app native ma con maggiore libertà e con tempi e costi ridotti oltre a diverse funzionalità che rendono migliore la user experience. Prova di ciò sono i risultati positivi ottenuti ad esempio dagli ecommerce.
Una ricerca infatti, mostra come il 53% dei visitatori lascia un sito Web dopo solo 3 secondi di caricamento della pagina facendo diminuire i tassi di conversione del 21,8% su ogni secondo di ritardo nella velocità della pagina. Con le PWA questo limite viene superato grazie a fluidità di utilizzo e velocità di caricamento delle pagine che agevolando l’utente facilita le conversioni ottenibili sugli ecommerce.
Cinque esempi di ecommerce che hanno ottenuto vantaggi dalle PWA
Sono diversi gli ecommerce che hanno provato in diversi modi i benefici che le PWA sono in grado di offrire. Ecco alcuni esempi di grandi aziende e dei vantaggi che hanno acquisito grazie alle PWA:
- Alibaba ha avuto un aumento delle conversioni pari al 76% tra i browser, del 14% di utenti attivi mensili su iOS e del 30% su Android e un tasso di interazione del 400% in più da “Aggiungi a Homescreen”;
- BookMyShow che ha aumentato di oltre l’80% i tassi di conversione grazie alla velocità di caricamento (meno di 3 secondi);
- Lancôme che ha aumentato del 17% le conversioni, del 53% le sessioni mobili su iOS e dell’8% i tassi di conversione sui carrelli recuperati attraverso le notifiche push;
- Starbucks con la sua PWA che molto più piccola rispetto all’app iOS esistente del brand ha raddoppiato il numero di utenti web che effettuano ordini ogni giorno;
- Uber, con la sua web app che ha un peso di solo 50kB consente agli utenti di poterla caricare in soli 3 secondi anche nei casi di una rete più lenta come la 2G.
Quando preferire una PWA rispetto ad una App nativa
Una Progressive web app diventa la scelta ideale specialmente in alcuni casi che possiamo così riassumere:
- se si ha un budget ridotto da dedicare allo sviluppo, infatti con gli stessi costi solitamente destinati ad una app tradizionale, con le Pwa è possibile allocare più budget per il marketing o per cambiare le funzionalità a progetto iniziato;
- quando l’idea da sviluppare è nuova e innovativa, perché difficilmente gli utenti sono propensi a scaricare una app poco conosciuta, ma le PWA facilitano questo processo permettendo all’utente di poter scegliere se scaricare l’app dopo averla provata sotto forma di sito;
- se non si vuole avere limitazioni riguardo alla pubblicazione dell’app dettate dagli store di Apple (per iOS) e Google (per Android) ma si vuole essere completamente indipendenti dai vincoli degli store nello sviluppo;
Dopo aver elencato le motivazioni principali per cui è bene scegliere una Progressive Web App che vanno ad aggungersi alle caratteristiche e ai vantaggi da queste offerte che abbiamo visto fino a qui, per avere un quadro generale completo, è bene però evidenziare anche i casi in cui le PWA non possono essere utilizzate.
Le PWA non possono essere usate se si vuole inviare notifiche push da IOS sia ad App aperta che ad App chiusa perché possono essere ricevute solo se la PWA è aperta, a differenza di Android dove è possibile in entrambi i modi. Un limite questo, che comunque potrebbe essere eventualmente superato attraverso l’invio di email e/o SMS unitamente alle notifiche push.
In ultimo, la lettura di tag NFC o l’accesso a funzionalità particolari dell’hardware dello smartphone, rappresentano altri casi particolari in cui le PWA non sono utilizzabili perché sono elementi non sempre disponibili in una PWA.
Ti invitiamo a rivedere i nostri webinar sull’argomento:
Conclusioni
Scoperta la mole di vantaggi ottenibili con le PWA, primi fra tutti il miglioramento della user experience, appare chiaro quindi come le PWA possano rappresentare una metodologia in grado di apportare diversi benefici ad ogni business. Per questo motivo le aziende saranno sempre più interessate a questa novità con il passare del tempo e seppure le figure cercate sono complete come il Full Stack Developer, il Mobile Developer, il Front End Developer e il Web Developer, avere conoscenze inerenti alle Progressive Web App è un vantaggio competitivo importante nella ricerca di lavoro.
Conoscere quindi caratteristiche e funzionalità delle PWA, così come essere aggiornati sui linguaggi di programmazione di tendenza per il 2022 è fondamentale per chi vuole lavorare in questo ambito, dove conoscere in tempo utile gli sviluppi e le tendenze delle nuove tecnologie è essenziale per poter essere competitivi nel mondo del lavoro.
Continua a seguire il blog di Reteinformaticalavoro per essere sempre aggiornato su novità e tendenze nel settore tecnologico e se sei in cerca di lavoro vai alle Offerte di lavoro.
