Progressive Web Application einrichten

Eine Progressive Web Application (PWA) ist eine webbasierte Anwendung, die auf Mobilgeräten ein App-ähnliches Nutzererlebnis bietet. Eine PWA ermöglicht es Nutzern, den Web Shop direkt auf ihrem Startbildschirm zu installieren, sodass sie schnell darauf zugreifen können, ohne einen Browser öffnen und manuell zum Shop navigieren zu müssen.

Bei Plattformen mit eingeschränkter Weiterleitung bietet die PWA den Nutzern eine direktere und bequemere Möglichkeit, zum Shop zu gelangen, wodurch unnötige Schritte entfallen und die Interaktion erleichtert wird. Durch den optimierten Zugriff verbessert die PWA die Nutzerbindung und motiviert dazu, häufiger etwas zu kaufen.

PWA-Installationsablauf für den Nutzer

• Auf iOS-Geräten
• Auf Android-Geräten

1. Der Nutzer öffnet den Web Shop auf seinem Mobilgerät.

2. Im Web Shop wird am unteren Bildschirmrand ein Banner mit einer Aufforderung zur Installation der Anwendung angezeigt.

3. Der Nutzer klickt auf Hinzufügen.

4. Im Web Shop werden die Installationsanweisungen für die PWA angezeigt.

5. Der Nutzer folgt den Anweisungen. Danach erscheint die PWA auf dem Startbildschirm des Geräts.

1. Der Nutzer öffnet den Web Shop auf seinem Mobilgerät.

2. Im Web Shop wird am unteren Bildschirmrand ein Banner mit einer Aufforderung zur Installation der Anwendung angezeigt.

3. Der Nutzer klickt auf Hinzufügen.

4. Der Nutzer bestätigt die Installation im Dialogfenster.

5. Die PWA wird automatisch installiert und erscheint auf dem Startbildschirm und im App-Drawer.

Einrichtung

1. Öffnen Sie Ihr Projekt im Kundenportal, und navigieren Sie zum Menüpunkt Storefronts > Websites.
2. Klicken Sie bei der gewünschten Web-Shop-Website auf Site Builder öffnen.
3. Wechseln Sie zu den Web-App-Einstellungen.
4. Aktivieren Sie den Schalter Web-App aktivieren.

5. Passen Sie das Banner für die Aufforderung, die Anwendung zu installieren, an (optional):
   • Wählen Sie im Menü Overlay auswählen die Option Web-App-Installationsbanner aus.
   • Ändern Sie die Überschrift des Banners.
   • Ändern Sie den Sekundärtext des Banners.
   • Legen Sie einen eigenen Hintergrund fest.
   • Ändern Sie den Schaltflächenstil.

6. Passen Sie die Installationsanweisungen an (optional). Wählen Sie im Menü Overlay auswählen die Option iOS-Benutzerhandbuch aus.

7. Legen Sie das Erscheinungsbild der PWA auf dem Nutzergerät fest:
   1. Vergeben Sie einen Namen für Ihre PWA. Dieser wird auf dem Startbildschirm bzw. im App-Drawer des Nutzergeräts angezeigt.
   2. Laden Sie ein Symbol für die PWA hoch.

Hinweis

Wenn das App-Symbol und das Spielsymbol identisch sind, empfehlen wir, die Option Symbolrahmen anzeigen zu aktivieren. Dadurch wird ein Rahmen um das Shop-Symbol angezeigt, sodass Nutzer es leichter vom Spiel unterscheiden können.

8. Veröffentlichen Sie die Website, um die Änderungen zu übernehmen.

Nützliche Links