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.
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.
Eine PWA ist eine auf eine bestimmte Art programmierte hybride Web-App, bei der einige Funktionen über eine normale Web-App hinausgehen:
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:
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.
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.
Ü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.
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:
Unserer Erfahrung nach ist eine Web-App eine großartige Lösung im Vergleich zu einer einfachen Website oder einer mobilen App, wenn:
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.
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.
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.
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:
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.
Die Entwicklung einer PWA ist dann sinnvoll, wenn
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.
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?
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.
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.
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.
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.
Es gibt nur sehr wenige Anwendungsfälle für PWAs in der Schweiz, aber hier sind zwei.
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.
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.
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.
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.
Haben Sie ein Projekt geplant?
Trinken wir einen Tomatensaft!
Unsere Briefing-Vorlagen für App– und Webprojekte helfen Ihnen dabei, Ihre Ideen klar zu formulieren. Und sie helfen uns dabei, Ihr Projekt von Anfang an besser zu verstehen. Das spart Zeit, schafft Klarheit und legt den Grundstein für eine erfolgreiche Zusammenarbeit.
Telefonnummer: +41 44 527 72 16
E-mail: hello@swisstomato.com
Adresse: Badenerstrasse 47, 8004 Zurich
Telefonnummer: +41 22 753 05 71
E-mail: hello@swisstomato.com
Adresse: Route de Florissant 4, 1206 Genève
