Warum Progressive Web Apps die besseren Web-Apps sind!

Progressive Web Apps - denn nativ war gestern

Apps kennen Sie, und wahrscheinlichen nutzen Sie sie jeden Tag: Sie sind ausgehend von den App-Stores von Google oder Apple relativ sicher, einfach zu bedienen und auch ohne Internetzugang lauffähig (sofern sie nicht auf internetbasierte Daten zugreifen). Web-Apps, die im Browser laufen, versagen gerade beim letzten Punkt – aber unter anderem genau dies ändert sich durch Progressive Web Apps (PWAs).

Progressive Apps als Lückenschließer

Kurz erklärt können Sie sich eine PWA als ein Programm vorstellen, das aktuelle Web-Technologien nutzt, um die Welt der Browser-Apps mit den nativen Apps auf Smartphone & Co. zu verschmelzen. Vielleicht haben Sie schon einmal gehört, dass wir bereits im Post-App-Zeitalter angekommen sind? Progressive, webbasierte Apps sind ein sicheres Anzeichen dafür.

Konkret können Sie sich eine beliebige App vorstellen, die Sie auf Ihrem Smartphone (oder allen anderen Geräteklassen) installiert haben. Allerdings ist dieser Typ App nicht nativ hinterlegt, sondern funktioniert in der Browserumgebung. Das Sandbox-artige Umfeld sorgt für Sicherheit, gleichzeitig kann die App aber auch ohne Internetzugang verwendet werden. PWAs entschärfen in der App Entwicklung somit das Problem, wenn Nutzer in eher ländlichen Gegenden oder auf Zugfahrten ohne permanente Netzabdeckung ihre Apps nutzen möchten. Auch in einzementierten Büros im Keller könnten Sie diese Apps problemlos verwenden.

Damit wird jetzt nicht in einem Sumpf aus Stichpunkten ertrinken, bringen wir die genannten Vorteile noch einmal fein säuberlich sortiert in eigenen Punkten unter.

Vorteil 1: PWAs sind schön schnell

Progressive Web-Apps sind in unterschiedliche Elemente eingeteilt. Bei jedem Start wird zuerst die Application Shell geladen, also praktisch das Grundgerüst der App. Diese Shell steht, sofern im Cache, sofort bei Programmöffnung zur Verfügung und ist Teil des Nutzerinterfaces. Der eigentliche Content wird erst anschließend in die App geladen. Sinnvoll ist diese Unterteilung unter anderem, damit das Caching – einer der großen Vorteile von PWAs – zum Zuge kommen kann.

Falls die Application Shell im Cache vorliegt, kann beim späteren Programmstart das Interface fast augenblicklich zur Verfügung stehen. Content, der sich ebenfalls im Cache befindet – wenn also z.B. keine aktive Internetverbindung vorhanden ist – wird dann schnell noch ebenfalls in die Shell geladen. Der Content ist also dynamisch, die Application Shell jedoch statisch. Daraus resultiert ein deutlich wahrnehmbarer Geschwindigkeitszuwachs. Durch die separate Speicherung beider Elemente steigt gleichzeitig der Bedarf an RAM nicht an.

Verschiedene Frameworks wie Ionic können das bereits sehr anschaulich in der Praxis: Tabs, Menüs und andere Interfaceelemente werden sofort beim Start der App geladen und anschließend durch Service Worker – darauf kommen wir gleich zu sprechen – in den Cache gelegt. Inhalte kommen dann je nachdem, was gerade benötigt wird.

Vorteil 2: PWAs können es auch ohne Internet

Wir haben es gerade schon erwähnt: Caching sorgt bei statischen Inhalten für schnelles Laden von Interface-Elementen. Der eigentliche Content wird, sofern benötigt, dann ebenfalls aus dem Cache geholt und dem Nutzer angezeigt. Damit das klappt, sind Progressive Web Apps mit Service Workers ausgestattet. Im Kern sind es „einfache“ JavaScript-Dateien, die von bestimmten Events getriggert werden. Dabei handelt es sich um Events, die ohne Nutzeraktion anfallen – wenn also z.B. gerade die Internetverbindung gekappt wurde. Was dann passiert, hängt vom Service Worker ab. Denkbar sind die Bereitstellung von Offline-Features, Push-Nachrichten oder auch die Aktualisierung von Inhalten ohne Internetverbindung.

Denken Sie dabei an eine News-App: Sie haben sie seit etwa einer Stunde nicht geöffnet und vor einer halben Stunde haben Sie die Internetverbindung verloren. Beim erneuten Öffnen der App werden Sie trotzdem immerhin die Nachrichten von vor einer halben Stunde sehen können, da diese noch im Cache liegen. Bei gestörten Verbindungen sehen Sie dann keine Nachrichten à la „Server nicht erreichbar“, sondern einfach die zuletzt verfügbaren Inhalte. Aktuell kann nur Chrome mit Service Workers umgehen, allerdings gibt es schon eine Library des Polymer Projects, die dieselben Funktionen für Edge, Firefox und Safari auf macOS und iOS verfügbar macht.

Vorteil 3: simple Installation

Mobile Web-Apps mit Internetzwang litten unter dem Nachteil, von Betriebssystemen nicht wie echte Apps behandelt zu werden. Das heißt, dass sich beispielsweise kein Icon auf den Homescreen pinnen ließ. Für erfahrene Nutzer kein Problem, für den Durchschnittsanwender aber schon – und ohne Mainstream-Adoption werden Funktionen niemals populär. Zumindest unter Chrome bei der Nutzung von Android gibt es aber schon Abhilfe. (Progressive) Web-Apps lassen sich dort unter Mithilfe eines Installations-Buttons auf dem Homescreen darstellen.

Damit unterscheidet sich der Installationsprozess nicht mehr großartig zwischen Web-Apps und nativen Apps. Auch für die App Entwicklung stellt dies keine große Hürde dar. Falls eine mobile Webseite genauso wie eine native App behandelt werden soll, reicht das Vorhandensein einer manifest.json-Datei auf dem Webserver. Über diese Datei gelingt dann die Installation. Wie gesagt, gibt es diese Funktion bislang leider nur in Android und nur bei der Nutzung von Chrome. iOS wäre sicherlich auch ein gutes Zugpferd, um diesen Typ App zu etablieren.

Nachteile der progressiven Apps

Wo viel Licht ist, darf ein bisschen Schatten nicht fehlen. Beispielsweise ist es progressiven Web-Apps untersagt, auf Hardwarefunktionen zuzugreifen, wie es bei nativen Web-Apps der Fall ist. Soll also ein Projekt umgesetzt werden, das Zugang zu einer bestimmten Funktion benötigt, sind Entwickler bislang noch an native Apps gebunden.

Ein letzter Nachteil, der aber nicht lange Bestand haben dürfte, ist die Tatsache der momentan noch schwierigen Verbreitung. Progressive Web Apps funktionieren nur mit bestimmten Betriebssystemen und Browsern, plattformunabhängig wie reine Web-Apps sind sie damit noch nicht. Das dürfte aber nur eine Frage der Zeit sein.

Fazit

Dass progressive Web-Apps die Zukunft sind, steht praktisch außer Frage. Bis dahin ist zwar noch ein wenig Entwicklungsarbeit zu leisten, aber das war in der Vergangenheit bei neuer Technologie auch nicht anders. Wenn Sie schon einmal auf den fahrenden Zug aufspringen möchten und der Konkurrenz einen Schritt voraus sein möchten, können Sie sich gleich an uns wenden. Bei Orlyapps beraten wir Sie von A bis Z und entwickeln, falls gewünscht, auch gleich Ihr Projekt.