Web-Service AS: deine Experten für Single Page Applications und Progressive Web Apps
Wir sind Alexandr und Sascha von Web Service AS, wir entwickeln Single Page Applications und Progressive Web Apps schnell, sauber und ganz auf deinen Bedarf zugeschnitten.
Wir haben uns ganz auf die Entwicklung von Single Page Applications (SPAs) und Progressive Web Apps (kurz: PWAs) konzentriert, denn wir sind von den Technologien überzeugt und haben schon einige dieser Anwendungen zum Leben erweckt. Wir glauben, dass sie die Zukunft des mobilen Internets sind und einen Großteil der Native Apps, die du aus den App-Stores kennst, verdrängen werden.
Doch was genau verbirgt sich hinter den beiden Technologien – und warum nennen wir sie in einem Atemzug?
Doch der Reihe nach: Was sind eigentlich…
Single Page Applications
Single Page Applications (SPAs) sind eine Art von Web-Anwendungen, die im Browser der Nutzer:innen geladen werden und nur eine einzige Seite haben. Im Gegensatz zu herkömmlichen Mehr-Seiten-Anwendungen, bei denen bei jedem Klick eine neue Seite vom Webserver geladen wird, wird bei einer SPA die gesamte Anwendung auf einmal geladen.
Führt eine Person eine Aktion aus, wird nur ein Teil der Website oder bestimmte Inhalte verändert, ohne dass der Rest der Anwendung neu geladen werden muss. SPAs eignen sich besonders für Community-Webseiten mit nutzergeneriertem Content oder für Webseiten mit großen Mengen an dynamischen Content, der sich laufend ändert, und viele interaktive Elementen beinhaltet. Sie sind sehr schnell und komfortabel und fühlen sich für an wie eine richtige Native App.
Die Vorteile von SPAs sind vielfältig. Sie bieten
- großartige Usability
- auf alle Bildschirmgrößen angepasste Gestaltung (Responsiveness) und Personalisierung
- geringere Server-Belastung
- einfachere Fehlerbehebung
Allerdings gibt es auch einige Nachteile von SPAs. Sie haben langsamere anfängliche Ladezeiten (weil eben große Teile zu Beginn auf einmal geladen werden müssen), Herausforderungen bei der Suchmaschinenoptimierung und beim Tracking für die Web-Analyse.
Was haben SPAs und Progressive Web App gemein?
Progressive Web App basieren auf Single Page Applications. Eine PWA ist eine SPA, die bestimmte Kriterien erfüllen muss, um als „progressiv“ zu gelten.
Das “Progressive” in Progressive Web App bedeutet, dass die Anwendung zunächst den Inhalt von der Webseite herunterlädt und dann nach und nach mehr Ebenen und Funktionalitäten hinzufügt – abhängig vom Browser und der Internet-Verbindung des Nutzers. Daher sind PWAs für alle Plattformen geeignet (auch wenn auf sehr alten Browser-Versionen nur die relevantesten Informationen erscheinen).
Darüber hinaus bieten PWAs deinen Nutzer:innen bestimmte zusätzliche Funktionen wie Push-Benachrichtigungen, Offline-Zugriff und lokales Caching (darauf gehen wir später noch genauer ein), durch die sich die Nutzung deiner Anwendung noch mehr nach richtiger App anfühlt.
Jetzt ist die beste Zeit, eine SPA / PWA zu gestalten oder deine bestehende App aus den App-Stores in eine PWA zu verwandeln. Die Technologie macht enorme Fortschritte, deine Konkurrenz schläft vielleicht noch… Bring deine PWA jetzt mit uns zum Fliegen!
Und mit Web-Service AS hast du einen Partner, der
- dich offen und ehrlich über Chancen und Grenzen berät,
- die Technologie aus dem Effeff beherrscht,
- zuverlässig und sauber arbeitet,
- bereits einige PWAs mit Erfolg umgesetzt hat oder daran arbeitet (z. B. Bau.io, Kalendu, KyotoQuiz)
- (jetzt noch) günstig ist – wir wollen uns einen begeisterten Kundenstamm aufbauen!
Progressive Web Apps: schnell, verlässlich und fesselnd
Im Folgenden nennen wir dir die Vorteile von PWAs und vermitteln dir die Technologie. Schließlich wollen wir auch dich überzeugen. Die Erklärung funktioniert am besten, wenn wir PWAs mit den so genannten “Native Apps” vergleichen. Das sind die Apps, die du dir aus Apples App Store oder Google Play herunterladen kannst.
PWAs finden ganz im Browser statt, fühlen sich aber wie eine Native App an. Man kann sich PWAs wie eine Symbiose aus einer responsiven Website und einer Native App vorstellen. Vor allem diese drei Eigenschaften bringen das App-Gefühl in deine PWA:
Icon auf dem Startbildschirm
Deine Nutzer können die PWA auf den Homescreen ihres Smartphones oder Tablets herunterladen. So lädt sie deine Nutzer von prominenter Stelle zur Interaktion ein. Das verstärkt ihre Bindung zu deinem Angebot.
Offline-Nutzung
Auch wenn deine Nutzer keine oder keine stabile Verbindung haben – deine PWA ist nie offline. Wenn dein Nutzer online ist, lädt die PWA vorsorglich die wichtigsten Daten im Hintergrund herunter. Praktisch, oder?
Push-Benachrichtigungen direkt an deine Nutzer
Deine PWA sendet Push-Nachrichten an deine Kunden. Du bleibst in Kontakt mit deinen Kunden, selbst wenn sie gerade nicht im Internet sind und kannst sie über neue Inhalte oder Rabatte in deinem Shop benachrichtigen.
Chancen und Grenzen von Progressive Web Apps
Doch damit nicht genug! Die Liste der Vorteile von PWAs ist lang – und wird im Zuge der Weiterentwicklung von Browsern immer länger. Wir haben dir hier eine Auswahl zusammengestellt:
Schnell verteilt: Deine PWA ist ganz simpel über eine URL zu erreichen. Und einen Browser hat so gut wie jedes Smartphone oder Tablet. Damit trägst du deine Inhalte, Produkte und Services auf direktem Weg zu deinen Nutzern – ohne die Vertriebshürde “App-Download”. Bei Nativen Apps liegen einige Schritte zwischen dem Finden der App im App Store und der tatsächlichen Nutzung. Bei PWAs entfallen diesen Schritte.
Schnell geladen: Vom Homescreen starten PWAs sofort, ganz gleich, ob deine Nutzer keinen oder unbeständigen Empfang haben. Schnell verfügbar sein ist wichtig: Google hat herausgefunden, dass 53 % der Nutzer eine Website verlassen, wenn sie länger als 3 Sekunden lädt. Studie
Keine Downloads: Mit PWAs müssen deine Nutzer keine Apps oder Updates aus den App-Stores herunterladen. Du sparst deinen Kunden Aufwände. Du selbst musst dich nicht mit teils undurchschaubaren Review-Prozessen, Gebühren, Updates und geografischen Restriktionen der App-Stores herumschlagen.
Gesucht? Gefunden! PWAs laufen im Browser. Damit können deine User die PWA wie andere Websites als Lesezeichen speichern und leicht zu dir zurückkehren. Außerdem sind deine Inhalte für Suchmaschinen auffindbar. Damit kannst du dir eine Traffic-Quelle aufbauen, um noch mehr Nutzer zu erreichen.
Teilen erwünscht! Da PWAs über URLs erreichbar sind, lassen sich Links über die Social-Media-Plattformen teilen! So können dich deine treusten Fans weiterempfehlen!
Daten sparen! PWAs sind schlanke Anwendungen, die das Datenvolumen deiner Nutzer schonen. Damit sind PWAs sehr interessant für Länder mit einem schwach ausgebauten Mobilnetz.
Gerne interaktiv! PWAs eignen sich durch ihre schnelle Reaktionsfähigkeit auf Eingaben deiner User und butterweiche Animationen besonders für Seiten, die User zur Interaktion einladen, wie zum Beispiel für Kontaktformulare, Rechner, Check-out-Prozesse oder Kontaktformulare.
EINE Entwicklung! Wieso für deine responsive Website, Android-App und iOS-App dreifache Entwicklungs- und Wartungsaufwände betreiben? Mit einer PWA reduzieren sich die Arbeiten auf eine Anwendung, die auf allen Plattformen eine gute Figur macht.
Bei all den Vorteilen muss es doch auch ein paar Probleme mit PWAs geben. Wir sind ehrlich: Die gibt es auch. Wie bei jeder neuen Technologie, unterstützen nicht alle Betriebssystem und Browser alle Funktionen. Du kannst dir aber sicher sein, dass auf Android nahezu auf allen aktuellen Browser-Versionen die wichtigsten Funktionalitäten wie Homescreen-Icon, Offline-Funktionalität und Web-Push-Notifications laufen. Bei Apple hält sich die Unterstützung noch in Grenzen, aber auch hier scheint sich ein Wandel einzustellen. In der Version 12.2 von iOS (2019) hat das Unternehmen aus Cupertino das Betriebssystem mit neuen PWA-Features ausgestattet.
Im Gegensatz zu Native haben PWAs nur eingeschränkten Zugriff auf die Hardware. Das betrifft unter anderem Funktionen wie den Fingerprint-Scanner, Near Field Communication (NFC), Geo-Fencing, Ambient Light oder eine weiträumige Kontrolle über die Kamera. Zumindest noch. Auch hier zeichnen sich Entwicklungen ab, wonach die Funktionen, die bisher Native Apps vorenthalten waren, auch PWAs zur Verfügung gestellt werden.
Beratung auf Augenhöhe
Du siehst: Wir sehen PWAs nicht nur durch die rosarote Brille. Uns ist es wichtig, dich offen und ehrlich zu beraten. Wir sagen dir, wo die Chancen und Grenzen deiner Wunsch-PWA sind.
Wir könnten dir an dieser Stelle noch viel mehr über weitere Facetten der PWAs erzählen, zum Beispiel den Service Worker, Routing, Data Binding, Angular und, und, und. Aber hier soll es nicht um technische Details gehen (die sind unser Job). Vielmehr geht es um die Verwirklichung deiner Vision von einer App, um dein Geschäftsmodell, um die bestmögliche Erfahrung für deine Nutzer.
Wir können es kaum erwarten, mit dir zusammen eine PWA zum Leben zu erwecken oder eine Native App in eine PWA zu verwandeln.
Wir freuen uns auf dich und deine Vision!
Alex und Sascha