PWA in 10s entwickelt + Ionic / Einfacher GUIDE

Zukunft des Webs PWAs Steffen Lippke Ionic TutorialSchnell. Schneller. PWA.

Kennst Du schon die neuste Entwicklung von Webseiten?

Ich zeige Dir, wie Du in 10s mit dem Ionic eine PWA bauen kannst.

Die PWAs sind die Fusion von Vorteilen einer nativen App und schnellen Webseite.

Bereit für die Innovation in Deiner App?

Inhalt - Weg zu PWA

Herausforderung + Coding-Ziel

Coding zur Umsetzung

Coding-Ansatz + Konzept

Erweiterungen + Aufgaben

Grundlagen einfach erklärt

Fertiges Ziel / Ergebniss

1. Kapitel

Herausforderung & Ziel: In 10s eine PWA entwickeln mit Ionic

Herausforderung und Ziel
Herausforderung und Ziel

Die PWAs sind schnell landende Webseiten, die mit einer Zwischenspeicherung und einer App-Hülle dem Nutzer einen Performance Vorteil bieten.

Das Ionic Framework ermöglicht es blitzschnell eine Web App in eine PWA zu konvertieren.

 

 

Unser Ziel: Progressive Web App – kurz + knackig

Progressiv = ständig aktualisierend (Updates laden mit jeden neuen Appstart)

Web App = Anwendung in einem Browser

Progressive Web App = responsive Webseite als Anwendung in einem Browser mit ServiceWorker und Manifest

Die PWAs sollen die Zukunft der Webs und aller Android und iOS Apps sein. Beim Surfen im Web kann der Nutzer Webseiten auf seinem Smartphone „installieren“  und von einem spürbaren Geschwindigkeits-- und Nutzungsvorteil profitieren.

Audit von Google Chrome
Audit von Google Chrome

Technische Grundlagen - Dein Vorwissen

Lerninhalte - PWAs und mehr

Dieses Tutorial soll Dir zeigen…

… wie Du in Ionic eine PWA in 10s baust
… wieso die PWAs besser sind als die Web Apps
… warum die PWAs die Welt verändern 😉

 

2. Kapitel

Konzept: ServiceWorker und Manifest als Grundlage

Konzept und Lösungsansatz
Konzept und Lösungsansatz

Der ServiceWorker ist eine JavaScript Datei, die als künstliche Proxy arbeitet.

Das Manifest ist ein JSON Datei, die Informationen für die App-Hülle wie Icons, Beschreibung und Farben enthält.

11 Kostenlose Exklusive App Dev Tipps

Deine Mail für Zugang zu praxisnahe App Entwicklung Tipps zu erhalten

 

 

ServiceWorker - Cooler Proxy

Die Aufgabe des ServiceWorkers ist die eingehenden und ausgehenden Datenströme zu steuern.

Das Ziel des ServiceWorker ist die Daten der App schneller dem Nutzer zu anzuzeigen und den Datenverbrauch zu reduzieren. Eine bekannte Strategie ist das Caching der Daten, welche der ServiceWorker „intelligent“ steuert.

Mainfest - Mehr App. Weniger Webseite.

Das Manifest soll das Aussehen beim Start der PWA standardisieren. Um die App auf den Homescreen abzulegen, braucht die App ein Manifest. Die kurze JSON Datei, verweist mit relativen Pfaden auf Bildericons und stellt eine Farbpalette für den Ladescreen und die Anwendungshülle zu Verfügung.

Manifest zeigt Icons + Farben

Der Browser Chrome (oder Vivaldi) eignet sich für die Entwicklung von PWAs hervorragend.

Google hat seine Browsertools speziell an die Anforderungen der PWAs angepasst.

Die Browser Firefox und Safari (seit 2018) unterstützen den die schnell ladenden Web Apps. Apple hat lange Zeit mit der Unterstützung der PWAs gezögert, da die Installation von PWAs die vollständige Kontrolle der Firma über die Apps auf den Ihren Geräte nimmt.

3. Kapitel

Grundlagen: Das können Progressive Web Apps

Theorie einfach erklärt
Grundlagen einfach erklärt

Was sind die wichtigsten Features von PWAs?

Warum sollte ich eine PWA bauen?

Warum sind PWAs besser?

Was machen die PWAs anders, sodass Sie die Zukunft des Web sind?

 

Sicher. Sicherer. PWA?

PWAs setzen auf den sicheren Standard mit SSL. Für die Veröffentlichung eine PWA ist zwingend ein Server mit HTTPs notwendig. Die Verschlüsselung sichert die Datenströme und erschwert Hackern das Abgreifen von sensiblen Daten.

Die PWAs können Programmierer vorerst lokal erstellen. Zum Entwickeln brauchst Du eine localhost z. B. XAMPP oder ähnliches.

Icons der PWA

Wer schon mal gesurft hat, dem ist aufgefallen, dass jede gute Webseite in der Tableiste ein kleines Favicon in der Größe 64x64 Pixel schmückt.

Die Auflösung reicht nicht für die Standards der neuen App-Icons auf iOS und Android aus. Auf dem 4K Display eines Sony Smartphones sieht eine solches Favicon eher aus wie ein schlechtes Retrogame. Lösung: Die Manifest Datei enthält Icons in verschiedenen Größen, die der Homescreen als Icon nutzt.

Warum Web Apps schlechter als PWAs sind

Was machen PWAs in Tunneln?

Zug. Tunnel. Berg. Jeder kennt es:

Wenn die Verbindung zum Netz gekappt ist oder diese schleppend langsam ist, dann profitiert der Nutzer von den Features der PWAs. Die intelligenten Webseiten bieten eine Offline Funktion, die bei einer guten Verbindung automatisch die neuen Daten synchronisiert.

11 Kostenlose Exklusive App Dev Tipps

Deine Mail für Zugang zu praxisnahe App Entwicklung Tipps zu erhalten

Die PWAs sind schnell: Das Caching der Daten lädt alle Daten beim Appstart schon in der App. Die Ladezeiten wirken instant und die „aktuelleren“ Werte laden mit etwas Verzögerung nach.

 

Steffen's TippSteffen's Tipp: Big Players. Tiny PWAs

Gute Beispiele für die PWAs sind die Starbucks App, Google Maps Now und die Twitter Lite App. Mit der letzten App posten die Nutzer 75 % mehr Tweets, da die Inhalte schneller laden und Verzögerungen minimal sind.

4. Kapitel

Coden: Weniger ist mehr.

Coding und Umsetzung
Coding zur Umsetzung

Die PWAs sind Apps die für Android, iOS und Windows Phone geeignet sind.

Die Firma Microsoft geht noch einen Schritt weiter und möchte die PWAs in den Windows Store über Webcrawling aufnehmen.

Der folgende Abschnitt zeigt, dir, wie Du in 10 s aus deiner Ionic App eine PWA entwickelst.

1x Code Kommentar entfernen, 1x auskommentieren, 1x App builden. Das war’s.

Seit Ionic 3 unterstützt das Framework standardmäßig die PWAs.

Als Grundlage dafür dient die sw-toolbox von Google. Die sw-toolbox erstellt den ServiceWorker und listet die Dateien auf, welche die App zwischenspeichern soll.

Die sw-toolbox enthält standardisierten Code, der verschiedene Caching Strategien integriert.

Index html und ServiceWorker als JavaScript
Index html und ServiceWorker als JavaScript

Zuerst kommentierst Du in der index.html die Abschnitt mit den ServiceWorker aus und die Cordova Library  ein. Das vermeidet unnötiges Laden von ungenutzen Libraries.

Zum Schluss noch das Projekt für die „Produktion“ builden lassen mit

npm run ionic:build -- --prod

Fertig ist die PWA.

Application Tab Chrome Dev Tools
Application Tab Chrome Dev Tools

Chrome Developer Tools und PWAs

Chrome bietet standardmäßig in seinem Browser die Möglichkeit die PWA auf Performance, SEO und anderer Kritiken beurteilen zu lassen. Die Standard PWA von Ionic erfüllt nicht alle Tests von Chrome.

Dem Programmierer bleibt Optimierungsbedarf.

 

Steffen's TippSteffen's Tipp: Chrome Dev Tools

Öffne das Chrome Tool mit der Taste F12 und suche den Tab Audits unter den zwei Pfeilen „>>“. Dann starte den Audit. Das kann 1-2 Minuten dauern, bis die vollständigen Ergebnisse geladen sind und Chrome den Test abgeschlossen hat.

11 Kostenlose Exklusive App Dev Tipps

Deine Mail für Zugang zu praxisnahe App Entwicklung Tipps zu erhalten

Mit dem Audit validierst Du, dass Du mit Ionic eine funktionstüchtige PWA entwickelt hast. Außerdem siehst Du eine detaillierte Auflistungen an den Optimierungen, um deine App schneller reagieren und starten zu lassen.

Ergebnisse Audit von Google Chrome
Ergebnisse Audit von Google Chrome

5. Kapitel

Erweiterungen: PWA installieren

Erweiterungen und Weiterführendes
Erweiterungen + mehr

Die fertige PWA muss Du noch auf einen Server installieren.

Verschiebe eine Ordner.

Lade paar Dateien hoch. Fertig?

 

ErweiterungErweiterung: PWA auf Dienen Server

Setze eine neue Domain auf und kaufe Dir ein SSL Zertifikat oder wenn es Dein Provider erlaubt nutze Let’s Encrypt, um Deine Seite zu verschlüsseln. Viele Provider unterbinden die Open Source Alternative, da sie sonst das Geschäft mit Ihren Zertifikaten verlieren.

Kopiere den Inhalt des www Ordners auf Deine Webspace und die PWA läuft. Test, ob Du mit Deinem Smartphone die App dem Homescreen hinzufügen kannst. Jetzt kannst Du auch zum ersten Mal testen, ob die PWA Icons, Farben und Rahmen der PWA richtig darstellt.

Nehme, wenn notwendig Anpassungen an der Mainfest.json Datei vor. Test die PWA auf verschiedenen Geräten (auch auf eine iPhone)

6. Kapitel

Fazit: Caching, Offline, AppShell.

Ziel und Fazit
Ziel und Fazit

PWA bringen viele Vorteile, mit denen Du eine grandiose App oder Webseite bauen kannst.

Welche Features interessiert Dich am meisten?

Konntest Du einen Geschwindigkeit Vorteil spüren?

Auch wenn die Verbreitung von PWAs erst noch andauert, dann Blicken wir eine Zukunft, die viele Veränderungen zum Positiven bringen. Nutzer profitieren vom Speed. Der Entwickler kann nach belieben Update einspielen.

Cool?

 

Credits zu den verwendeten Bildern
Icons made by Vectors Market from www.flaticon.com is licensed by CC 3.0 BY

Sichere Dir den kompletten
Fundamental Ionic Course

Die kostenlosen Tutorials sind ein Ausschnitt
aus dem Fudamental Ionic Course by Steffen Lippke.

Schon 4832 erfolgreiche Absolventen

  • Code Downloads + umfangreiche Lösungen + Dateien für Grundlagen zum Coden
  • Visuelle Beschreibungen mit HD+ Screenshots und Hilfen
  • Steffen's Clean Code - Erweiterung - Verbesserungs - Tipps
 

100 h Kurslänge | 100 % Geld-Zurück-Garantie | Live-Support

 
1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5,00 out of 5)
Loading...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.