PWAs für verschiedene Anzeigemodi optimieren

• Progressive Web Apps (PWAs) sind ein leistungsstarkes Werkzeug, um Webanwendungen wie native Apps wirken zu lassen, und können die User Experience über verschiedene Anzeigemodi optimieren
• Die im Manifest einer PWA festgelegten Anzeigemodi steuern die Sichtbarkeit der Browser-UI und helfen dabei, die Benutzeroberfläche je nach Modus so anzupassen, dass der Unterschied zwischen Web- und App-Erlebnis verringert wird
• Mit CSS-Media Queries und JavaScript lassen sich Inhalte und Funktionen je nach Anzeigemodus anpassen, um eine maßgeschneiderte Erfahrung für die Anforderungen der Nutzer bereitzustellen
• PWA-Nutzer und Besucher einer gewöhnlichen Website haben unterschiedliche Erwartungen, daher sollten Navigation, Installationsaufforderungen und Inhalte je nach Anzeigemodus optimiert werden
• Die Optimierung für einzelne Anzeigemodi lässt PWAs ausgereifter und app-ähnlicher wirken und ist eine wichtige Technik, um das App-Erlebnis im Web zu verbessern

---

PWA-Anzeigemodi und warum Optimierung nötig ist

• PWAs sind eine Technologie, mit der sich Webanwendungen wie native Apps umsetzen lassen; sobald sie die klassische Browser-Umgebung verlassen, können jedoch Usability-Probleme auftreten
  • Funktionen des Browsers wie Zurück, Aktualisieren oder das Kopieren der URL könnten fehlen
  • Elemente, die für Websites geeignet sind, können in einer App-Umgebung unnatürlich wirken
• Im manifest konfigurierbare Anzeigemodi sind unter anderem:
  • fullscreen: blendet die gesamte Browser-UI aus und nutzt den Vollbildmodus
  • standalone: blendet Browser-Steuerelemente aus und wirkt wie eine native App
  • minimal-ui: zeigt nur minimale Browser-UI-Elemente an
  • browser: bietet die Standard-Browseroberfläche
• Wenn die Browser-UI ausgeblendet wird, kann sich das auf die User Experience auswirken; deshalb ist eine Optimierung je nach Anzeigemodus unverzichtbar

Media Queries für Anzeigemodi nutzen

• Mit Media Queries lassen sich Stil und Funktionalität abhängig vom Anzeigemodus anpassen
  • Beispiel: @media (display-mode: standalone) gilt nur im Standalone-Modus
  • Unterstützt werden auch Queries für fullscreen, minimal-ui und browser
• Die experimentellen Modi window-controls-overlay und tabbed können über display_override in benutzerdefinierter Reihenfolge festgelegt werden
  • window-controls-overlay: zeigt auf dem Desktop Fenstersteuerungs-Schaltflächen als Overlay an
  • tabbed: unterstützt mehrere Anwendungsumgebungen in einem einzelnen Fenster
• Auch per JavaScript lassen sich Anzeigemodi erkennen und dynamisch anpassen
  • Beispiel: Mit window.matchMedia("(display-mode: standalone)").matches lässt sich der aktuelle Modus prüfen
  • Bei einem Moduswechsel können Events erkannt und die UI dynamisch angepasst werden

Praktische Einsatzbeispiele

• Maßgeschneiderte Inhalte für PWA-Nutzer: Wer eine PWA installiert hat, ist bereits ein konvertierter Nutzer, daher sollte weniger Marketing-Content angezeigt und stärker auf die User Experience fokussiert werden
  • Unnötige Elemente wie Installationsaufforderungen sollten ausgeblendet werden
• Zusätzliche Optionen bereitstellen: Wenn keine Browser-UI vorhanden ist, werden In-App-Alternativen für Dinge wie Schriftgrößenanpassung, Hell-/Dunkelmodus oder Teilen benötigt
• Plattformgerechte Funktionen: Eine in nativen Mobile-Apps verbreitete untere Navigationsleiste passt gut zu PWAs, wirkt auf einer Website jedoch unnatürlich
  • Funktionen wie ein Druck-Button sollten im PWA-Modus besser verborgen werden
• Installationsaufforderungen steuern: In bereits installierten PWAs sollten keine Installationsaufforderungen mehr erscheinen; das lässt sich per Media Queries oder JavaScript steuern
  • Beispiel: Mit einer Utility-Klasse wie .hide-in-pwa können Elemente im PWA-Modus ausgeblendet werden
• Strategie für Scope und Start-URL: Mit scope und start_url lassen sich Inhalte zwischen PWA- und Web-Umgebung differenzieren
  • scope: definiert den obersten Pfad der PWA; außerhalb dieses Bereichs wird wieder Browser-UI angezeigt
  • start_url: legt fest, welche Seite beim Start der App angezeigt wird, etwa direkt ein Dashboard
• View Transitions verbessern: Der aus nativen Apps bekannte Effekt von View Transitions kann gezielt nur für PWAs eingesetzt werden
  • Beispiel: View-Transition-CSS innerhalb von @media (display-mode: standalone) definieren

Browser-Unterstützung und Tests

• Media Queries für Anzeigemodi werden von den meisten Browsern breit unterstützt
  • Firefox unterstützt keine PWAs; Firefox für Android zeigt nur den browser-Modus an
  • Mit Progressive Enhancement lässt sich in nicht unterstützten Browsern ein natürliches degradierendes Verhalten sicherstellen
• Tests sollten in verschiedenen Umgebungen durchgeführt werden, da sich das Verhalten je nach Gerät und Browser unterscheidet
  • Browser bieten keine Simulation von Anzeigemodi, daher sind Tests auf realen Geräten und mit realen OS-Kombinationen notwendig

Zusammenfassung und Implikationen

• Mit der display-mode-Media-Query können PWAs je nach Installations- und Anzeigekontext eine adaptive Erfahrung bieten
  • Installationsaufforderungen ausblenden, Navigation unterstützen, Inhalte anpassen, das Native-Gefühl verstärken und schrittweise verbessern
• PWA-Nutzer haben andere Anforderungen und Erwartungen als gewöhnliche Web-Besucher, daher ist eine sorgfältige Abstimmung je nach Anzeigemodus erforderlich
• Je ausgereifter PWAs werden, desto wichtiger sind sorgfältige Implementierung und Optimierung für ein attraktives App-Erlebnis
• Weitere Informationen finden sich in Smashing Magazines „Extensive Guide To Progressive Web Applications“

[ndrgrd]

Firefox unterstützt PWAs in der Nightly-Version ebenfalls wieder. Bald soll das auch in Stable kommen.

[draupnir]

Da man es über den Umweg des Browsers nutzen muss, bevorzuge ich eigentlich immer native Apps, aber wenn es um PWAs geht, finde ich das Thema trotzdem immer spannend.
Man strebt zwar dieselbe Optimierung an, aber in eine andere Richtung …