Sviluppo e-commerce PWA: cosa fare e cosa non fare quando si investe

Hai difficoltà a convincere i tuoi clienti che utilizzano dispositivi mobili a convertire? O forse desideri che i tuoi clienti possano utilizzare il tuo sito web come un'app? La PWA per l'e-commerce potrebbe essere la soluzione necessaria che ti aiuterà a colmare il divario tra web e dispositivi mobili, incrementare le vendite e migliorare notevolmente la CX. 

Le moderne PWA consentono alle aziende di e-commerce di utilizzare metodologie di sviluppo contemporanee unendo gli attributi più vantaggiosi del web design convenzionale con quelli inerenti alle applicazioni specifiche della piattaforma.

Contenuto:
PWA e-commerce: cosa vale la pena lanciarla?
Come costruire una buona PWA per l'e-commerce?
PWA per l'e-commerce: potenziali pericoli e insidie
Funzionalità PWA
Soluzioni PWA basate su piattaforma e-commerce
Storie di successo di PWA e-commerce
Costi di sviluppo PWA e-commerce

PWA e-commerce: cosa vale la pena lanciarla? 

Poiché sempre più attività informatiche vengono eseguite tramite browser Web, il confine tra app online e programmi desktop è meno chiaro. E le PWA mirano a offuscare ulteriormente questa linea.

Fondamentalmente, le PWA sono un tipo specifico di app Web che può essere creata per funzionare come programmi desktop autonomi. 

Avviare una PWA non significa avere tutte le cose belle come la scalabilità e la ricercabilità per impostazione predefinita, automaticamente, quindi dovrai assicurarti che il tuo team di sviluppo lo stia facendo nel modo giusto. Se sei pronto per lanciare una PWA, dovresti allinearti ai criteri descritti di seguito.    

Allora, cos'è che gli sviluppatori devono lavorare così duramente per implementare nelle PWA?

Come costruire una buona PWA per l'e-commerce?

Velocità

Prestazioni online superiori, caratterizzate sia da velocità che da qualità, catturano e sostengono efficacemente il coinvolgimento degli utenti in misura maggiore rispetto a prestazioni mediocri (immagina un po'). Dare la priorità alle metriche incentrate sull’utente dovrebbe essere della massima importanza a causa del ruolo cruciale che la velocità gioca nel favorire il coinvolgimento degli utenti. Perché preoccuparsi? Naturalmente, i tempi di caricamento lenti delle pagine innescano un aumento del 123% della frequenza di rimbalzo.   

Funziona con qualsiasi browser

La PWA deve funzionare su tutti i browser web. Garantire così l'accessibilità e perfezionare la UX. In questo modo, il processo di sviluppo inizia in genere con HTML per le funzionalità di base, seguito da CSS e JavaScript per UX. I moduli HTML possono trasmettere dati utilizzando richieste POST, con JavaScript per la convalida e l'invio AJAX. 

Qualsiasi dimensione dello schermo

Grazie alla loro capacità di adattarsi alle varie dimensioni del viewport, le PWA consentono ai tuoi clienti di consumare contenuti senza problemi su diversi dispositivi, indipendentemente dal dispositivo specifico utilizzato. L'importanza di ciò sta nel fatto che i tuoi clienti possono utilizzare la stessa applicazione su dispositivi di dimensioni diverse. Il contenuto dovrebbe rimanere coerente indipendentemente dalle dimensioni del viewport, anche se la sua disposizione potrebbe richiedere modifiche.

Può essere installato 

Quando una PWA è installata su un dispositivo, mostra un comportamento paragonabile a quello di altre applicazioni installate, poiché si apre in una finestra separata e appare nel task manager del dispositivo. È stato osservato che il download dell'applicazione di un'azienda in quanto tale aumenta la probabilità di ritorno, rispetto alla navigazione casuale. Ciò comprende un aumento dei tassi di conversione, della durata media delle sessioni e delle visite ripetute. 

Disponibile offline

Le PWA dovrebbero essere progettate per funzionare senza una connessione Internet. I tuoi clienti devono avere accesso a vari contenuti, come itinerari di viaggio, biglietti d'imbarco, file multimediali, post sui social media e articoli di notizie. Sebbene l'autenticazione offline sia fondamentale per la sicurezza, l'accessibilità e la modificabilità dei contenuti sono essenziali per l'usabilità negli ambienti offline. IndexedDB, un database NoSQL, può archiviare e sincronizzare i dati in modo basato su browser, supportando operazioni asincrone. Gli addetti ai servizi possono archiviare gli elementi multimediali in una cache, consentendone il recupero anche con Internet disattivato. 

ricercabile 

Dato che la maggior parte dei visitatori di un sito web, oltre il 50%, deriva dalla ricerca organica, la rilevabilità della tua PWA può essere notevolmente migliorata. La creazione di URL canonici per i contenuti e l'indicizzazione dei siti web da parte dei motori di ricerca sono cruciali per migliorarne la reperibilità. 

Qualsiasi input

La PWA dovrebbe supportare vari metodi di input, come il mouse o lo stilo, garantendo transizioni fluide per gli utenti indipendentemente dalle dimensioni dello schermo. Ad esempio, la funzionalità touch dovrebbe essere supportata su viewport di grandi dimensioni, mentre i viewport più piccoli dovrebbero dare priorità all'input da tastiera e mouse. L'applicazione web progressiva dovrebbe adattarsi a vari metodi di input e migliorare le interazioni dell'utente con funzionalità specifiche dell'input come il pull-to-refresh. 

PWA per l'e-commerce: potenziali pericoli e insidie

Quali sono le preoccupazioni quando si decide di lanciare una PWA di e-commerce? Quali sono gli inconvenienti e come evitarli?

Percezione e fiducia

La percezione e la fiducia associate alle PWA continuano a essere rovinate dall'idea prevalente che si tratti di applicazioni inferiori o addirittura non riconosciute come applicazioni. Gli utenti sono abituati alla pratica di cercare applicazioni su piattaforme digitali come Google Play o App Store e potrebbero non avere familiarità con il concetto di installazione diretta di applicazioni dai siti web. La fiducia è una considerazione importante poiché i consumatori si sono abituati a fare affidamento sugli app store per verificare la sicurezza delle applicazioni scaricate.

Installazione

Il processo di installazione di una PWA su iOS richiede che gli utenti accedano al pannello Condividi e quindi scelgano l'opzione "Aggiungi alla schermata iniziale". La procedura è più complessa rispetto all'installazione di un'applicazione iOS nativa. L'esperienza dell'utente potrebbe essere migliorata se Safari includesse il supporto per primaInstallPrompt evento o modificare la lingua della richiesta in "Installa l'app".

Modificazione manifesta

Gli elementi essenziali di un manifest PWA, inclusi l'icona, il nome e le schermate iniziali, non sono facilmente modificabili dopo l'installazione della PWA. Sebbene ci siano stati recenti progressi nella versione desktop di Chrome che consentono la modifica dei nomi delle applicazioni, il miglioramento della flessibilità nella modifica degli attributi manifest aumenterà la competitività delle PWA.

Gestione dell'ambito

La gestione dell’ambito nelle PWA può talvolta presentare sfide a causa della sua natura controintuitiva. Il problema delle barre finali può portare a incoerenze nella definizione degli ambiti, introducendo quindi la possibilità di errori. Inoltre, nel contesto di iOS, quando si tenta di accedere a un collegamento ipertestuale all'interno dei confini di una PWA da un'applicazione esterna, il comportamento predefinito è quello di avviare il browser Safari invece della PWA designata.

Accesso al dispositivo

La questione in questione riguarda se alle PWA debba essere concesso l’accesso a servizi nativi, come contatti, calendario, SMS/MMS e allarmi, nonostante i vantaggi intrinseci in termini di sicurezza derivanti dal loro ambito limitato. Abilitare le PWA con accesso a queste funzionalità potrebbe potenzialmente compromettere le misure di sicurezza e offuscare la distinzione tra PWA e applicazioni native.

Notifiche push su iOS 

Le notifiche push su iOS non erano accessibili per le PWA fino a un periodo recente. Di conseguenza, gli sviluppatori non potevano fare affidamento sulle notifiche push come mezzo per trasmettere informazioni cruciali agli utenti iOS. Apple ha recentemente dichiarato l'intenzione di fornire supporto per le notifiche push sui dispositivi iOS a partire dal 2023. Molti consumatori, tuttavia, hanno espresso la loro insoddisfazione per le richieste di notifiche push a causa del loro sfruttamento da parte dei siti web. Di conseguenza, i browser Web hanno incluso meccanismi di blocco automatico di questi messaggi.

Funzionalità PWA

Le PWA forniscono un'esperienza utente mobile simile a quella nativa nonostante siano molto più leggere (ad esempio, la dimensione della PWA BookMyShow è 54 volte più piccola dell'app Android e 180 volte più piccola dell'app iOS) rispetto alle app native. Queste app utilizzano un design web reattivo e un miglioramento progressivo per adattare il loro stile visivo e le loro funzionalità alle capacità del dispositivo e del browser web dell'utente. 

Come le app native, le PWA possono essere installate tramite il browser Web e visualizzate sulla schermata iniziale del dispositivo mobile. Notifiche push, aggiornamento automatico dei contenuti e navigazione e interazione simili a quelle di un'app sono tutti disponibili con le PWA.

Per l'e-commerce, ciò significa che le PWA consentono la creazione di esperienze di acquisto digitale senza soluzione di continuità su diversi dispositivi e browser, fornendo la facilità e le prestazioni delle app mobili native senza le limitazioni di sviluppo e distribuzione separati. 

Le PWA consentono alle aziende di e-commerce di creare negozi online più coinvolgenti che sembrano vere e proprie app per i clienti su qualsiasi dispositivo.

Su cosa si basa una PWA

1. Lavoratori di servizio la tecnologia è fondamentale per il lancio della PWA. Con notifiche push, memorizzazione nella cache e funzionalità offline, l'interfaccia utente sembra quella di un'app mobile.
2. Il manifesto dell'app web è un file JSON che specifica il nome, le icone e la combinazione di colori dell'app. Con questa funzionalità, gli utenti possono aggiungere la PWA ai segnalibri.
3. Per motivi di privacy e sicurezza, HTTPS è obbligatorio.
4. I codici HTML, CSS e JavaScript necessari sono inclusi nella shell dell'app. Qui vengono configurati il ​​framework e l'interfaccia utente dell'app.
5. Inutile dire che, grazie alla loro versatilità nel rispondere a varie dimensioni di visualizzazione, i siti Web reattivi possono essere una base perfetta per le PWA.

PWA: in cosa differisce da un'app mobile nativa

Google Play e App Store forniscono l'accesso ad app native sviluppate appositamente per le loro piattaforme. Queste applicazioni non necessitano di alcun software intermediario per accedere alle funzionalità e alle API del dispositivo.

Questo è il motivo per cui le applicazioni native funzionano in modo più fluido e hanno una maggiore interazione con il sistema operativo.

Le PWA sono lodate per la loro capacità di essere indipendenti dalla piattaforma, di funzionare su diverse piattaforme e browser Web e di ottenere aggiornamenti automaticamente. 

PWA ecommerce: in cosa differisce da un sito web responsive

Mentre l'obiettivo principale sia delle PWA che dei siti Web reattivi è migliorare l'esperienza dell'utente, le PWA imitano le funzionalità delle app mobili native, come l'interfaccia utente e le notifiche push. Inoltre, i siti Web reattivi mirano a fornire un'esperienza di visualizzazione fluida su diversi dispositivi senza la necessità di software aggiuntivo.

PWA, app native e siti Web reattivi 

Sviluppare PWA per e-commerce da zero o convertire da legacy?

Se attualmente disponi di un sito Web di e-commerce o di un'app nativa e stai pensando di lanciare una PWA di e-commerce, potresti chiederti se è meglio iniziare da zero o convertire le tue risorse legacy.

In generale, la conversione di un sito Web responsivo è l’approccio più semplice. Il codice è già basato sul web e ottimizzato per le diverse dimensioni dello schermo. La conversione di un'app nativa richiede l'aggiornamento del codice esistente per funzionare sul Web. Lo sviluppo di PWA per e-commerce da zero offre la migliore esperienza ma richiede più lavoro.

Conversione da un sito Web responsivo

Pro: riutilizza contenuto/design web esistente, familiarità con gli standard web

Contro: non ottimizzato per le funzionalità PWA, potrebbe richiedere uno sforzo aggiuntivo per l'implementazione

Conversione dall'app nativa

Pro: riutilizza la logica dell'app e il frontend

Contro: necessita di aggiornamenti per conformarsi agli standard PWA, lavoro extra per supportare il web

Sviluppare PWA da zero

Pro: Completamente personalizzato per gli standard PWA fin dall'inizio

Contro: Maggiori tempi/costi coinvolti 

PWA: in cosa differisce dagli altri framework ibridi 

PWA tende a offrire un'esperienza utente più fluida rispetto ad altri framework ibridi. Ad esempio, PWA consente funzionalità offline ed è possibile accedervi tramite un browser Web, mentre alcune app ibride devono essere scaricate e installate.

PWA contro ionico 

Ionic è un framework per la creazione di app mobili ibride. Sebbene la PWA possa essere eseguita su qualsiasi dispositivo dotato di un browser compatibile, Ionic offre un'esperienza più nativa con accesso alle funzionalità del dispositivo.

PWA contro Flutter

Fondamentalmente, Flutter è un framework per la creazione di app mobili native. Flutter utilizza il linguaggio di programmazione Dart. E, mentre PWA è più adatta per app incentrate sui contenuti, Flutter è migliore per applicazioni complesse e visivamente ricche.

PWA e React Native

React Native è un framework open source per la creazione di app mobili utilizzando React. React può essere utilizzato anche per sviluppare il front-end di una PWA, fornendo un'interfaccia utente reattiva e interattiva.

Soluzioni PWA basate su piattaforma e-commerce

Magento PWA Studio

Le PWA possono essere create con l'aiuto di Magento PWA Studio, una suite di strumenti e librerie create per questo scopo. La piattaforma sfrutta strumenti all'avanguardia come React, Redux e GraphQL per creare negozi online reattivi e potenti.

Kit PWA Salesforce Commerce Cloud

Se stai cercando di creare una PWA di e-commerce sulla piattaforma Salesforce Commerce Cloud, il kit PWA di Commerce Cloud ti offre tutto ciò di cui hai bisogno per iniziare. Per raggiungere l'obiettivo di fornire un'esperienza di acquisto reattiva e coinvolgente, questa soluzione utilizza framework JavaScript come React e Vue.js.

Architettura di riferimento della vetrina virtuale di Salesforce Commerce Cloud (SFRA)

Storefront Reference Architecture (SFRA) di Commerce Cloud è un altro framework utile per la creazione di PWA. Quando si creano PWA per Commerce Cloud, il framework SFRA può fornire una solida base. Maggiore adattabilità e numerose opzioni di personalizzazione sono solo due dei numerosi vantaggi che offre.

SAP Commercio Spartacus

Su SAP Commerce Cloud, le PWA possono essere sviluppate con l'aiuto del robusto framework SAP Commerce Spartacus. Il frontend dell'applicazione è basato su Angular e comunica con i servizi backend di SAP Commerce Cloud senza intoppi evidenti.

Vue Storefront

Vue Storefront è un framework open source avanzato realizzato per la creazione di negozi online scalabili e affidabili. Il framework Vue.js viene utilizzato per creare rapidamente PWA in grado di adattarsi alle esigenze degli utenti e fornire un'esperienza fluida e reattiva. Le notifiche push e la possibilità di navigare sul Web mentre sei disconnesso sono due caratteristiche degne di nota.

Altri strumenti PWA di e-commerce da considerare

• ScandiPWA: soluzione PWA open source appositamente progettata per la piattaforma Magento 2.
• Gatsby: generatore di siti statici che può essere utilizzato per creare PWA con React.‍
• GoPWA: framework di sviluppo PWA per la creazione di PWA scalabili e performanti.

Storie di successo di PWA e-commerce

Molte aziende, tra cui alcune delle più grandi nel campo dell’e-commerce, hanno già trovato la PWA piuttosto efficace. 

I due parametri più cruciali, i tassi di conversione (molti esempi hanno mostrato aumenti del tasso di conversione dal 27% a oltre l'80%) e di coinvolgimento (gli esempi includevano 3 volte più tempo sul sito, visualizzazioni di pagina più elevate, più prodotti visualizzati), mostrano stabilmente un notevole miglioramento.

Tuttavia, i vantaggi di PWA non finiscono qui:

• Prestazioni migliorate: molti hanno segnalato tempi di caricamento molto più rapidi, un minore utilizzo dei dati e una riduzione del rimbalzo.
• Aumento del traffico/nuovi clienti: alcuni hanno visto il doppio degli utenti giornalieri, il 2% di nuovi clienti provenienti da PWA.
• Maggiori entrate – Casi con maggiori entrate per visita, entrate dal traffico in aumento del 79%.
• Costi inferiori: costi di acquisizione dei clienti inferiori, dimensioni delle app molto più piccole rispetto a quelle native.
• Accesso offline: consente di continuare a fare acquisti senza una connessione Internet.
• Notifiche push: promuovi un aumento del ricoinvolgimento, dei tassi di clic e dei carrelli recuperati.
• Accesso attraverso piattaforme: esperienza unificata su qualsiasi dispositivo tramite tecnologie web.
• Funzionalità di tipo nativo: funzionalità hardware/sistema operativo sfruttate normalmente solo nelle app native.

Costi di sviluppo PWA e-commerce

Lo sviluppo di PWA e-commerce comporta spese di sviluppo e manutenzione paragonabili allo sviluppo di siti Web di e-commerce. Tuttavia, le PWA possono essere eseguite su una varietà di dispositivi più ampia rispetto alle applicazioni native e non sono previsti costi aggiuntivi per l'accesso all'hardware o il posizionamento negli app store. 

Fonte da Grinteq

Dichiarazione di non responsabilità: le informazioni sopra riportate sono fornite da grinteq.com indipendentemente da Alibaba.com. Alibaba.com non rilascia alcuna dichiarazione o garanzia in merito alla qualità e all'affidabilità del venditore e dei prodotti.