Mobile Commerce mit SAP Commerce Cloud (ehemals Hybris): Funktionen, Performance und PWA

In den meisten Onlineshops beginnt die Mehrheit der Sitzungen auf dem Smartphone. Die mobilen Fähigkeiten einer Commerce-Plattform entscheiden deshalb darüber, ob Kunden überhaupt bei Ihnen kaufen können, und nicht darüber, ob der Shop modern aussieht.

Viele Unternehmen behandeln Mobile noch immer als verkleinerte Desktop-Seite. Das ist der falsche Weg: zuerst für das Smartphone gestalten, dann das Layout auf den grossen Bildschirm erweitern.

SAP Commerce Cloud, das Produkt, das früher SAP Hybris hiess, bedient Mobile auf drei Ebenen: die responsive SAP Composable Storefront (ehemals Spartacus), Funktionen einer Progressive Web App (PWA) und die OCC-REST-APIs, die jedes Frontend und jede native App aufrufen kann. Im Folgenden, was jede Ebene leistet und wo ihre Grenzen liegen.

Kurzfassung: SAP Commerce Cloud bedient mobile Kunden über die responsive, Angular-basierte Composable Storefront, PWA-Funktionen wie Caching und «Zum Startbildschirm hinzufügen» sowie OCC APIs, die auch native Apps versorgen. Für die meisten B2C- und B2B-Shops reicht eine gut gebaute PWA. Eine native App lohnt sich für Barcode-Scans, AR oder intensive Offline-Nutzung. Den grössten mobilen Gewinn bringt meist Performance-Arbeit an Bildern, JavaScript und Caching.

Wie unterstützt SAP Commerce Cloud Mobile?

Die mobile Unterstützung von Commerce Cloud funktioniert auf drei Ebenen.

Ebene 1: die responsive Storefront. SAP Composable Storefront ist eine Angular-Anwendung, deren Komponenten sich an die Bildschirmgrösse anpassen: Raster klappen zusammen, die Navigation wechselt in ein Menü, Touch-Flächen sind für Finger bemessen. Die Grundlagen, sauber umgesetzt. Wir haben einmal einen Shop übernommen, dessen frühere Implementierung auf Mobile 32 Pixel grosse Touch-Flächen hatte, und die Kunden tippten ständig daneben. Die Standardwerte der Composable Storefront sind hier vernünftig. (Wer noch auf der älteren Accelerator-Storefront läuft, findet den Umstieg in unserem Leitfaden zur Migration auf die Composable Storefront.)

Ebene 2: Progressive Web App. Die Composable Storefront bringt PWA-Unterstützung mit: einen Service Worker für das Caching und eine installierbare Web-App mit «Zum Startbildschirm hinzufügen». Kein App Store, kein Freigabeprozess, kein eigener Release-Zyklus. SAP beschreibt den PWA-Funktionsumfang als noch im Ausbau (SAP Help: Progressive Web Application Support). Push-Benachrichtigungen und weitergehendes Offline-Verhalten erfordern deshalb meist Projektarbeit.

Ebene 3: OCC APIs. Die REST-APIs von Omni Commerce Connect liefern strukturiertes JSON, und die Antworten lassen sich über Feldsets verschlanken, damit die Datenmengen im Mobilfunknetz klein bleiben. Das zählt bei schwachem Empfang in einem Bergtal, und es ist dieselbe API, die auch eine native App nutzen würde.

Brauchen Sie eine native App?

Für die meisten Commerce-Anwendungsfälle nicht. Eine PWA deckt das Caching bereits angesehener Inhalte, «Zum Startbildschirm hinzufügen» und eine App-ähnliche Navigation ab, mit etwas Projektarbeit auch Push-Benachrichtigungen. Das genügt für die grosse Mehrheit der B2C- und B2B-Szenarien.

Eine native App lohnt sich, wenn Sie AR-Produktvisualisierung brauchen, Gerätehardware wie Barcode-Scanner oder GPS, umfangreiche Offline-Funktionen (etwa im Aussendienst) oder spezielle B2B-Workflow-Apps. Wovon wir abraten: eine native App vor allem deshalb zu bauen, damit die Marke ein Symbol im App Store hat. Entwicklung und Wartung kosten real Geld, und ohne einen Anwendungsfall, den das Web nicht abdeckt, bleiben die Downloads niedrig.

Wenn Sie sich für native entscheiden, versorgen die OCC APIs die App genauso wie die Web-Storefront. Gleiches Backend, anderes Frontend. Ob die Composable Storefront oder ein Frontend in React oder Next.js besser zu Ihrem Team passt, ist eine eigene Frage. Sie beantworten wir in SAP Composable Storefront vs. React und Next.js.

Welche Performance-Arbeit bringt mobil am meisten?

Eine langsame mobile Storefront verliert bei jedem Tippen Kunden. Die Core Web Vitals von Google sind der praktische Massstab:

• LCP (Largest Contentful Paint): das Hauptbild innerhalb von 2,5 Sekunden auf Mobile. Mit responsiven Bildern, Lazy Loading und einem CDN.
• INP (Interaction to Next Paint): das JavaScript-Paket durch Lazy Loading und Code-Splitting klein halten.
• CLS (Cumulative Layout Shift): Breite und Höhe von Bildern explizit setzen und Platz für dynamische Inhalte reservieren.

Optimierungen speziell für Commerce Cloud:

• Bildkomprimierung und Auslieferung im WebP-Format
• CDN-Caching für statische Inhalte und geeignete API-Antworten
• Serverseitiges Rendering (SSR) in der Composable Storefront, damit die ersten Inhalte schneller erscheinen
• Lazy Loading für Produktbilder unterhalb des sichtbaren Bereichs
• Schlanke Antworten der Such-API für mobile Produktkarten

Nichts davon ist glamourös. Aber es macht den Unterschied zwischen einem mobilen Shop, der verkauft, und einem, der auf jeder Seite Kunden verliert. Wenn Sie einen Blick von aussen auf Ihre Storefront möchten, sprechen Sie mit unserem Commerce-Team oder lesen Sie, wie wir die SAP-Commerce-Cloud-Partner in der Schweiz vergleichen. Mehr zur Plattform selbst finden Sie auf unserer Seite zu SAP Commerce Cloud.

Häufige Fragen

Unterstützt SAP Commerce Cloud Apple Pay und Google Pay?

Ja, über den angebundenen Zahlungsdienstleister, zum Beispiel Adyen, Stripe oder einen Schweizer Anbieter. Die Wallets werden beim Zahlungsdienstleister aktiviert und konfiguriert, nicht in Commerce Cloud selbst.

Wie geht die Storefront mit schlechter Verbindung um?

Der Service Worker der PWA speichert statische Inhalte und bereits angesehene Seiten zwischen, sodass das Stöbern auch bei schwachem Netz funktioniert. Transaktionen brauchen weiterhin eine Verbindung: Der Checkout lässt sich offline nicht abschliessen.

Kann ich unterschiedliche Layouts für Mobile und Desktop haben?

Ja. Responsives CSS passt die Komponenten automatisch an. Brauchen Sie andere Inhalte statt nur einer anderen Anordnung, können Sie Komponenten in SmartEdit für bestimmte Zielgruppen personalisieren oder einschränken.

Wie funktioniert die mobile Suche?

Dasselbe Such-Backend (im Standard Solr) bedient beide Kanäle. Die Storefront passt die Oberfläche an: Suche im Vollbild, touchfreundliche Filter und Facetten-Panels.

Wie sieht es mit Barcode-Scans im B2B aus?

Commerce Cloud bringt keine Scan-Funktion mit. Sie brauchen eine native App oder eine PWA, die den Kamerazugriff des Browsers nutzt. Mehrere Partnerkomponenten ergänzen diese Fähigkeit.