Wir bei Swiss Tomato arbeiten seit 2014 an verschiedenen Web-Projekten, deshalb haben wir einen detaillierten Leitfaden \u00fcber die Entwicklung von Web-Apps ausgearbeitet, einschlie\u00dflich grundlegender Definitionen, Vor- und Nachteile und wann und wie sie verwendet werden.<\/span><\/p>\n Eine Web-Applikation oder Webanwendung ist eine Webl\u00f6sung mit App-\u00e4hnlicher Navigation und mit bestimmten Funktionen, die man eher in einer normalen mobilen App erwarten w\u00fcrde. Eine Webanwendung hat eine eigene URL und kann \u00fcber einen Browser aufgerufen werden, so dass sie \u00fcber Ger\u00e4te (Computer, Tablet, Apps) zug\u00e4nglich ist. Da sie direkt in einem Browser aufgef\u00fchrt ist, kann man Suchmaschinenoptimierung und Google-Anzeigen verwenden, um den Verkehr zu steigern.<\/span><\/p>\n Eine Web-App kann eine gute L\u00f6sung sein, wenn Sie Ihren Benutzern eine L\u00f6sung mit spontaner Navigation bieten m\u00f6chten, die dem Komfort einer App \u00e4hnelt und auf die \u00fcber mehrere Ger\u00e4te zugegriffen werden kann.<\/span><\/p>\n Eine Web-App wird niemals die Geschwindigkeit und Leistung einer mobilen App haben, und der Zugriff auf erweiterte hardwarebezogene Funktionen ist begrenzt.<\/span><\/p>\n Eine PWA ist eine auf eine bestimmte Art programmierte hybride Web-App, bei der einige Funktionen \u00fcber eine normale Web-App hinausgehen:<\/span><\/p>\n Am Anfang scheint es verlockend, eine PWA zu entwickeln, aber bei genauerem Hinsehen entscheidet man sich doch besser f\u00fcr 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\u00e4chlich ausprobieren m\u00f6chte, kann man nur wenige finden.<\/span><\/p>\n Die wesentlichen Nachteile einer PWA sind:\u00a0<\/span><\/p>\n Kurz gesagt: Wir empfehlen selten eine PWA, da diese installiert werden m\u00fcsste, 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.<\/span><\/p>\n Mobile Apps sind Apps, die von App Stores heruntergeladen werden k\u00f6nnen und entweder f\u00fcr iOS oder Android ausgef\u00fchrt sind, das muss nicht erkl\u00e4rt werden. Mobile Apps haben eine beispiellose Geschwindigkeit, Benutzerfreundlichkeit mit erstklassiger Leistung und Zugriff auf OS Betriebssystem und Hardware spezifische Funktionen. Der gr\u00f6\u00dfte Nachteil ist, dass Sie es sowohl f\u00fcr iOS als auch f\u00fcr Android entwickeln m\u00fcssen und daher die Entwicklungskosten h\u00f6her sein k\u00f6nnen.<\/span><\/p>\n M\u00f6chten Sie eine Web-App oder eine mobile App entwickeln? Kontaktieren Sie Swiss Tomato f\u00fcr eine Beratung zu Ihren Bed\u00fcrfnissen.<\/strong><\/p>\n \u00dcber die einzelnen F\u00e4higkeiten von Web-Apps, PWAs oder mobiler Apps kann man viel nachlesen \u2013 auf dieser Grundlage haben wir einen Vergleich zusammengestellt.<\/span><\/p>\n Hier ist eine umfassende Tabelle, die die M\u00f6glichkeiten und Grenzen von Web-Apps und mobilen Apps vergleicht.<\/span><\/p>\n Oben wurde bereits \u00fcber 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:<\/span><\/p>\n Unserer Erfahrung nach ist eine Web-App eine gro\u00dfartige L\u00f6sung im Vergleich zu einer einfachen Website oder einer mobilen App, wenn:<\/span><\/p>\n Da k\u00f6nnte man die Webversion der beliebtesten Apps wie Facebook, Google Maps, Gmail oder Airbnb anf\u00fchren. Man sieht, dass sie eine App-\u00e4hnliche Navigation haben und relativ schnell sind, ABER sie sind langsamer als die mobilen Apps. Wenn Kunden sie also regelm\u00e4\u00dfig 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\u00dfartiges Beispiel daf\u00fcr.<\/span><\/p>\n Schweizerische Bundesbahnen (CFF \/ SBB)<\/span><\/i><\/p>\n 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\u00fcr 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.<\/span><\/p>\n Dies ist ein typischer guter Anwendungsfall f\u00fcr eine Web-App: Die Funktionen sind relativ einfach und die Benutzer ben\u00f6tigen eine einfach zu bedienende, intuitive Oberfl\u00e4che. Die L\u00f6sung kann sowohl auf Mobiltelefonen als auch auf Computern verwendet werden.<\/span><\/p>\n CFF web app<\/span><\/a><\/p>\n Denken Sie dar\u00fcber nach, eine Web-App zu entwickeln? Wenden Sie sich an Swiss Tomato, damit wir Ihre Bed\u00fcrfnisse besser verstehen k\u00f6nnen.\u00a0<\/strong><\/p>\n 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:<\/span><\/p>\n Der gr\u00f6\u00dfte Nachteil bei PWAs ist, dass sie installiert werden m\u00fcssen, um von den oben genannten Vorteilen profitieren zu k\u00f6nnen, und es ist wirklich nicht einfach, eine PWA auf einem iOS zu installieren.<\/span><\/p>\n Auf Android erscheint ein kleines Pop-up, um die Installation zu veranlassen, aber wenn die Kunden tats\u00e4chlich den \u201egro\u00dfen Schritt\u201c zur Installation machen, warum sollte man sie dann nicht auffordern, die echte mobile App zu installieren? Es sei denn, Sie m\u00f6chten Ihre Strategie nur auf das Web konzentrieren.<\/span><\/p>\n Kurz gesagt, PWAs haben nur dann wirklich greifbare Vorteile gegen\u00fcber einer Web-App, wenn sie installiert sind, aber ihnen fehlen viele Funktionen von mobilen Apps.<\/span><\/p>\n Die Entwicklung einer PWA ist dann sinnvoll, wenn<\/span><\/p>\n Es gibt keine spezielle Technologie f\u00fcr die Entwicklung von Web-Apps, da die meisten Webl\u00f6sungen auch in Hinsicht auf eine Web-App entwickelt werden k\u00f6nnen. Die besten Technologien sind React und andere Javascript-basierte Technologien wie VueJS\/NodeJS.\u00a0 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.<\/span><\/p>\n Eines der Hauptmerkmale von PWAs ist, dass sie f\u00fcr Android, iOS und sogar auf dem Desktop heruntergeladen werden k\u00f6nnen, obwohl die beiden letzteren einige Anstrengungen des Benutzers erfordern. Die gro\u00dfe Frage ist also, wie wird es gemacht?<\/span><\/p>\n Wenn man die URL der PWA \u00f6ffnet, 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\u00e4che Start erscheinen. Durch Klicken auf das App-Symbol wird die App gestartet, jedoch nicht in einem Browser, sondern in einem eigenst\u00e4ndigen Frame.<\/span><\/p>\n Das ist wirklich einfach, wenn man die Web-App in einem Browser \u00f6ffnet, erscheint ein Popup, das auffordert \u201eZum Startbildschirm hinzuf\u00fcgen\u201c, was eigentlich die Installation ist.<\/span><\/p>\n Das ist sehr knifflig, man kann es nur \u00fcber Safari und es gibt keine offensichtliche Information, dass eine PWA ge\u00f6ffnet wurde oder dass diese installiert werden kann. Sobald sie installiert wurde, wird das App-Symbol zu den anderen Apps hinzugef\u00fcgt und die App kann ge\u00f6ffnet werden. Sie wird nicht in einem Browser, sondern als eigenst\u00e4ndige App ge\u00f6ffnet.<\/span><\/p>\n Wenn man es googelt, findet man viele Erfolgsgeschichten verschiedener PWAs, aber sobald man versucht, tats\u00e4chlich funktionierende PWAs zu finden, wird man kaum f\u00fcndig. So \u00fcberraschend 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.<\/span><\/p>\n Beide haben eine bestimmte URL (<\/span>https:\/\/app.starbucks.com\/<\/span><\/a> bzw. <\/span>https:\/\/pwa.zdf.de\/<\/span><\/a> ) und \u00fcberraschenderweise erscheint die Existenz der PWA oder die Aufforderung, sie zu verwenden, nicht, wenn die jeweilige Standard-Website ge\u00f6ffnet wird.\u00a0<\/span><\/p>\n Es gibt nur sehr wenige Anwendungsf\u00e4lle f\u00fcr PWAs in der Schweiz, aber hier sind zwei.\u00a0<\/span><\/p>\n Newhome.ch<\/span><\/i><\/a><\/p>\n Dies ist eine Plattform, um Immobilien zum Kauf oder zur Miete zu finden. Diese PWA kann sowohl auf Mobilger\u00e4ten, als auch auf Computern installiert werden und funktioniert recht schnell.<\/span><\/p>\n![\"\"](\"https:\/\/swisstomato.ch\/wp-content\/uploads\/2022\/11\/image-1.jpeg\")
<\/p>\n(Screenshot: die Web App von Airbnb im Vergleich zur mobilen App von Airbnb)<\/strong><\/h5>\n
Was ist eine Web App ?<\/b><\/h2>\n
![\"\"](\"https:\/\/swisstomato.ch\/wp-content\/uploads\/2022\/11\/image-2.jpeg\")
<\/p>\nWeiterlesen, um mehr \u00fcber die Entwicklung von Web-Apps zu erfahren<\/strong><\/h4>\n
Was ist PWA (Progressive Web App) ?<\/b><\/h2>\n
\n
\n
![\"\"](\"https:\/\/swisstomato.ch\/wp-content\/uploads\/2022\/11\/image-3.jpeg\")
<\/p>\nWeiterlesen, um mehr \u00fcber die Entwicklung von PWA zu erfahren\u00a0<\/strong><\/h4>\n
Was ist eine mobile App?<\/b><\/h2>\n
Vergleich von Web Apps zu PWAs und mobilen Apps<\/b><\/h2>\n
![\"\"](\"https:\/\/swisstomato.ch\/wp-content\/uploads\/2022\/11\/EN-891x1024-1.jpg\"){kind=spacer}
<\/p>\nVor- und Nachteile einer Web App Entwicklung:<\/b><\/h2>\n
\n
<\/h2>\n
Wann sollte man eine Web App verwenden?<\/b><\/h2>\n
\n
<\/h2>\n
Gute Beispiele f\u00fcr Web Apps<\/b><\/h2>\n
![\"\"](\"https:\/\/swisstomato.ch\/wp-content\/uploads\/2022\/11\/image-4.jpeg\")
<\/p>\n<\/h2>\n
Gute Beispiele f\u00fcr Web Apps in der Schweiz\u00a0<\/b><\/h2>\n
![\"\"](\"https:\/\/swisstomato.ch\/wp-content\/uploads\/2022\/11\/image-5.jpeg\")
<\/p>\n<\/h5>\n
Entwicklung einer PWA: Vor-und Nachteile<\/b><\/h2>\n
\n
Wann sollte man eine PWA verwenden?<\/b><\/h2>\n
\n
Technologien f\u00fcr Web Apps<\/b><\/h2>\n
Wie kann eine PWA heruntergeladen werden?<\/b><\/h2>\n
<\/h2>\n
So wird eine PWA auf einen Computer heruntergeladen<\/b><\/em><\/h3>\n
![\"\"](\"https:\/\/swisstomato.ch\/wp-content\/uploads\/2022\/11\/image-6-2.png\")
<\/p>\nHerunterladen einer PWA auf Android<\/i><\/b><\/h3>\n
![\"\"](\"https:\/\/swisstomato.ch\/wp-content\/uploads\/2022\/11\/image-7.png\")
<\/p>\nInstallation einer PWA auf iOS<\/i><\/b><\/h3>\n
![\"\"](\"https:\/\/swisstomato.ch\/wp-content\/uploads\/2022\/11\/image-8.png\")
<\/p>\nInternationale Beispiele f\u00fcr PWA\u00a0<\/b><\/h2>\n
![\"\"](\"https:\/\/swisstomato.ch\/wp-content\/uploads\/2022\/11\/image-9.jpg\")
<\/p>\nBeispiele f\u00fcr PWA in der Schweiz<\/b><\/h2>\n
![\"\"](\"https:\/\/swisstomato.ch\/wp-content\/uploads\/2022\/11\/image-10.jpg\")
<\/p>\n
![\"\"](\"https:\/\/swisstomato.ch\/wp-content\/uploads\/2022\/11\/image-11.jpg\")
<\/p>\n