Alternative Description

Cookies

Wir verwenden Cookies, um die korrekte Funktionsweise dieser Website sicherzustellen, Ihnen den bestmöglichen Service zu bieten, die Benutzerfreundlichkeit zu verbessern und unsere Website zu optimieren.

Akzeptieren

Deaktivieren

hello icon

Erklärvideo Angebot

Jetzt erstellen in nur 2 Minuten

Jetzt Starten
blog preview

22 Februar 2020

Progressive Web Applikationen (PWA) revolutionieren Apps

Die Diskussionen starten schon vor der ersten Codezeile. Soll eine Native App oder eine Webapp entwickelt werden? PWA soll die Entscheidung erleichtern.

Video online konfigurieren

Native Apps sind verlockend, denn Sie bieten vollen Zugriff auf Systemressourcen wie NFC, Bluetooth, WLAN etc. Ein riesiger Vorteil ist auch die Offline-Fähigkeit. Gerade das "supergut ausgebaute" Deutsch Mobilfunknetz stellt Nutzer einer Website auf eine Geduldsprobe.

Systemressourcen und Offline-Fähigkeit klingen verführerisch oder? Dann lies weiter, denn es gibt nichts umsonst. Diese Regel gilt auch in der Welt der Softwareentwicklung.

Denn obwohl der Smartphonemarkt von mittlerweile nur noch zwei Betriebssystemen dominiert wird, ist das Entwickeln von nativen Apps wesentlich zeitaufwendiger als das Entwickeln einer Website. Die Probleme fangen bei der Wahl des Frameworks an. Nehme ich React Native oder doch IONIC? Und was ist eigentlich dieses Flutter?

Weiter geht es mit der Entwicklungsumgebung. Du möchtest deine App für IOS entwickeln? Dann brauchst du zwingen eine OSX-Entwicklungsumgebung. Continous Integration und Zertifikathandling sind ein paar weitere Schlagwörter, die uns Softwareentwicklern das Leben mit nativen Apps erschweren.

Mobile First – Progressive Web App zur Rettung

Eine lange herbeigesehnt Alternative zu den nativen Apps sind Website die sich ähnlich verhalten wie native Apps. Dem Nutzer soll kaum auffallen, dass es sich gerade um eine Website handelt. Vielmehr soll die Website wirken wie eine richtige App. Progressive Webapplikation versuchen genau hier anzusetzen und versprechen Lösungen für einige der Probleme.

Vorteile für den Betreiber

Einfach Entwicklung durch bekannte Programmiersprachen

Javascript, HTML, CSS - Thats It. Mehr brauchst du nicht um eine funktionierend PWA zu erstellen. Doch Hand aufs Herz, in Zeiten von Typescript, Less, Webpack und Co. entwickelt kaum jemand in purem Javascript und co.

Shoutouts gehen hier an Preact, die es extrem einfach machen eine Progressive Web Application zu entwickeln. Es würde den Rahmen dieses Beitrags sprengen hier ins Detail zu gehen. 

Mehr Informationen zu Preact

1
Preact Logo

Preact Logo

Continuous Integration (CI) Pipeline - Easy

Im Vergleich zu der Entwicklung einer nativen App ist das Aufsetzen einer Continuous Integration Pipeline für eine Website ein Kinderspiel. Egal ob Bitbucket, GitLab oder Codrops. Eine ausführliche Erklärung, wie du eine Continuous Integration Pipeline aufsetzt, würde den Rahmen sprengen, deshalb empfehlen wir diesen 

Beitrag zum Aufsetzen einer CI Pipeline

3

.

CI Anbieter

CI Anbieter

CI Anbieter

Schnelle Iterationszyklen

Schnelle Iterationszyklen sind ein Segen für Nutzer und Betreiber. Fehler müssen schnell gefixt werden, neue Features sollen möglichst schnell ausgeliefert und getestet werden. Mit einer guten PWA und einer guten 

CI-Pipeline

5

 steht dem nichts im Wege.

Build Once run everywhere

Die PWA bietet einen weiteren Vorteil. Denn nicht nur mobile Endgeräte profitieren von den Features. Google Chrome, Firefox und Co implementieren den Standard wie ihre Pendants auf dem mobilen Endgerät.

Vorteile für den Nutzer

Offline Fähigkeit

Der wohl attraktivste Pluspunkt einer PWA ist die Offline-Fähigkeit. Du hast richtig gehört. Eine Website, die ohne Internet funktioniert. Einzige Bedienung: Du musst die Seite vorher einmal besucht haben.

Besuchst du beispielsweise abends eine Website und bist am nächsten Tag im Zug, ohne stabiles Internet, wirst du die Website ganz ohne Internetzugriff besuchen können. Vorausgesetzt natürlich der Softwareentwickler der Website hat die Software richtig entwickelt.

Für den offline Modus sind Service Worker verantwortlich. 

Service Worker

6

 prüfen, ob die eine Netzwerkverbindung besteht. Besteht eine Netzwerkverbindung, so lädt der Service Worker die Datei von dem Server herunter. Besteht allerdings keine Netzwerkverbindung prüft der Service Worker ob die angeforderte Ressource im Cache vorhanden ist und liefert diese aus.

PWA Netzwerkgrafik

PWA Netzwerkgrafik

PWA Netzwerkgrafik

App Icon auf dem Homescreen

Ein großer Vorteil einer App, ist das Icon auf dem Homescreen. Denn der Nutzer sieht es unter Umständen jeden Tag und besucht deine App häufiger. Progressive Web Applikationen bieten auch hier die Möglichkeit ein App Icon auf dem Homescreen zu platzieren. Sobald der Nutzer die Website besucht, wird er gefragt, ob er die App ‚installieren‘ möchte. Schlicht und ergreifend wird einfach eine Verlinkung auf den Homescreen gepackt.

Push Notifications

PWA ermöglichen es dem Nutzer einfach Push notification anzuzeigen. Hier ist aus User Experience allerdings Vorsicht geboten, den nicht immer werden Notifications dankend angenommen

Nachteile

Das kling alles sehr gut, doch leider haben wir den Heiligen Gral der App Entwicklung noch nicht gefunden. Zumindest noch nicht. Obwohl PWAs wohl eine Vielzahl von nativen Apps ablösen wird, gibt es einige Anwendungsfälle, bei denen eine native App unabdingbar ist.

Zugriff auf Systemressourcen

Du brauchst Zugriff auf Betriebssystem-Schnittstellen, wie zum Beispiel NFC? Aktuell führt leider kein Weg an einer nativen App vorbei. Doch auch hier ist Rettung auf dem Weg. In naher Zukunft wird es wohl möglich sein auf einige der Systemressourcen (Bluetooth, NFC etc.) aus einer Website zuzugreifen. Mehr Informationen dazu findest du hier: 

WhatWebCanDo

8

App store

Du möchtest deine App im App Store sehen? Auch hier führt dann kein Weg an einer nativen App vorbei. Schade.

Fazit

Letztendlich ist zu sagen, dass sowohl native Apps als auch für PWA derzeit eine Daseinsberechtigung haben. Die Vor- und Nachteile der Technologien sollten vorsichtige abgewogen werden. Progressive Webapplikationen ebnen den Weg zu einer vereinheitlichen Softwarenwicklung.

Jetzt beraten lassenZum Preisrechner

Ihre Ansprechpartner

Mein Team und ich stehen Ihnen gerne jederzeit für alle Fragen rund um Ihr Erklärfilm-Projekt zur Verfügung. Rufen Sie einfach spontan an oder schreiben Sie uns eine Mail!

Alternative Description

+49 754 140 0410 0

Alternative Description

hello@videobakers.de

Call to action avatar from simon

Simon Ludwig

Unser Videoexperte für Ihre Fragen

Jetzt kontaktieren

Jetzt direkt loslegen

Schritt 1: Kick-Off-Formular ausfüllen

Wir sind Experten in unserem Gebiet - doch bei Ihrer Idee sind Sie der wahre Profi.

Um Ihr Produkt zu verstehen und Ihnen einen maßgeschneiderten Lösungsansatz präsentieren zu können, wollen wir mehr über Sie und Ihr Produkt erfahren.

Dazu finden Sie in unserem Kick-Off-Formular die wichtigsten Fragen.

Zum Kick-Off-Formular
asd
arrow down icon

Schritt 2. Erstgespräch

In einem unverbindlichen 30-minütigen Gespräch präsentieren wir Ihnen dann unsere Ideen.
Von der Zielgruppenansprache, über den Inhalt bis hin zur Gestaltung des Videos und dessen Verwendung berät Sie Ihr zukünftiger Projektbetreuer persönlich.

asd
arrow down icon

Schritt 3. Wir erstellen Ihr Video.

In unserem vierstufigen Produktionsprozess wird unser gesamtes Team für Sie so richtig kreativ - natürlich sind Sie bei der Produktion live dabei und dürfen uns stets Ihr Feedback mitteilen.

Wir überlegen uns, wie wir den Knoten im Kopf Ihres Kunden lösen, um Ihrem Produkt zu mehr Aufmerksamkeit und Erfolg zu verhelfen.

asd
arrow down icon

Schritt 4. Einbindung des Videos

Das beste Erklärvideo der Welt hilft Ihnen nicht, wenn es nicht richtig in Szene gesetzt wird. Wir wissen genau, wie effektiv ein Video sein kann und wo es eingebunden werden sollte, damit es das volle Potenzial entfalten kann. Egal ob als Werbemittel in Facebook Ads oder als Kundenmagnet auf Ihrer Website. Wir wissen, was zu tun ist und stehen Ihnen selbstverständlicher als kompetenten Partner zur Seite.

Jetzt Kontakt aufnehmen
asd

Aktuelle Blogbeiträge

Immer auf dem laufenden bleiben - Mit den neusten Videobakers Blogbeiträgen.

blog preview

9 Oktober 2020

In 5 Schritten zum einzigartigen Erklärvideo

author avatar

Simon Ludwig

blog preview

22 Oktober 2020

E-Learning - Mit Videos die perfekte Schulung erstellen

author avatar

Andre Borges

blog preview

5 Dezember 2020

Wie Sie Ihr Corporate Design im Video richtig umsetzen.

author avatar

Simon Ludwig

blog preview

18 Oktober 2020

Alles was du zum Thema Erklärvideo-Agentur wissen musst

author avatar

Simon Ludwig

blog preview

18 Oktober 2020

Alles was du zum Thema Erklärvideo wissen musst.

author avatar

Simon Ludwig

blog preview

20 Oktober 2020

Google Data Studio - Die ersten Schritte zum Report

author avatar

Simon Ludwig

blog preview

13 April 2020

Die Dispositions-Software für Fahrdienste und Transporte

author avatar

Simon Ludwig

blog preview

12 Juli 2021

5 Gründe, warum Video Marketing echten Erfolg bringt

author avatar

Simon Ludwig

blog preview

13 April 2020

Bestellkind - Im Restaurant mit dem Smartphone bestellen

author avatar

Simon Ludwig