![\"PWA](\"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2022\/09\/Progressive-Web-Apps-Uebersicht-300x177.png\")
<\/p>\nProgressive Web Apps (PWAs) sind in der App-Entwicklungsbranche in aller Munde. Was genau versteht man darunter und warum sind die Leute davon so begeistert?
\nProgressive Web Apps sind Websites, die \u00fcber einige spezielle Features verf\u00fcgen, die von Native Apps bekannt sind. Native Apps sind klassische Anwendungen, die f\u00fcr mobile Endger\u00e4te entweder f\u00fcr IOS oder Android entwickelt wurden und \u00fcber einen App-Store erh\u00e4ltlich sind.<\/p>\n
Jede Progressive Web App funktioniert auch offline, das hei\u00dft Nutzer:innen k\u00f6nnen auch dann darauf zugreifen, wenn keine Internetverbindung vorhanden ist. Au\u00dferdem laden sie ab dem zweiten Aufruf wesentlich schneller als herk\u00f6mmliche Websites und haben einen geringeren Datenverbrauch.<\/p>\n
In der Vergangenheit mussten Website-Betreiber:innen entweder eine mobile responsive Webseite oder eine Native App entwickeln, wenn diese auch auf mobilen Endger\u00e4ten zug\u00e4nglich und benutzerfreundlich dargestellt werden sollte. Mit einer Progressive Web App steht sowohl die Desktop Version als auch die mobile Version mit einer einzigen Softwarel\u00f6sung zur Verf\u00fcgung, ohne die doppelte Entwicklungsarbeit leisten zu m\u00fcssen. Progressive Web Apps k\u00f6nnen, so wie eine Website, \u00fcber eine URL aufgerufen werden und bringen Offline-F\u00e4higkeiten mit.<\/p>\n
<\/p>\n
Eine Progressive Web App wird gestartet, indem die URL der Web-App im Browser aufgerufen wird, welcher die Anfrage an den Webserver sendet. Der Webserver leitet die Anfrage an die Progressive Web App weiter. Diese generiert die Antwort als HTML-Quellcode und sendet sie per HTTPS-Antwort an den Browser zur\u00fcck.<\/p>\n
Wenn Nutzer:innen eine Website besuchen, die mit einem responsiven Design erstellt wurde, dann passt sich das Design der Webseite automatisch an die Gr\u00f6\u00dfe und Aufl\u00f6sung des Ger\u00e4ts an. Progressive Web-Apps (PWAs) gehen noch einen Schritt weiter, indem sie ihren Nutzer:innen ein Icon zur Verf\u00fcgung stellen, welches sie auf ihrem Smartphone oder Tablett ablegen k\u00f6nnen.<\/p>\n
Weiters k\u00f6nnen Nutzer:innen auch Push-Benachrichtigungen der PWA erhalten und sogar offline auf die App zugreifen. Das Ziel der progressiven Erweiterung ist es, in jedem Fall das bestm\u00f6gliche Ergebnis zu bieten, unabh\u00e4ngig davon, auf welchem Ger\u00e4t die Anwendung aufgerufen wird.<\/p>\n
<\/p>\n
Progressive Web Apps zeichnen sich durch eine Reihe von besonderen Eigenschaften aus:<\/p>\n
<\/p>\n
Progressive Web Apps werden mit g\u00e4ngigen Webtechnologien wie HTML, CSS und JavaScript erstellt. Dar\u00fcber hinaus wird eine Service Worker API verwendet. Darunter versteht man Skripte, die im Hintergrund ausgef\u00fchrt werden, um das Offline-Caching und weitere wichtige Funktionen bereitzustellen.<\/p>\n
Einfach ausgedr\u00fcckt, kann man das Service Worker API am besten mit einem Proxy vergleichen, der zwischen dem Webbrowser und dem Server platziert ist. Alle vom Client ausgehenden Anfragen werden vom Service Worker verarbeitet, der daf\u00fcr sorgt, dass der Client immer eine Antwort erh\u00e4lt. Besteht eine Internetverbindung, wird die Anfrage wie \u00fcblich weitergeleitet. Falls keine Internetverbindung besteht, wird in einer kleinen lokalen Datenbank im Browser gepr\u00fcft, ob f\u00fcr die angeforderte Seite bereits ein Datenbank-Eintrag existiert. Ist dies der Fall, wird der Eintrag zur\u00fcckgegeben und der Client kann die Antwort normal verarbeiten. Je nach Konfiguration werden die Ressourcen in der lokalen Datenbank bei jeder Anfrage aktualisiert \u2013 egal ob mit oder ohne Internetverbindung.<\/p>\n
![\"Aufbau](\"https:\/\/anexia.com\/blog\/wp-content\/uploads\/2022\/09\/Aufbau-Progressive-Web-Apps-Service-Worker-API-300x177.png\")
<\/p>\n
Wenn ein Eintrag bzw. eine Ressource noch nicht in der Datenbank vorhanden ist, aber trotz fehlender Internetverbindung angefordert wird, gibt der Service Worker eine benutzerfreundliche Fehlermeldung an den Client zur\u00fcck, um auf den Umstand hinzuweisen.<\/p>\n
Ein weiteres wichtiges Merkmal einer Progressive Web App ist das Web App Manifest. Dabei handelt es sich um eine JSON-Datei, die unter anderem die Funktionalit\u00e4t und die Eigenschaften einer PWA beschreibt. Der Name der App, Icons in verschiedenen Aufl\u00f6sungen, die Standardausrichtung der App oder die Farben des Themas sind Beispiele f\u00fcr Metadaten, die im Manifest enthalten sind. Das Manifests dient dazu, den Benutzer:innen die Installation der Progressive Web App auf verschiedenen Ger\u00e4tetypen zu erm\u00f6glichen. Erst nach dem Auslesen des Manifests erkennt der Browser, dass es sich um eine Webanwendung handelt.<\/p>\n
<\/p>\n
Es gibt ein paar F\u00e4lle, in denen eine Native App einer Progressive Web App vorzuziehen ist. Ein Beispiel daf\u00fcr ist, wenn die App bestimmte Funktionen des Ger\u00e4ts nutzen muss, auf die der Browser keinen Zugriff hat, wie z. B. die Kamerafunktion oder das GPS. Auch falls private Nutzerdaten ben\u00f6tigt werden, die f\u00fcr den Browser nicht verf\u00fcgbar sind, ist die Wahrscheinlichkeit sehr hoch, dass die Anforderungen nur mit einer Native App abgedeckt werden k\u00f6nnen.<\/p>\n
Manchmal kann es auch von Vorteil sein, eine Native App via App-Store zu verbreiten, um auf diese Weise das \u00d6kosystems des App-Stores auszunutzen und dadurch die App-Store Nutzer:innen zu erreichen.<\/p>\n
<\/p>\n
PWAs m\u00fcssen nicht aus einem App-Store heruntergeladen werden. Da jede Progressive Web App \u00fcber eine URL aufgerufen wird, k\u00f6nnen sie \u00fcber Suchmaschinen, externe Links und soziale Netzwerke gefunden und verteilt werden. Dadurch ist es wahrscheinlicher, dass potentielle Nutzer:innen auf die Anwendung aufmerksam werden und sie ausprobieren, weil keine komplizierte Installation notwendig ist. Durch diesen einfachen Zugang profitiert die User Experience und die Conversion Rate der App. Weiters steigt die Akzeptanz der Applikation stark an. Viele bekannte Marken haben bereits von Native Apps auf Progressive Web Apps gewechselt und gro\u00dfe Erfolge erzielen k\u00f6nnen. Zum Beispiel verzeichnete Pinterest durch den Umstieg auf ihre PWA L\u00f6sung<\/a> eine wesentliche Steigerung bei der Verweildauer und Anzeigenklickrate im Vergleich zu ihrer Native App.<\/p>\n <\/p>\n Zum einen k\u00f6nnen PWAs wie normale Websites verwendet werden, haben aber den zus\u00e4tzlichen Vorteil, dass sie offline verf\u00fcgbar sind und schnell laden. Dar\u00fcber hinaus sind Progressive Web-Apps f\u00fcr Anbieter:innen in der Entwicklungsphase wesentlich g\u00fcnstiger als herk\u00f6mmliche Native Apps, da sie auf Basis von Standard-Webanwendungen entwickelt werden. Die Tatsache, dass es sich sowohl um eine Website als auch um eine App auf verschiedenen Betriebssystemen handelt, bringt gegen\u00fcber einer Native App mehrere Vorteile mit sich. Der geringere Entwicklungsaufwand f\u00fcr die Erstellung einer PWA (da sie sowohl eine Website als auch eine App ist, die auf verschiedenen Plattformen l\u00e4uft) sowie die damit verbundenen geringeren Kosten sind nur zwei Beispiele daf\u00fcr, wie viel einfacher die Erstellung einer PWA ist. Eine PWA ben\u00f6tigt in der Regel wenig Speicherplatz auf dem Endger\u00e4t. Dies h\u00e4ngt jedoch davon ab, wie gro\u00df der Offline-Cache konfiguriert ist.<\/p>\n Wer auf der Suche nach einer bequemeren und benutzerfreundlicheren Methode zur Entwicklung einer Webanwendung ist, dann sind Progressive Web-Anwendungen definitiv eine \u00dcberlegung wert. Da sie auf Standard-Web-Apps basieren, funktionieren sie auf verschiedenen Betriebssystemen, ohne dass sie von einem App-Store heruntergeladen oder installiert werden m\u00fcssen. Der gr\u00f6\u00dfte Vorteil von PWAs ist, dass sie sehr anpassungsf\u00e4hig sind. Selbst wenn ein Ger\u00e4t oder der Browser nicht alle Funktionen unterst\u00fctzt, kann sie dennoch in irgendeiner Form verwenden werden.<\/p>\n <\/p>\n Das Fundament zu Progressive Web Apps wurde von Google gelegt. Daher wurden PWAs zu Beginn, vor allem f\u00fcr die Nutzung mit dem hauseigenen Android-Betriebssystem gebaut. Auf Ger\u00e4ten des Konkurrenten Apple unter iOS funktionieren sie meist nur eingeschr\u00e4nkt. Apple liefert f\u00fcr iOS nur sehr zaghaft die notwendigen Anpassungen<\/a>, um die vollst\u00e4ndige Funktionalit\u00e4t von Progressive Web Apps auf Apple Ger\u00e4ten herzustellen. Dennoch ist der Erfolg von Progressive Web Apps nicht aufzuhalten und wird sich noch weiter fortsetzen.<\/p>\n <\/p>\nDie Vorteile von Progressive Web Apps<\/h2>\n
Die Zukunft von Progressive Web Apps<\/h2>\n
Anexia Software Entwicklung<\/h2>\n