Ionic PWA Tutorial – Progressive Web Apps Tutorial

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

Kennst Du schon die Weiter-Entwicklung von Webseiten?

Ich zeige Dir, wie Du in mit dem Ionic Framework ein PWA entwickeln kannst

Die PWAs haben die Vorteile einer nativen App, sowie einer HTML-Webseite.

Bereit für 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: Ionic PWA Tutorial

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 Deine Web App in eine PWA, um zu wandeln.

 

 

Unser Ziel: Progressive Web Apps? kurz + knackig

Progressiv = ständig aktualisierend (Updates laden mit jeden neuen App-Start) - Der Duden beschreibt das Wort progressiv mit "sich in einem bestimmten Verhältnis allmählich steigernd, entwickelnd."

Web App = eine Anwendung in einem Browser

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

Die PWAs sollen die Zukunft des Webs und aller Android und iOS Apps sein. Die Grenzen zwischen einer Webseite und der App verschwimmen bei einer PWA.

Progressive Web Apps sind Webseiten, die Deine Smartphone abspeichert kann. Der Unterschiede zur normalen App sind marginal in Aussehen und Geschwindigkeit .

Beim Surfen im Web kann der Nutzer Webseiten auf seinem Smartphone „installieren“ und von einem spürbaren Geschwindigkeits- und Nutzungsvorteil profitieren.

Technische Grundlagen - Dein Vorwissen

Lerninhalte - Ionic PWA Tutorial und mehr

Dieses Ionic PWA Tutorial soll Dir zeigen…

… wie Du in Ionic eine PWA in 10s baust
… wieso die PWAs besser sind als normale 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.

 

 

ServiceWorker - Cooler Proxy

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

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

Mehr zum ServiceWorker findest Du in Mozillas Kochbuch für ServiceWorker

Mainfest - Mehr App. Weniger Webseite.

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

Mehr zur Anwendungshülle erfährst Du in Google's "The App Shell-Model"-Tutorial, wo Osmani genauer auf das Gerüst hinter der PWA eingeht.

Manifest zeigt Icons + Farben

In einem Browser mit einer Chrome-Engine (z.B. Vivaldi, Brave) eignet sich für die Entwicklung von PWAs hervorragend, da die Entwickler-Tools PWA Werkzeuge standardmäßig dazu liefern.

Google hat seinen Browser-Tools 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 gezögert. Sie wollten PWAs nicht unterstützen, da die Installation von PWAs die vollständige Kontrolle der Firma über die Apps nimmt.

Ionic 4  mit PWAs

Warum soll ich noch ein Framework verwenden, um eine PWA zu entwickeln?

Ganz einfach: Es geht schneller.

Einen ServiceWorker mit allen Funktionalitäten zu entwickeln ist eine langwierige Arbeit. Ionic verwendet dazu den Google eigene JavaScript Bibliothek Workbox (früher bekannt auch als sw-toolbox).

Die PWA bietet verschiedene Funktionalitäten, dass die Webseite auf Kamera, Speicher, GPS und Sensoren nutzen kann. Die praktischen Benachrichtigungen sind auch möglich z. B. mit OneSignal

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. Progressive Web Apps?

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 mit RSA und einen Public- und Private-Key-Verfahren sichert die Datenströme und erschwert Hackern das Abgreifen von sensiblen Daten. Wenn Du in die Verschlüsselungen tiefer eintauchen möchtest, kannst Du mein Tutorial zum RSA-Verfahren lesen.

Die PWAs können Programmierer vorerst lokal erstellen. Zum Entwickeln reicht Dir ein localhost über XAMPP oder ähnliches.

Icons der PWA

Jede gute Webseite sollte im Tab oben ein kleines Bildchen, ein sogenanntes "Favicon", in der Größe 32x32 Pixel schmückt.

Die Auflösung reicht nicht für die Auflösung Standards der neuen App-Icons auf iOS und Android aus. Auf dem 4K Display eines Sony Smartphones sieht eine solches Favicon Deine PWA dann eher aus wie ein Retro-Game. Wenn Du in Andorid eine App veröffentlichen willst, musst Du ein paar Regeln zur Auflösung beachten.

Lösung für Progressive Web Apps: Die Manifest-Datei enthält Icons in verschiedenen Größen, die der Homescreen als Icon nutzt.

Deshalb sind PWAs überlegen!

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.

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

 

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

Gute PWAs sind die Starbucks-App, Google Maps Go und die Twitter Lite App. Mit der letzteren 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. Weiter gehts mit dem Ionic PWA Tutorial.

  1. 1x Code Kommentar entfernen
  2. 1x auskommentieren
  3. 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 den Abschnitt mit den ServiceWorker aus und die Cordova Bibliothek ein. Das vermeidet unnötiges Laden von ungenutzten Bibliotheken.

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.

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
1 Star2 Stars3 Stars4 Stars5 Stars (5 votes, average: 4,20 out of 5)
Loading...

Kommentare 1

  • Thank you for mentioning PWA apps can work offline. The linked article mentions olny one solution, so let me also share with you some tips on how to make PWA work offline and handle dynamic data. This article describes several methods to do so and uses the example of the Twitter app. I hope you will find it useful: https://hi.monterail.co/2KV3rIk

Schreibe einen Kommentar

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