Progressive Web App Entwicklung [Teil 1]

Ich bin ja ein großer Freund von Weiterbildung. Und aus diesem Grund hab ich mich mal in die Welt von Udemy gewagt. Und einen Kurs belegt. Es geht, wie der Titel schon verrät um Progressive Web Apps. Damit alle was davon haben, werde ich meine Erkenntnisse aus den Videos und Lektionen hier gerne kundtun. Ob es was taugt, werden wir wohl erst am Ende der Kurse erfahren

PWA: Abschnitt 1, Lektion 1

Dann mal los – Über den Kurs an sich

Es beginnt damit, das ich erklärt bekomme warum das Entwickeln mit PWA Sinn macht. Das PWA der neueste Shice sind. Und was mich in dem Kurs erwartet. Ausserdem geht es um die Kernkompetenzen einer Progressive Web App

Das Interesse an PWA laut Google
  • Auf dem Homescreen installieren
  • Offline Erreichbarkeit
  • Push Notifications
  • User Standorte
  • Gerätekamera erreichen
  • Hintergrund Synchronisation

Zum Schluss wird noch erklärt was für eine PWA ich in diesem Kurs schreiben werde. Der Kursleiter stellt sich noch einmal vor und ich bin schon ganz heiß darauf los zu legen.

PWA: Abschnitt 1, Lektion 2

Dive into PWAs

In der zweiten Lektion wird die Frage geklärt, was Progressive Web Apps eigentlich sind. Und um dem Ganzen den Zauber etwas zu nehmen, sind PWAs eigentlich nur ein Sammelbegriff für Features die man seiner Webseite hinzufügen kann um sie zu verbessern.

You progressively enhance your existing web pages to feel and work more like native mobile apps.

Maximilian Schwarzmüller – Udemy

Es geht dabei nicht nur um Responsivität. Es geht viel mehr um die Funktionalitäten, die man aus bestimmten Apps bereits kennt. Wie z.B. Offline Modus, Icons auf dem Homescreen oder Datasynchronisierung im Hintergrund.

Die Vorteile der Progressive Web Apps können in drei Kernbereiche aufgeteilt werden.

  • Zuverlässig: Schnelle Ladezeiteun und offline Funktionalität
  • Schnell: User Interaktionen werden schnell “beantwortet”
  • Einnehmend: Der User soll sich öfter mit der PWA auseinandersetzen

PWA: Abschnitt 1, Lektion 3

Mobile Web vs Native Apps

Macht das Entwickeln einer PWA überhaupt Sinn? Lediglich 13% der User nutzen das mobile Web und die restlichen 87% verlassen sich auf die nativen Apps. Die Gründe, warum das so ist liegen aber in den Vorteilen der nativen Apps.

Und wie bereits weiter oben erwähnt greifen PWAs genau an dieser Stelle an und bieten die Funktionalitäten, die eine native App auch bietet.

Welche Nachteile haben native Apps?

Sollte man sich für das Entwickeln einer nativen App entscheiden, muss man berücksichtigen, dass man für zwei verschiedene Anbieter von Apps entwickeln muss: iOS und Android.

80% der User benutzen lediglich 3 Apps auf ihren Geräten und die Chance dass die eigene App dabei sein könnte ist eher schwindend gering. (Facebook, Whatsapp, Google)

PWA vs native Apps vs traditional web pages

Native Apps:
Bei den nativen Apps sind die Möglichkeiten das Gerät zu nutzen schier unendlich. Kamera, Standort, Gyrosensor und vieles mehr. Außerdem ist auch das Betriebssystem des Devices nutzbar. Dafür leidet die Reichweite aus dem Grund, dass im Durchschnitt nur die Top 3 Apps genutzt werden.

Web Apps:
Hier ist es genau gegenteilig. Die Nutzbarkeit von bestimmten Geräte Features ist bei einer traditionellen Web App sehr eingeschränkt. Dafür ist die Reichweite um ein vielfaches höher, denn man muss nur eine URL aufrufen und die Seite ist erreichbar. Installationen aus einem App Store hingegen fallen flach.

PWAs:
Die Progressive Web Apps vereinen jetzt genau diese Vorteile aus den beiden vorher gegangenen Typen. Man hat die Möglichkeit die Gerätefunktionen zu nutzen und man bekommt die hohe Reichweite der traditionellen App, weil man auch bei der PWA nur eine URL öffnen braucht um auf sie zuzugreifen

PWA: Abschnitt 1, Lektion 4

Demo PWA und Aussicht auf die eigene PWA

In der vierten Lektion wird eine Beispielseite genannt. An der man die Vorteile einer Progressive Web App testen kann. Unter https://app.ft.com befindet sich die PWA Version der Financial Times. Wer möchte, kann hier gerne etwas herum experimentieren. Gerade im Bereich “Was passiert wenn die Seite offline ist” kann man wunderbar sehen, dass die Inhalte immer noch lesbar sind.

Bildauschnitt der PWA Version, der Financial Times
PWA Version der Financial Times

Auf die Vorstellung der App die wir gemeinsam bauen, gehe ich erst einmal nicht weiter ein. Da ich nicht zu viel vorgreifen möchte. So viel nur dazu: Es handelt sich in dem Kurs um einen Instagram Clone. Ob ich diesen so nachbaue oder meine eigene Seite direkt zur PWA weiterentwickel weiß ich jetzt noch nicht.

Ein gut gemeinter Rat des Kursleiters:
Für das Entwickeln und testen der App, macht es Sinn Google Chrome zu verwenden, da der Browser besonders gute Developer Tools mit sich bringt. Und das Lighthose Plugin, das speziell zum testen der PWAs geeignet ist.

PWA Node.js
Weiter zu PWA Entwicklung Teil 2
Benjamin
Vernetz Dich

Benjamin

Head of Development bei Samemission UG (haftungsbeschränkt)
Ich arbeite mit Computern seit ich vier Jahre alt bin. Angefangen mit den C64 über den Amiga, zum PC10 und weitergemacht beim x486er bis zum neumodischen PC..SEO und Onlinemarketing sind nunmehr seit über 10 Jahren meine Passion
Benjamin
Vernetz Dich