11.12.2020 – Kategorie: IT

PWAs als Single-Page-Apps – eine unschlagbare Kombination

Progressive Web Apps (PWAs) sind derzeit auf dem Vormarsch. Beim Aufbau gilt es, zu Beginn weitreichende Entscheidungen zu treffen. Geklärt werden muss unter anderem, ob die Anwendung als Multi-Page- oder Single-Page-Anwendung laufen soll.

Eine Kernfrage, die bereits früh in der Planung geklärt werden muss, ist die Aufbaustrategie von Progressive Web App. Grundsätzlich gibt es zwei unterschiedliche Aufbautypen einer Webseite, MPAs oder Single-Page-Apps. Zum einen die altbewährte Variante der Multi-Page-Anwendung (MPA), bei der eine Webseite aus mehreren Unterseiten besteht. Jedes Mal, wenn der Benutzer die Unterseite wechselt, lädt der Browser die Seite neu.

Die zweite Aufbaumöglichkeit ist, dass die Unterseiten einer Webseite nicht komplett neu geladen werden, sondern nur das Grundgerüst der Seite – zum Beispiel Header und Footer – bleiben erhalten und der Inhalt dazwischen wird per JavaScript nachgeladen. Dieser Ansatz heißt Single-Page-Anwendung (SPA). Die Umsetzung der beiden Ansätze ist grundverschieden. Es werden ganz andere Technologien und Programmiersprachen verwendet. Da der Umbau von der einen in die andere Variante nicht möglich ist, ist die Entscheidung zu Beginn des Projektes enorm wichtig. Single-Page-Anwendungen bieten gegenüber den traditionellen MPAs zahlreiche Vorteile.

So funktionieren Single-Page-Apps

Eine Single-Page-App fordert das Template für die Darstellung und die Daten für den Inhalt unabhängig voneinander an. Es wird zunächst nur eine schlanke HTML-Seite geladen und alle weiteren Inhalte werden per JavaScript nachgeladen. Der Server dient dann „nur noch“ als Daten-Lieferant und ist vom User Interface unabhängig. Müssen beispielsweise Produktdaten für eine Kategorie-Seite angezeigt werden, fragt das JavaScript den Server gezielt nach den Produktdaten für diese Kategorie und erhält als Antwort alle Informationen als unformatierte Rohdaten. Die Seite wird also erst „clientseitig“ im Browser des Nutzers gerendert.

Diese Vorteile bieten Single-Page-Anwendungen

Durch diesen Aufbau ermöglichen Single-Page-Apps eine hervorragende User Experience (UX). Denn durch das Nachladen der Inhalte muss die Seite nicht neu geladen werden, es entsteht keine zusätzliche Wartezeit. Die Seitenübergänge können außerdem durch Animationen flüssiger gestaltet werden. Das ist besonders bei Plattformen mit enormen User-Zahlen sinnvoll: Die Last des Renderns – also der Vorgang des Seitenaufbaus – wird auf den Client übertragen, da das JavaScript im Browser des Benutzers ausgeführt wird. Die serverseitige Infrastruktur wird somit entlastet.

Zudem ermöglichen Single-Page-Apps eine einfache Zustandsverfolgung. Es sind keine Cookies nötig, um den Status von einer Seite bis zur nächsten zu speichern. Als Single-Page-Anwendung aufgebaute PWAs bieten also kürzere Ladezeiten, flüssige Animationen und eine simplere Zustandsverfolgung. Dadurch verbessern sie die User Experience erheblich, was sich in einer höheren Conversion Rate und steigenden Umsätzen für Händler niederschlägt.

Lesen Sie auch: Customer Journey Management: Kundenentscheidungen in den Mittelpunkt stellen