Wissenswertes zu den Themen Webdesign, Responsive Webdesign, Web-Entwicklung, Homepage Erstellung und Contao

Eine Progressive Web App ist eine Website die spezielle Eigenschaften besitzt und die Lücke zwischen Webapplikationen und nativen Anwendungen schließt.
Der von Google initiierte Ansatz ist so etwas wie eine Symbiose zwischen einer nativen App und einer responsive HTML 5 Website. Die Progressive Web App gilt als eine Schlüsseltechnologie bei der Annäherung von Mobile und Web.

Was versteht man eigentlich unter einer Progressive Web App?

Durch ihre Anpassung an das jeweilige Endgerät bzw. den jeweils verwendeten Browser, vereint die Progressive Web App die Eigenschaften von nativen Apps und Websites. Aufgerufen wird sie wie eine herkömmliche Website durch Eingabe der URL.
Webseitenbetreiber müssen also nicht eine mobile oder responsive Website und zusätzlich eine native App entwickeln, was die Entwicklungskosten erheblich reduziert. Die Progressive Web App lässt sich nicht nur wie eine Website mittels URL aufrufen, sie stellt auch gleichzeitig Offline-Funktionalitäten bereit. Sie ist installierbar, lässt sich über den Homescreen-Button über viele Devices hinweg aufrufen. Die Basis für die Offline-Funktionalität ist ein Service-Worker der auf JavaScript aufbaut.

Damit eine Website zur Progressive Web App wird sind nur wenige Dinge zu ändern:

• Einbindung eines SSL Zertifikates
• Eine JSON Manifest-Datei
• Einbindung eines Service Workers

Die wichtigsten Funktionen einer Progressive Web App

• Die App reagiert ohne größere Verzögerung auf Interaktionen und die Seitenübergänge wurden mit weichen Animationen umgesetzt
• Der Nutzer kann direkt über einen Homescreen-Button anstatt des Browsers auf die App zugreifen
• Schnelle Ladezeiten
• Die Inhalte lassen sich auch offline anzeigen
• Die App ist sicher und funktioniert auf allen Endgeräten
• Über Web-Push wird die App immer auf dem neusten Stand gebracht
• Über Notifications können Nutzer über Neuigkeiten informiert werden, auch wenn die App geschlossen ist
• Einfache Updates
• Die Nutzung der Progressive Web App fühlt sich an wie eine native App

Wie das in der Praxis aussieht, zeigt das Online-Verzeichnis https://pwa.bar. Es stellt interessante und aktuelle Beispiele für die Progressive Web App vor.

Die Progressive Web App braucht keinen Download aus dem App-Store

Der große Vorteil der Progressive Web App: Sie muss nicht aus dem App-Store heruntergeladen werden, sondern lässt sich über eine URL im Browser aufrufen und ganz einfach dem Homescreen hinzufügen. Auch das Update via App-Store ist hinfällig, da dieses automatisch ausgeführt wird. Diese Funktionalität spart im Vergleich zu nativen Apps sehr viel an Speicherplatz ein.

Die Progressive Web App lässt sich gut über Google finden

Die „neuen“ Apps erscheinen wie herkömmliche Websites in den Suchergebnisseiten von Google und Co. Sie können daher direkt über die SERPs aufgerufen werden. Dazu sind keine speziellen Techniken nötig - Progressive Web Apps lassen sich komplett indexieren.

Vorteile bei der Offline-Nutzung und bei langsamer Internetverbindung

Im Gegensatz zu nativen Apps funktioniert die Progressive Web App auch offline oder bei einer schleppenden Internetverbindung. Einmal geladene Inhalte der App lassen sich jederzeit wieder aufrufen – auch offline oder bei einer langsamen Internetverbindung.
Die Basis dafür sind die sogenannten Service Worker: Diese fortgeschrittene Browsertechnologie stellt mit Hilfe von JavaScript einen Proxy zwischen Server und dem Webbrowser bereit. Dadurch können unterer anderem Seiten auch im Offline-Modus verfügbar gemacht werden: Die Inhalte und Funktionalitäten holt sich die Progressive Web App auch ohne Internetverbindung aus dem Cache.

Push-Nachrichten gibt´s auch bei der Progressive Web App

Mitteilungen, die auch ohne geöffnete App auf dem Smartphone erscheinen, sind sogenannte Push-Nachrichten, für deren Erhalt immer das Einverständnis des Empfängers nötig ist. Damit lassen sich Kunden gezielt über z.B. Werbeaktionen oder Events informieren.

Die Ladezeiten sind schneller als bei native Apps

Progressive Web Apps können mit sehr schnelle Ladezeiten punkten. Beim zweiten Aufruf schaffen sie eine Ladezeit von unter drei Sekunden, der magischen Grenze, bei der User mobiler Websites oft abspringen. Diese Geschwindigkeit wird dank Service Worker auch dann erreicht, wenn der Nutzer gerade nicht online ist.

Wer von Progressive Web Apps profitiert

Die Frage, wer von einer Progressive Web App profitiert, lässt sich mit „eigentlich jeder“ beantworten. Da Mobile und Web immer stärker zusammenwachsen, ist es sinnvoll, bereits jetzt die Fühler in Richtung der neuen Technologie auszustrecken. Zudem ist nichts, was dafür in Entwicklungsarbeit investiert wird, verloren: Alles, was unternommen wird, unterstützt die Stabilität der Website, verbessert ihre Qualität, macht sie leichter bedienbar, sicherer, schneller und besser auffindbar.

Wie sieht es mit Apples Unterstützung aus?

Noch unterstützt Apple Progressive Website nicht gänzlich, die Aktivitäten sind aber zukunftsweisend. Die Safari-Version 11.1., die die aktuelle iOS 11.3 Beta-Version enthält, holt mit dem Web App Manifest und Service Workers zwei essentielle Elemente von Progressive Web Apps auch auf iPads und iPhones.

Noch gibt es allerdings „Kinderkrankheiten“: Die Implementation von Apple verhält sich nicht immer so wie bei Android. Ob die Progressive Web App auf dem Homescreen verfügbar ist oder nicht, ist derzeit noch so etwas wie ein Glücksspiel. Doch die ersten Schritte, die Apple in Richtung Unterstützung setzt, sind vielversprechend. Dass es weiterhin gut vorangeht, wird schon in Apples eigenem Interesse liegen. Denn Progressive Web Apps werden nun einmal dazu führen, dass der User künftig weit weniger Apps aus dem App-Store verwendet. Genau an diesen Produkten verdient Apple allerdings gutes Geld. Man kann also damit rechnen, dass Apple weiter nachbessert und die Implementierung in naher Zukunft gute Fortschritte macht.

Zusammenfassung und Fazit

Die genannten Punkte verdeutlichen, wie zahlreich die Vorteile sind, die Progressive Web Apps im Vergleich zu nativen Apps bieten. Die Kunden wissen zu schätzen, dass sie die App nicht mehr via App-Store runter laden müssen und so wertvollen Speicherplatz sparen. Sie müssen die Apps zudem nicht extra installieren. Außerdem ist die mentale Hürde weit höher, wenn eine App installiert wird, als die Hürde beim Aufrufen einer Website und dem Hinzufügen eines Icons auf dem Homescreen.

Die Offline-Nutzung und die schnellen Ladezeiten sind weitere wichtige Vorteile. Auch für die Push-Mitteilungen ist die Progressive Web App gerüstet. Die Technologie bietet also für beide Seiten – für Kunden wie für Anbieter – bereits jetzt vielfältige Vorteile.

Contao Collage

Am 06.06.2018 findet vor der Contao Konferenz in Salzburg im Rahmen des Contao-Collage ein Workshop von Joe Ray Gregory zum Thema „Mache Deine Contao Seite zur Progressiven Web App – Einstieg in die Welt der PWA‘s“ statt.

Wer teilnehmen möchte, kann sich hier anmelden.

Contao Erweiterung

Mit der Contao Erweiterung Web App Manifest [web_app_manifest] kann des Web App Manifests für eine Progressive Web App einfach über das Contao-Backend in Ihre Website integriert werden.