App Shell
Eine App Shell, auch Application Shell Architecture genannt, bildet die Basis einer Progressive Web App. Sie beinhaltet ein auf das Wesentliche reduziertes HTML, CSS und JavaScript. Da die App Shell beim Abruf gecacht wird, laden Progressive Web Apps besonders schnell und bieten Nutzern nahezu eine Echtzeit-Performance.
Hintergrund
Mobile Internetnutzer sind in Bezug auf Ladezeiten besonders fordernd. Als Benchmark haben sich drei Sekunden etabliert. Lädt die Webseite innerhalb dieser Zeitspanne nicht, springt rund die Hälfte aller Nutzer ab. Aus diesem Grund haben sich gerade im Mobile-Bereich Techniken wie AMP oder Progressive Web Apps (PWA) etabliert. Sie versprechen eine sehr gute User Experience, da sie nahezu in Echtzeit laden.
Die App Shell bildet für PWA eine Art „Gerüst“ mit den wesentlichen Bestandteilen der Webanwendung, die bei einem weiteren Seitenaufruf nicht mehr geladen werden müssen. Meist wird nur der Content nachgeladen.
Bestandteile der App Shell
Welche Elemente zur App Shell gehören, entscheiden Entwickler im Vorfeld. Sie müssen prüfen, welche Bereiche elementar für das Webdesign und die Funktionalität der Webapp sind.
Zu den zentralen Elementen der App Shell gehören der Common Header, die Navigation, Platzhalter für Content und der Footer.
Vorteile
- Navigation nahezu in Echtzeit: Da statische Elemente für die Benutzeroberfläche im Cache gespeichert werden, lädt die Seite in Echtzeit, wenn Nutzer wiederholt darauf zurückgreifen. Selbst Content kann bereits beim ersten Besuch in den Cache geladen werden.
- Interaktion wie mit einer nativen App: Dank des App-Shell-Modells können Nutzer mit PWAs ähnlich wie mit nativen Apps interagieren, auch dann, wenn das Smartphone offline ist.
- Geringer Datenverbrauch: Durch das minimalistische Design und die reduzierten Codes müssen nur geringe Mengen an Daten geladen werden.
Nutzen für Usability und Development
Durch den Einsatz von App Shells können sich Entwickler zum einen Arbeit sparen, da sie bestimmte Elemente immer wieder verwenden können. Zum anderen bietet die App Shell die Möglichkeit, Webanwendungen oder PWAs noch schneller zu machen, ohne dafür Konfigurationen am Server optimieren zu müssen. Für Nutzer hat die App Shell den Vorteil, dass sich zum Beispiel PWAs wie native Apps speichern und nutzen lassen. Auch die offline-Nutzung ist mit Hilfe der App Shell möglich.
Einzelnachweise