I vantaggi delle applicazioni a pagina singola e delle app Web progressive: Miglioramento della CX

Pubblicato: 2019-06-06

I vantaggi delle applicazioni a pagina singola sono diventati sempre più evidenti poiché l'esperienza del cliente richiede ai fornitori di e-commerce di fornire interazioni rapide e affidabili con loro.

Negli ultimi 20 anni, la maggior parte dei siti Web è stata costruita allo stesso modo, con l'uso di HTML, CSS e JavaScript. Queste tecnologie sono diventate più avanzate nel tempo, ma il principio è rimasto sostanzialmente lo stesso: un utente interagisce con una pagina Web e il browser dell'utente effettua una chiamata a un server Web che, a sua volta, risponde con un altro batch di HTML, CSS e JavaScript, che viene quindi caricato e visualizzato nel browser.

(Whow. È molto.)

Questo processo prevede più comunemente l'aggiornamento della pagina, sebbene alcune tecnologie, come AJAX, consentano agli sviluppatori di modificare alcuni contenuti senza aggiornare l'intera pagina. Per questo motivo, la maggior parte dei siti Web si comporta e si comporta in modo distinto come un sito Web, piuttosto che come un'applicazione.

La maggior parte dei siti Web ha anche un back-end e un livello di presentazione strettamente accoppiati, il che significa che non esiste una vera separazione tra il front-end e il back-end di un sito Web, poiché entrambi fanno parte di un'unica applicazione monolitica.

In che modo le applicazioni a pagina singola e le app Web progressive possono migliorare l'esperienza del cliente

Negli ultimi dieci anni, le app native per iOS e Android sono diventate un luogo comune per quasi tutti noi. Queste applicazioni si comportano in modo diverso rispetto ai siti Web reali, offrendo agli utenti un'esperienza molto diversa e spesso più soddisfacente.

Le pagine non si aggiornano quando viene premuto un collegamento o un pulsante, le modifiche si caricano molto più velocemente e l'esperienza è spesso molto migliore rispetto al sito Web mobile equivalente. Nel caso di un'app di e-commerce nativa, quando un utente fa clic su un collegamento, l'applicazione effettua una chiamata a un server back-end, ma anziché a quel server che restituisce il livello di presentazione HTML, CSS e JavaScript, è semplicemente inviando i dati grezzi richiesti e l'applicazione gestisce il modo in cui vengono visualizzati all'utente.

Ad esempio, se un utente fa clic su un prodotto per visualizzarne i dettagli, l'applicazione chiamerà il server back-end chiedendo i dettagli di quel prodotto e il server risponderà con una stringa di dati che contiene elementi come il nome del prodotto, il suo prezzo e un collegamento a un'immagine, ma non è necessario inviare anche HTML, CSS o JavaScript per definire come verrà visualizzata.

L'applicazione stessa è il livello di presentazione, quindi non ha bisogno di nulla di tutto ciò dal server back-end. Questo è molto più veloce e consente all'applicazione di visualizzare i dettagli del prodotto al cliente senza aggiornare una pagina. La tecnologia offre agli sviluppatori la libertà di creare un'esperienza cliente fluida e fluida senza i vincoli del modello tradizionale.

Non sarebbe fantastico se un'esperienza simile a un'app potesse essere fornita tramite un browser Web in modo che la distinzione tra un'app nativa e un sito Web diventi sfocata?

È qui che entrano in gioco le applicazioni a pagina singola (SPA) e le app Web progressive (PWA).

Che cos'è un'applicazione a pagina singola?

Una SPA è un'applicazione scritta in JavaScript che viene eseguita in un browser Web e in genere non richiede un aggiornamento della pagina per mostrare nuove informazioni.

Quando un utente visita per la prima volta il sito Web, l'applicazione, insieme alle risorse di presentazione (HTML, CSS e alcuni script) vengono caricate nel browser. Da questo momento in poi, l'utente si trova su un'unica pagina Web e l'applicazione carica il contenuto pertinente e modifica la visualizzazione come e quando richiesto.

Proprio come un'app nativa, quando un utente fa clic su un collegamento, l'applicazione chiama il server back-end, che a sua volta invia i dati richiesti in una stringa, che generalmente non include nessuna delle risorse di presentazione, poiché sono già state caricato quando l'utente ha visitato per la prima volta il sito web.

Poiché l'utente è essenzialmente solo su una singola pagina Web, non esiste davvero il concetto di aggiornare una pagina. Al contrario, l'applicazione modifica la pagina per mostrare informazioni diverse quando richiesto.

Gli SPA sono generalmente completamente disaccoppiati dall'applicazione back-end e si interfacciano con il back-end tramite un set di API. Spesso si siederà sul proprio server e può essere distribuito separatamente. In un certo senso, è piuttosto agnostico nei confronti dell'applicazione back-end, poiché invia e riceve semplicemente dati da e verso l'applicazione, trattandola come un sistema di terze parti.

Utilizziamo tutti le SPA da un po' ormai, probabilmente senza nemmeno accorgercene. Facebook, Gmail, Twitter, LinkedIn e Instagram (tra molti altri) utilizzano tutti SPA al posto dei loro siti web.

Se visiti uno di questi siti Web ora, noterai che si comportano in modo molto più simile a un'app nativa che a un sito Web tradizionale. Le pagine raramente, se non mai, si aggiornano quando interagisci con esse e sono molto veloci. Facendo clic su collegamenti e pulsanti si modifica il contenuto che stai guardando, ma elementi come l'intestazione e il piè di pagina non si aggiornano quasi mai una volta caricati inizialmente.

Vantaggi delle applicazioni a pagina singola

Il vantaggio più grande e più ovvio di una SPA è il modo in cui possono essere utilizzate per migliorare l'esperienza del cliente consentendo a designer e sviluppatori di fornire un'esperienza simile a un'app e non essere vincolati dall'approccio tradizionale di ricaricare le pagine.

Ciò richiede un nuovo modo di progettare e pensare, poiché le normali regole non si applicano più, ma i vantaggi per l'esperienza dell'utente possono essere enormi.

Le SPA generalmente caricano il contenuto molto più velocemente rispetto ai siti Web standard, poiché gran parte delle risorse di presentazione (HTML, CSS) vengono caricate solo una volta. Le interazioni con l'applicazione richiedono solo una chiamata al server back-end per recuperare piccole quantità di dati, anziché pagine HTML/CSS completamente formate. L'applicazione può quindi visualizzare rapidamente i dati modificati senza dover ricaricare la pagina.

Poiché una SPA è completamente disaccoppiata dall'applicazione back-end, può essere distribuita separatamente, il che può avere un grande vantaggio. Una piccola modifica al front-end non richiede la distribuzione dell'intera applicazione, il che può essere un compito piuttosto grande e talvolta richiedere tempi di inattività.

Svantaggi di una SPA

Una delle maggiori sfide dell'utilizzo delle SPA è l'impatto che ha sulla SEO. Poiché non hanno sempre la struttura tradizionale di pagine distinte, ciascuna con un URL distinto, ciò può causare problemi con i motori di ricerca che indicizzano il contenuto. Tuttavia, questo può essere contrastato con l'uso di tecniche come il rendering lato server e garantendo che i clic generino URL univoci.

Inoltre, nel tempo sta diventando meno problematico, poiché i bot dei motori di ricerca vengono modificati per far fronte alle SPA. Dopotutto, Google è una delle aziende che li sostiene.

Alcune SPA richiedono un po' di tempo per essere caricate alla prima visita perché le risorse dell'applicazione e della presentazione vengono caricate nella visualizzazione della prima pagina.

Questo è molto evidente con SPA come Gmail, dove hanno un'immagine di caricamento grande quando visiti per la prima volta il sito web. Questo problema può essere contrastato con l'uso del rendering lato server e una programmazione efficiente per garantire che il carico iniziale dell'applicazione e delle risorse non sia troppo grande.

Che cos'è un'app Web progressiva?

Una PWA è un po' difficile da definire, in quanto non è una tecnologia specifica, ma più una metodologia di sviluppo o un insieme di principi che insieme rendono un sito Web o un'applicazione più o meno PWA.

Il termine PWA è stato originariamente coniato da Google, che ha creato una checklist per definire cosa rende una PWA. Tra l'altro Google ha definito che una PWA deve essere:

Sicuro – servito sotto https
Reattivo: si adatta a qualsiasi fattore di forma
In grado di lavorare offline, utilizzando gli operatori del servizio per memorizzare le pagine nella cache
Veloce – in grado di caricare velocemente su una connessione 3G
Simile a un'app: utilizzo della modalità e del design della shell dell'app per sentirsi come un'app
Installabile: usa un file manifest per consentire l'aggiunta dell'app alla schermata iniziale
Coinvolgente: utilizzando strumenti come le notifiche push
Progressivo: funziona su tutti i browser ma è progressivamente migliore sui browser moderni

Come puoi vedere, alcune voci della lista di controllo sono un po' vaghe o soggettive. Puoi anche vedere che alcuni di loro suonano come una SPA. Un sito Web HTML/CSS tradizionale può essere trasformato in una PWA così come una SPA. Una SPA non è automaticamente una PWA, ma ha alcune caratteristiche che la spingono in quella direzione.

Confuso ancora?

Vantaggi delle PWA

Come con una SPA, uno dei maggiori vantaggi di una PWA è il miglioramento dell'esperienza del cliente, conferendogli un aspetto simile a un'app e colmando il divario tra un sito Web mobile tradizionale e un'app iOS o Android nativa.

Funzionalità come la possibilità di salvare nella schermata iniziale o di memorizzare nella cache le pagine tramite gli operatori del servizio possono far sembrare il sito Web un po' come un'app nativa.

Le PWA tendono anche ad essere molto veloci, poiché questo è uno dei principi chiave nella checklist.

Il sistema operativo Android consente ai browser di accedere all'hardware del dispositivo mobile. che consente cose come le notifiche push e l'uso della scansione NFC, che può davvero migliorare la CX.

Svantaggi delle PWA

Il più grande svantaggio delle PWA è la mancanza di supporto da parte di Apple. Per ottenere il meglio da una PWA, deve davvero essere eseguita su un dispositivo Android, poiché il sistema operativo Android consente ai browser di accedere a una quantità significativa di funzionalità sul dispositivo, mentre Apple lo limita fortemente. Questo sta lentamente migliorando, ma c'è ancora molta strada da fare.

Un altro svantaggio è la mancanza di una definizione chiara, che può essere aperta all'interpretazione.

SPA e PWA sono il futuro dello sviluppo di siti web

Sebbene questa tecnologia non sia ancora del tutto mainstream per la maggior parte dei siti Web di e-commerce, è senza dubbio il futuro dello sviluppo di siti Web.

Sebbene le SPA siano una tecnologia specifica che può essere utilizzata per creare un'applicazione di e-commerce, le PWA sono generalmente siti Web creati seguendo una metodologia definita da Google, che ritengono fornisca la migliore esperienza del cliente.

Chiunque sviluppi una SPA dovrebbe mirare a soddisfare il più possibile la checklist PWA al fine di fornire la migliore CX possibile. Queste tecnologie offrono a progettisti e sviluppatori maggiore libertà nell'esperienza e nei viaggi dell'utente, consentendo loro di allontanarsi dal tradizionale modello pagina per pagina.

Molti fornitori di software come SAP e IBM stanno investendo molto nella creazione di front-end SPA per le loro piattaforme di e-commerce e sospetto che entro pochi anni la maggior parte dei siti Web di e-commerce verrà costruita in questo modo, utilizzando framework JavaScript come Angular, Vue, o Reagire.

Verranno creati sempre meno siti di e-commerce utilizzando il tradizionale modello HTML/CSS e il divario tra siti Web e app native diventerà sempre più piccolo, al punto che sarà difficile distinguerli.