Herausforderungen bei der Migration von Web-Komponenten zu einer Progressive Web App

Wenn die mobile Anwendung eine Progressive Web App (PWA) ist und sich den Code mit der Desktop-Webanwendung teilt, erfordert die Migration von Komponenten vom Web auf Mobilgeräte oft nur geringfügige Anpassungen an plattformspezifische Besonderheiten. Doch dieser scheinbar einfache Prozess bringt auch einige Herausforderungen mit sich. In diesem Artikel werde ich einige der häufigsten Herausforderungen beleuchten, auf die man bei der Migration achten sollte.

‍

Übrigens, wenn Sie neugierig sind, welches Framework wir bei ilert für unsere App verwenden, lesen Sie unseren Artikel „Ionic vs. React Native: Welche Technologie eignet sich besser für mobile Apps?“ 

Was ist eine Progressive Web App (PWA) und warum ist die Migration von Desktop zu Mobile damit einfacher?

Falls Sie bereits mit PWAs gearbeitet haben, können Sie dieses Kapitel gerne überspringen.

‍

Eine Progressive Web App, kurz PWA, ist eine Webanwendung, die das Beste aus beiden Welten kombiniert. PWAs nutzen moderne Web-Technologien wie Offline-Unterstützung, Push-Benachrichtigungen und Installierbarkeit, laufen aber dennoch in einem Browser. Da eine PWA einen gemeinsamen Codebase für verschiedene Plattformen verwendet, ist die Migration von Komponenten einer Desktop-Webanwendung zu einer mobilen PWA oft einfacher als der Wechsel zu einer vollständig nativen mobilen App. Viele Komponenten können mit minimalen Anpassungen wiederverwendet werden – hauptsächlich durch die Optimierung für Touch-Steuerung, unterschiedliche Bildschirmgrößen und mobile UI-Patterns.

‍

Doch auch wenn der gemeinsame Code die Entwicklungszeit erheblich reduziert, erfordert das unterschiedliche Nutzerverhalten sowie die spezifischen Plattformbeschränkungen gezielte Anpassungen, um eine nahtlose Benutzererfahrung zu gewährleisten. Schauen wir uns also genauer an, welche Herausforderungen dabei auftreten.

‍

Touch vs. Klick / Finger vs. Cursor

Der offensichtlichste, aber dennoch entscheidende Unterschied liegt in der Art und Weise, wie Nutzer mit Desktop- und mobilen Anwendungen interagieren. Damit eine mobile App gut bedienbar ist, müssen interaktive Bereiche größer gestaltet sein. Zudem gibt es bei Touchscreens keine Hover-Zustände – stattdessen sind nur „Fokus“ oder „Aktiv“-Zustände verfügbar.

‍

Ein Beispiel: In einer Webanwendung funktioniert ein Dropdown-Menü mit Hover-Effekten gut, da Nutzer es mit der Maus präzise steuern können. Auf Mobilgeräten wird dasselbe Dropdown jedoch schnell frustrierend in der Bedienung. Eine bessere Lösung ist stattdessen ein Modal oder ein Vollbild-Menü mit großen, einfach zu treffenden Flächen zum Tippen.

‍

In der Webanwendung würde der Code für diese Komponente in JSX ungefähr so aussehen:

‍

1<Popover>
2	<PopoverContent>
3		<Stack>
4			<Searchbar />
5			<List />
6		</Stack>
7	</PopoverContent>
8</Popover>
9

‍

Bei der Umstellung dieser Komponente auf Mobilgeräte mit dem Ionic-Framework sieht der JSX-Code so aus:

‍

1<IonModal>
2	<IonHeader>
3	   <Searchbar />
4	</IonHeader>
5	<ModalContent>
6		<IonList>
7			<IonItem>
8				<IonListHeader>
9					<IonLabel>Option 1</IonLabel>
10				</IonListHeader>
11			</IonItem>
12   		  	…
13   	 </IonList>
14	</ModalContent>
15</IonModal>

‍

Ein Modal stellt sicher, dass der Inhalt im Vollbildmodus angezeigt wird, während die Liste mit Elementen große Touch-Flächen bietet. Falls weniger Anpassungen erforderlich sind, stellt Ionic außerdem eine spezielle Komponente für Dropdowns bereit, die die Migration noch weiter vereinfacht:

1<IonSelect value={selectedValue} onIonChange={handleChange}>
2	<IonSelectOption value="option1">Option 1</IonSelectOption>
3	<IonSelectOption value="option2">Option 2</IonSelectOption>
4	<IonSelectOption value="option3">Option 3</IonSelectOption>
5</IonSelect>

Ein ähnliches Problem tritt bei Tooltips auf. Auf dem Desktop können Nutzer mit der Maus über ein Element hovern, um zusätzliche Informationen in einem Tooltip anzuzeigen. Auf Mobilgeräten gibt es jedoch keine Hover-Funktion. Stattdessen wird ein längeres Halten eher als Aktion verstanden, z. B. zum Öffnen eines Kontextmenüs, anstatt lediglich eine kurze Information anzuzeigen. In solchen Fällen ist es oft besser, die relevanten Informationen direkt sichtbar zu machen oder ein zusätzliches Modal zu verwenden.

Visuelle Unterschiede

Mobile Bildschirme sind kleiner und ermöglichen es Inhalten nur vertikal zu wachsen, während Webanwendungen in der Regel mehr Platz in der Breite haben. Dank der größeren Bildschirme kann der Inhalt auf dem Desktop sowohl vertikal als auch horizontal wachsen.

‍

Ein Beispiel: In einer Webanwendung werden alle Menüeinträge einer Navigationsleiste horizontal dargestellt. Auf mobilen Geräten hingegen wird dieselbe Navigationsleiste oft in ein Hamburger-Menü umgewandelt, um Platz zu sparen.

‍

Ein weiteres Beispiel betrifft Popovers: Während Popovers in der Webanwendung oft ausreichen, fehlt auf mobilen Geräten häufig der nötige Platz, um den Inhalt vollständig anzuzeigen. Das Problem wird noch deutlicher, wenn sich innerhalb des Popovers ein Dropdown-Menü befindet, da dieses auf Mobilgeräten wiederum ein weiteres Modal erfordert. Die Lösung besteht darin, mehrere Modals übereinander zu stapeln, sodass genügend Platz für alle Inhalte vorhanden ist.

Aktion: Alarme annehmen

Die Navigation mit einer Maus ermöglicht präzisere Bewegungen und Klicks, wodurch versehentliche Aktionen reduziert werden. Auf Mobilgeräten führen der kleinere Bildschirm und die Touch-Bedienung hingegen häufiger zu Fehleingaben. Um dieses Problem zu lösen, benötigen mobile Apps oft Bestätigungsschritte und eine durchdachte Platzierung von Aktionsbuttons.

Beispiel aus der ilert-Mobile-App: Alarmannahme auf Desktop vs. Mobile:

• Web: Button oben links, keine Bestätigung erforderlich
• Mobil: Button in der unteren Aktionsleiste, zusätzliches Bestätigungsdialogfeld

‍

‍

Während der „Annehmen“-Button oben auf dem Desktop gut erreichbar ist, wird er auf dem Handy in die untere Aktionsleiste verschoben, damit er bequem mit dem Daumen erreicht werden kann.

Schritte zur Migration von Desktop-Komponenten zu einer Progressive Web App

Die endgültige Migration von der Desktop-App zur PWA hängt stark von der Komplexität der Komponenten, dem Einsatzzweck und der Verwendung einer Komponentenbibliothek ab.

Im Allgemeinen sollten folgende Schritte befolgt werden:

• Wiederverwendbare Komponenten identifizieren
• Hover-Effekte ersetzen
• Touch-Interaktionen implementieren
  • Interaktionen bei Bedarf vereinfachen
• Prüfen, ob eine Orientierungserkennung nötig ist
• Schriftgrößen und visuelle Elemente für verschiedene Bildschirmgrößen skalieren

Der Einsatz einer Komponentenbibliothek wie Ionic erleichtert den Prozess erheblich, da sie plattformspezifische Style-Anpassungen bietet und native Funktionen integriert. Falls jedoch ein konsistentes Design über alle Geräte hinweg gewünscht ist, kann eine individuelle Lösung von Anfang an sinnvoller sein, um späteren Mehraufwand zu vermeiden.