PWA vs web app

Web-App Entwicklung

Die Entwicklung von Web-Apps ist in letzter Zeit weltweit, aber auch in der Schweiz, immer beliebter geworden. Jedoch sind viele unsicher, was genau eine Web-App ist und wie diese im Vergleich zu Progressiven Web Apps und mobilen Apps abschneiden. 

Wir bei Swiss Tomato arbeiten seit 2014 an verschiedenen Web-Projekten, deshalb haben wir einen detaillierten Leitfaden über die Entwicklung von Web-Apps ausgearbeitet, einschließlich grundlegender Definitionen, Vor- und Nachteile und wann und wie sie verwendet werden.

(Screenshot: die Web App von Airbnb im Vergleich zur mobilen App von Airbnb)

Was ist eine Web App ?

Eine Web-Applikation oder Webanwendung ist eine Weblösung mit App-ähnlicher Navigation und mit bestimmten Funktionen, die man eher in einer normalen mobilen App erwarten würde. Eine Webanwendung hat eine eigene URL und kann über einen Browser aufgerufen werden, so dass sie über Geräte (Computer, Tablet, Apps) zugänglich ist. Da sie direkt in einem Browser aufgeführt ist, kann man Suchmaschinenoptimierung und Google-Anzeigen verwenden, um den Verkehr zu steigern.

Eine Web-App kann eine gute Lösung sein, wenn Sie Ihren Benutzern eine Lösung mit spontaner Navigation bieten möchten, die dem Komfort einer App ähnelt und auf die über mehrere Geräte zugegriffen werden kann.

Eine Web-App wird niemals die Geschwindigkeit und Leistung einer mobilen App haben, und der Zugriff auf erweiterte hardwarebezogene Funktionen ist begrenzt.

Weiterlesen, um mehr über die Entwicklung von Web-Apps zu erfahren

Was ist PWA (Progressive Web App) ?

Eine PWA ist eine auf eine bestimmte Art programmierte hybride Web-App, bei der einige Funktionen über eine normale Web-App hinausgehen:

• Sie kann auf Android und auf Computern installiert werden, jedoch für iOS nur über Safari und mit einigen Einschränkungen 
• Sobald das App-Symbol zum Bildschirm hinzugefügt wurde, kann sie separat gestartet werden und wird nicht im Browser, sondern in einem eigenständigen Fenster geöffnet
• PWA bietet eine gewisse Menge an Offline-Funktionalitäten: Bestimmte Informationen werden zwischengespeichert, die Navigationsschaltflächen werden lokal gespeichert und sind somit offline zugänglich

Am Anfang scheint es verlockend, eine PWA zu entwickeln, aber bei genauerem Hinsehen entscheidet man sich doch besser für eine Web-App oder eine mobile App. Wenn Sie sich im Internet umsehen, werden Sie viele Hinweise auf erfolgreiche PWAs finden, aber wenn man diese tatsächlich ausprobieren möchte, kann man nur wenige finden.

Die wesentlichen Nachteile einer PWA sind: 

• Um von den Vorteilen einer PWA profitieren zu können, müsste diese installiert werden.  Kleines Problem: Kaum jemand weiß, wie man eine PWA installiert und verwendet. Unter Android kann ein Popup-Fenster angezeigt werden, um die Installation zu veranlassen. Macht man sich jedoch die Mühe, etwas zu installieren, könnte es durchaus eine mobile App mit wesentlich mehr Funktionen sein.
• Es gibt kaum Entwickler, die Erfahrung in der Entwicklung von PWA haben

Kurz gesagt: Wir empfehlen selten eine PWA, da diese installiert werden müsste, um von den Vorteilen zu profitieren, was jedoch kaum vorkommt. Im Endeffekt ist man entweder mit einer normalen Web-App besser dran sind, oder mit einer nativen App, wenn das Projekt komplexer ist oder Sie viele wiederkehrende Benutzer haben.

Weiterlesen, um mehr über die Entwicklung von PWA zu erfahren 

Was ist eine mobile App?

Mobile Apps sind Apps, die von App Stores heruntergeladen werden können und entweder für iOS oder Android ausgeführt sind, das muss nicht erklärt werden. Mobile Apps haben eine beispiellose Geschwindigkeit, Benutzerfreundlichkeit mit erstklassiger Leistung und Zugriff auf OS Betriebssystem und Hardware spezifische Funktionen. Der größte Nachteil ist, dass Sie es sowohl für iOS als auch für Android entwickeln müssen und daher die Entwicklungskosten höher sein können.

Möchten Sie eine Web-App oder eine mobile App entwickeln? Kontaktieren Sie Swiss Tomato für eine Beratung zu Ihren Bedürfnissen.

Vergleich von Web Apps zu PWAs und mobilen Apps

Über die einzelnen Fähigkeiten von Web-Apps, PWAs oder mobiler Apps kann man viel nachlesen – auf dieser Grundlage haben wir einen Vergleich zusammengestellt.

Hier ist eine umfassende Tabelle, die die Möglichkeiten und Grenzen von Web-Apps und mobilen Apps vergleicht.

Vor- und Nachteile einer Web App Entwicklung:

Oben wurde bereits über einige Funktionen von Web-Apps gesprochen, die Grenze zwischen einer Web-App und einer Website kann ziemlich verschwommen sein. Hier sind einige Merkmale, die eine Web-App von einer normalen Website unterscheiden:

• Die Web Applikation verfügt über eine App-ähnliche Navigation mit Schaltflächen und Controllern
• Sie ist normalerweise schneller. Der Hauptgrund ist, dass meistens SPA-Technologie (Single Page Application) verwendet wird, was bedeutet, dass viele Inhalte (wie Schaltflächen, Navigation) einmal heruntergeladen werden und nur die dynamischen Inhalte aktualisiert werden müssen, wenn Sie auf eine Schaltfläche klicken. Deshalb muss nicht die ganze Seite neu geladen werden.
• Eine Web-App ist eher aufgabenorientiert, konzentriert sich weniger auf die Übergabe von Informationen.

Wann sollte man eine Web App verwenden?

Unserer Erfahrung nach ist eine Web-App eine großartige Lösung im Vergleich zu einer einfachen Website oder einer mobilen App, wenn:

• Sie eine Lösung anbieten möchten, die geräteübergreifend funktioniert und bei der SEO wichtig ist,
• Sie eine relativ schnelle Weblösung mit spontaner App-ähnlicher Navigation anbieten wollen,
• Sie bereits mobile Apps haben, aber die Verfügbarkeit Ihrer Lösung auch Denjenigen anbieten wollen, die keine mobile App installieren möchten oder die Applikation auch auf Computern verwenden möchten,
• die erforderlichen Funktionen relativ einfach sind und kein Offline-Zugriff, keine Push-Benachrichtigungen, sowie weder erweiterte Augmented Reality, noch erweiterte Kameranutzung oder Bluetooth-Nutzung erforderlich sind,
• das Konzept zunächst getestet werden soll, indem ein MVP (Minimum Viable Product) mit einem niedrigeren Budget entwickelt wird.

Gute Beispiele für Web Apps

Da könnte man die Webversion der beliebtesten Apps wie Facebook, Google Maps, Gmail oder Airbnb anführen. Man sieht, dass sie eine App-ähnliche Navigation haben und relativ schnell sind, ABER sie sind langsamer als die mobilen Apps. Wenn Kunden sie also regelmäßig verwenden, laden sie stattdessen lieber die App herunter. Wird sie aber nur ab und zu verwendet, kann eine Web-App hervorragend sein, Airbnb ist ein großartiges Beispiel dafür.

Gute Beispiele für Web Apps in der Schweiz 

Schweizerische Bundesbahnen (CFF / SBB)

Auch in der Schweiz gibt es eine Reihe qualitativ hochwertiger Web-Apps. Die Schweizerischen Bundesbahnen (SBB / CFF) beauftragten Swiss Tomato mit der Entwicklung einer Indoor-Navigations-App für den Bahnhof Lausanne. Es handelt sich um eine Single-Page-Anwendung, bei der die UX-Controller konstant sind und nur die dynamische Karte und Navigation aktualisiert wird.

Dies ist ein typischer guter Anwendungsfall für eine Web-App: Die Funktionen sind relativ einfach und die Benutzer benötigen eine einfach zu bedienende, intuitive Oberfläche. Die Lösung kann sowohl auf Mobiltelefonen als auch auf Computern verwendet werden.

CFF web app

Denken Sie darüber nach, eine Web-App zu entwickeln? Wenden Sie sich an Swiss Tomato, damit wir Ihre Bedürfnisse besser verstehen können. 

Entwicklung einer PWA: Vor-und Nachteile

PWA (Progressive Web App) ist ein Schlagwort, das Benutzer aus verschiedenen Publikationen kennen, aber was ist es wirklich? Die beste Art, diese zu definieren, ist, dass eine PWA eine Web-App mit ein paar Extras obendrauf ist:

• Sie kann installiert werden (einfach auf Android, etwas kniffliger auf Desktop und iOS)
• Nach der Installation fügt sie zu  den anderen vorhandenen Apps ein normales App-Symbol hinzu. Das heißt, sie kann zwischen den anderen Apps gefunden werden und durch einen Klick auf das Symbol gestartet werden. 
• Nach dem Starten erscheint sie in einem eigenständigen Fenster und nicht im Browser (gilt sowohl für Desktop- als auch für mobile PWAs), sodass sie sich eher wie eine App anfühlt, da man die URL nicht sehen kann.
• Sie kann einige eingeschränkte Offline-Funktionen haben: Dazu gehören hauptsächlich die Navigationsschaltflächen und zwischengespeicherte Informationen auf einigen der Schlüsselseiten. Es macht die Navigation schneller, aber es gibt nicht die Möglichkeit einer vollständigen Offline-Nutzung, wie bei einigen mobilen Apps.

Der größte Nachteil bei PWAs ist, dass sie installiert werden müssen, um von den oben genannten Vorteilen profitieren zu können, und es ist wirklich nicht einfach, eine PWA auf einem iOS zu installieren.

Auf Android erscheint ein kleines Pop-up, um die Installation zu veranlassen, aber wenn die Kunden tatsächlich den „großen Schritt“ zur Installation machen, warum sollte man sie dann nicht auffordern, die echte mobile App zu installieren? Es sei denn, Sie möchten Ihre Strategie nur auf das Web konzentrieren.

Kurz gesagt, PWAs haben nur dann wirklich greifbare Vorteile gegenüber einer Web-App, wenn sie installiert sind, aber ihnen fehlen viele Funktionen von mobilen Apps.

Wann sollte man eine PWA verwenden?

Die Entwicklung einer PWA ist dann sinnvoll, wenn

• es sich um eine reine Web-Strategie handelt, weil der Anwendungsfall die Investition in die Entwicklung von zwei mobilen Apps (iOS + Android) nicht rechtfertigt,
• man durch die Kommunikation sicherstellen kann, dass die PWA von den Benutzern installiert wird,
• man überzeugt ist, dass auch bei einer geringen Anzahl an PWA-Entwicklern eine langfristige Instandhaltung der PWA gesichert ist. 

Technologien für Web Apps

Es gibt keine spezielle Technologie für die Entwicklung von Web-Apps, da die meisten Weblösungen auch in Hinsicht auf eine Web-App entwickelt werden können. Die besten Technologien sind React und andere Javascript-basierte Technologien wie VueJS/NodeJS.  Es kann aber auch ein CMS angepasst werden, sogar WordPress, oder ein Headless-Ansatz kann verwendet werden, bei dem das Back-End das CMS und das Front-End ein Javascript-basiertes oder anderes Framework ist.

Wie kann eine PWA heruntergeladen werden?

Eines der Hauptmerkmale von PWAs ist, dass sie für Android, iOS und sogar auf dem Desktop heruntergeladen werden können, obwohl die beiden letzteren einige Anstrengungen des Benutzers erfordern. Die große Frage ist also, wie wird es gemacht?

So wird eine PWA auf einen Computer heruntergeladen

Wenn man die URL der PWA öffnet, sieht man ein kleines Symbol, mit dem die App heruntergeladen werden kann, siehe das Beispiel von Spotify unten. Sobald sie heruntergeladen ist, wird ein App-Symbol auf Ihrem Desktop oder unter der Schaltfläche Start erscheinen. Durch Klicken auf das App-Symbol wird die App gestartet, jedoch nicht in einem Browser, sondern in einem eigenständigen Frame.

Herunterladen einer PWA auf Android

Das ist wirklich einfach, wenn man die Web-App in einem Browser öffnet, erscheint ein Popup, das auffordert „Zum Startbildschirm hinzufügen“, was eigentlich die Installation ist.

Installation einer PWA auf iOS

Das ist sehr knifflig, man kann es nur über Safari und es gibt keine offensichtliche Information, dass eine PWA geöffnet wurde oder dass diese installiert werden kann. Sobald sie installiert wurde, wird das App-Symbol zu den anderen Apps hinzugefügt und die App kann geöffnet werden. Sie wird nicht in einem Browser, sondern als eigenständige App geöffnet.

Internationale Beispiele für PWA 

Wenn man es googelt, findet man viele Erfolgsgeschichten verschiedener PWAs, aber sobald man versucht, tatsächlich funktionierende PWAs zu finden, wird man kaum fündig. So überraschend es auch sein mag, wir konnten ausserhalb der Schweiz nur zwei Beispiele finden: Starbucks und die App des deutschen Fernsehsenders ZDF: die ZDF Mediathek Web App.

Beide haben eine bestimmte URL (https://app.starbucks.com/ bzw. https://pwa.zdf.de/ ) und überraschenderweise erscheint die Existenz der PWA oder die Aufforderung, sie zu verwenden, nicht, wenn die jeweilige Standard-Website geöffnet wird. 

Beispiele für PWA in der Schweiz

Es gibt nur sehr wenige Anwendungsfälle für PWAs in der Schweiz, aber hier sind zwei. 

Newhome.ch

Dies ist eine Plattform, um Immobilien zum Kauf oder zur Miete zu finden. Diese PWA kann sowohl auf Mobilgeräten, als auch auf Computern installiert werden und funktioniert recht schnell.

PWA des Flughafen Zürich

Der Flughafen Zürich ist eines der wenigen Unternehmen, das sich entschieden hat, seine mobilen Apps einzustellen und ausschließlich auf eine Web-App zu setzen. Ihre Web-App ist ziemlich schnell und speichert die Navigation und die geöffneten Seiten, sodass die zuvor geöffneten Seiten auch dann geöffnet werden können, wenn die Verbindung verloren geht.

Eine interessante Besonderheit ist, wie mit Benachrichtigungen umgegangen wird: Da Web-Apps keine Push-Benachrichtigungen zulassen, kann man sich für Benachrichtigungen über Whatsapp oder Messenger entscheiden.

Die Web-App wurde mit einem React-Frontend und einem Sitecore-Headless-CMS-Backend entwickelt.

Technologien für PWA

Es gibt keine spezielle Technologie für die Entwicklung einer PWA. Die besten Technologien sind React und andere Javascript-basierte Technologien wie VueJS/NodeJS. Es kann auch ein Headless-Ansatz in Betracht gezogen werden, bei dem das Back-End ein CMS und das Front-End ein Javascript-basiertes oder ein anderes Framework ist.

Entwicklung Ihrer Web- oder mobilen App

Wir haben hier Web-Apps und PWAs ausgiebig behandelt. Wenn Sie jedoch mehr über mobile Apps erfahren möchten, können Sie auf unserer Entwicklungsseite für mobile Apps nachlesen. Kontaktieren Sie uns, um über Ihre Entwicklungsanforderungen zu diskutieren.