Mobile commerce con SAP Commerce Cloud (ex Hybris): funzionalità, prestazioni e PWA

Nella maggior parte dei negozi online, la maggioranza delle sessioni inizia sullo smartphone. Le capacità mobili di una piattaforma di commercio decidono quindi se i clienti possono acquistare da voi, non se il negozio sembra moderno.

Molte aziende trattano ancora il mobile come una versione ridotta del sito desktop. È l’approccio sbagliato: prima si progetta per lo smartphone, poi si estende il layout allo schermo grande.

SAP Commerce Cloud, il prodotto noto in precedenza come SAP Hybris, gestisce il mobile su tre livelli: il SAP Composable Storefront responsive (ex Spartacus), le funzioni di Progressive Web App (PWA) e le API REST OCC richiamabili da qualsiasi frontend o app nativa. Di seguito che cosa fa ciascun livello e dove sono i suoi limiti.

In sintesi: SAP Commerce Cloud serve i clienti mobili con il Composable Storefront responsive basato su Angular, con funzioni PWA come la cache e l’aggiunta alla schermata Home, e con le API OCC che alimentano anche le app native. Per la maggior parte dei negozi B2C e B2B basta una PWA ben costruita; un’app nativa conviene per la scansione di codici a barre, la realtà aumentata o un uso offline intenso. I miglioramenti mobili più grandi arrivano di solito dal lavoro sulle prestazioni di immagini, JavaScript e cache.

Come gestisce il mobile SAP Commerce Cloud?

Il supporto mobile di Commerce Cloud si articola su tre livelli.

Livello 1: lo storefront responsive. SAP Composable Storefront è un’applicazione Angular i cui componenti si adattano alle dimensioni dello schermo: le griglie si compattano, la navigazione passa a un menu, le aree touch sono dimensionate per le dita. Le basi, fatte bene. Una volta abbiamo preso in carico un negozio la cui implementazione precedente usava su mobile aree touch di 32 pixel, e i clienti toccavano continuamente l’elemento sbagliato. I valori predefiniti del Composable Storefront qui sono sensati. (Chi usa ancora il vecchio storefront Accelerator trova il passaggio nella nostra guida alla migrazione al Composable Storefront.)

Livello 2: Progressive Web App. Il Composable Storefront include il supporto PWA: un service worker per la cache e un’app web installabile con aggiunta alla schermata Home. Nessun app store, nessun processo di approvazione, nessun ciclo di rilascio separato. SAP descrive l’insieme delle funzioni PWA come ancora in fase di ampliamento (SAP Help: Progressive Web Application Support), per cui notifiche push e un comportamento offline più avanzato richiedono di solito lavoro di progetto.

Livello 3: API OCC. Le API REST di Omni Commerce Connect restituiscono JSON strutturato, e le risposte possono essere alleggerite con set di campi per contenere il volume di dati sulle reti mobili. Conta quando la connessione è debole in una valle di montagna, ed è la stessa API che userebbe un’app nativa.

Serve un’app nativa?

Per la maggior parte dei casi d’uso commerciali, no. Una PWA copre la cache dei contenuti già visitati, l’aggiunta alla schermata Home e una navigazione simile a un’app, e con un po’ di lavoro di progetto anche le notifiche push. Basta per la grande maggioranza degli scenari B2C e B2B.

Un’app nativa conviene quando servono visualizzazione dei prodotti in realtà aumentata, hardware del dispositivo come lettore di codici a barre o GPS, funzioni offline estese (per esempio per la forza vendita sul campo) o app dedicate ai processi B2B. Quello che sconsigliamo è sviluppare un’app nativa soprattutto perché il marchio abbia un’icona nell’App Store: sviluppo e manutenzione hanno un costo reale e, senza un caso d’uso che il web non copre, i download restano bassi.

Se si sceglie il nativo, le API OCC servono l’app esattamente come lo storefront web. Stesso backend, frontend diverso. Se al vostro team si adatti meglio il Composable Storefront o un frontend in React o Next.js è un’altra questione, che trattiamo in SAP Composable Storefront o React e Next.js.

Quale lavoro sulle prestazioni conta di più su mobile?

Uno storefront mobile lento perde clienti a ogni tocco. I Core Web Vitals di Google sono il metro pratico:

• LCP (Largest Contentful Paint): l’immagine principale entro 2,5 secondi su mobile, con immagini responsive, caricamento differito e CDN.
• INP (Interaction to Next Paint): ridurre il JavaScript con caricamento differito e suddivisione del codice.
• CLS (Cumulative Layout Shift): impostare larghezza e altezza delle immagini e riservare spazio ai contenuti dinamici.

Ottimizzazioni specifiche per Commerce Cloud:

• Compressione delle immagini e distribuzione in formato WebP
• Cache CDN per le risorse statiche e per le risposte API adatte
• Rendering lato server (SSR) nel Composable Storefront per mostrare prima i primi contenuti
• Caricamento differito delle immagini dei prodotti sotto la parte visibile
• Risposte snelle dell’API di ricerca per le schede prodotto su mobile

Niente di tutto questo è spettacolare, ma fa la differenza tra un negozio mobile che vende e uno che perde clienti a ogni pagina. Per uno sguardo esterno sul vostro storefront, parlate con il nostro team Commerce oppure leggete il nostro confronto dei partner SAP Commerce Cloud in Svizzera. La piattaforma è presentata nella nostra pagina SAP Commerce Cloud.

Domande frequenti

SAP Commerce Cloud supporta Apple Pay e Google Pay?

Sì, tramite il fornitore di servizi di pagamento integrato, per esempio Adyen, Stripe o un fornitore svizzero. I wallet vengono attivati e configurati presso il fornitore di pagamento, non in Commerce Cloud.

Come gestisce lo storefront una connessione scarsa?

Il service worker della PWA memorizza nella cache le risorse statiche e i contenuti già visitati, così la navigazione resta possibile anche con rete debole. Le transazioni richiedono comunque una connessione: il checkout non si può completare offline.

Si possono avere layout diversi per mobile e desktop?

Sì. Il CSS responsive adatta automaticamente i componenti. Se servono contenuti diversi e non solo una disposizione diversa, SmartEdit permette di personalizzare o limitare i componenti per pubblici specifici.

Come funziona la ricerca su mobile?

Lo stesso motore di ricerca (Solr nella configurazione standard) serve entrambi i canali. Lo storefront adatta l’interfaccia: ricerca a schermo intero, filtri e pannelli di facette adatti al touch.

E la scansione dei codici a barre nel B2B?

Commerce Cloud non include la scansione. Serve un’app nativa o una PWA che usi l’accesso alla fotocamera del browser; diversi componenti di partner aggiungono questa funzione.