Progressive WebApps in der Kinderseitenlandschaft

Präsentation zum Thema: "Progressive WebApps in der Kinderseitenlandschaft"—  Präsentation transkript:

1 Progressive WebApps in der Kinderseitenlandschaft
Zurück in die Zukunft Progressive WebApps in der Kinderseitenlandschaft Darja Martens und Stefan R. Müller, Suchmaschine Blinde Kuh

2 Wirrwarr an Begriffen entzaubern
PWA WebSite Mobile Endgeräte HTML5 WebApps Hybride App WebAPK appli Apps Native Apps Webanwendung Application World Wide Web JAVA Javascript Windowsprogramm Mobile Anwendung Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

3 APP Es wurde irgendwie festgestellt … WEB Kindliche Entwicklung
Übermorgen Gestern Heute Morgen Vorgestern WEB Smartphone erfunden Schule, Lehrer langweilig cool zu Hause, Spielen, Freunde Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

4 Hurra !!! Das Web ist endlich tot !!!
Zitat: „THE WEB IS DEAD. LONG LIVE THE INTERNET“ Wired-Chefredakteur Chris Anderson – August 2010 Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

5 Vivre le Freies Internet Hurra !!! Das Web ist endlich tot !!!
von wegen … Hurra !!! Das Web ist endlich tot !!! Zitat: „THE WEB IS DEAD. LONG LIVE THE INTERNET“ Wired-Chefredakteur Chris Anderson – August 2010 Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

6 Der Vergleich hinkt, … Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

7 Es sind Paralleluniversen …
WEB APP Übermorgen Gestern Heute Morgen Vorgestern Progressive WebApps (PWA) Über den Browser installieren Icon WebApps Direkt in den Browser aufgerufen WebSite (HTML) Hybride Apps Web in einem extra „Fenster“ Native Code (JAVA) Webbasierende Apps wegen Datenaustausch Datenbanken Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

8 Was ist eigentlich genau „mobil“ ?
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

9 Klare Differenzierung mobiler Endgeräte
Laptop/Notebook etwa nicht mobil? Smartphone Hardware Wischen mobil privat cool neu Desktop PC Tippen, Klicken Schule, Arbeit(sgerät) old scool = Sperrmüll Internet LAN WLAN 5G WLAN 3G 5G 3G Programme Tools, Anwendungen (APPs, frz: appli) Programme Tools, Anwendungen (Applications) Software Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

10 „mobil“ oder doch lieber „mobile“ ?
LAPTOP PC Workstation PHONE TABLET TV nicht mobil, aber neuerdings auch WLan kann mobil, muss aber nicht mobil genutzt werden nicht mobil, und auch nicht mobile mobil, aber nicht mobile mobil, aber nicht mobile wifi (WLAN) nicht mobil, kann aber mit Modem ein mobile sein nicht mobil, und auch nicht mobile kann mobil sein, kann mit Modem ein mobile sein mobil und mobile mobil und mobile mobile connection Android, iOS iPhone, Windows Android, iOS, iPad, Windows Betriebssystem Windows, Linux, Android, Mac Windows, Linux, Android, Mac SmartTV, Android Nicht alles was „mobil“ sein könnte, ist auch ein „mobile“, und nicht immer ist ein „mobile phone“ auch eine „mobile connection“. Android ist nicht immer ein „mobile“ und Windows kann auch ein „mobile“ sein. Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

11 Klare Differenzierung der Betriebssysteme
Laptop/Notebook Hardware Smartphone Desktop PC Tablet Windows (microsoft) Android (google) Linux iOS(apple) R. I. P. ChromeOS (google) Betriebssystem WindowsMobile Mac OS (apple) (nokia) Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

12 „Es wächst zusammen, was zusammen gehört.“
Aber das ist vorbei … „Es wächst zusammen, was zusammen gehört.“ Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

13 Symbiosen – Beispiel Apple (Hardware)
Ein Tablet ist irgendwie ungeeignet für den Büroalltag. Lösung: bluetooth Tablet Keyboard Notebook Auch andere Hersteller bieten eine Bluetooth-Tastatur an Manche Firmen bringen Hybride auf den Markt, die eigentlich Notebook sind, aber deren Tastatur sich abnehmen lässt, oder umgekehrt. Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

14 Google Fuchsia Symbiosen – Beispiel Google (Betriebssystem) Hardware
Laptop/Notebook Hardware Smartphone Desktop PC Tablet Android (google) ChromeOS (google) Google Fuchsia Betriebssystem Ein Betriebssystem für alle Endgeräte Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

15 Samsung DeX Symbiosen – Beispiel Samsung (Hardware) Hardware
Monitor oder TV Maus Tastatur Hardware Smartphone Phone (ab Galaxy S8) Android (google) USB HDMI Betriebssystem Samsung DeX Phone wird auch zum Desktop PC Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

16 Symbiosen – Beispiel Samsung (Hardware)
Smartphone Desktop (womöglich mit TV als Monitor) Handy Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

17 Was genau ist die „mobile“ Entwicklung?
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

18 Entwicklungsschritt 1 – Die Hardware ist da
Krass … Das Internet wird mobil, denn es passt endlich in den Tricorder. Raumschiff Enterprise – Das nächste Jahrhundert Werbungslogan von apple für das erste iPhone: Hier ist deine Musik. Hier sind deine s. Hier ist … das Internet. Und hier ist ein Anruf. Auf deinem iPhone. Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

19 Entwicklungsschritt 2 – Die Software kann mehr
Besser als die Technik, sind für den Nutzer die Möglichkeiten durch die Vielfalt der Anwendungen! Werbeslogan von apple für das zweite iPhone: Es gibt für fast alles eine APP. Nur auf deinem iPhone. Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

20 Entwicklungsschritt 3 – Das Design ändert sich
Jede neue Lösung schafft neue Probleme 1 Während Phones und Tablets noch recht starr sind, was das Design betrifft, müssen sich nun Webseiten den Endgeräten anpassen. Responsives Design (reagierendes Design), bzw Adaptives Design 2 Unterschiedliche Anforderung bei Desktop-Arbeitsplätzen, Notebooks, Smartphones, Tablets und anderen Endgeräten. (Smartes Design) 3 Die Mächtigkeit der Hardware, der Browser und der Betriebssysteme ist unterschiedlich. Nicht überall geht Alles. Z.B.: Ein Smartphone lässt sich kippen, ein Monitor zwar auch, aber das Bild kippt mit. Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

21 Responsives Design vs. Adaptives Design
Geht von der Hardware z.B.: Bildschirmauflösung aus. (CSS-Lösung) @media only screen and (max-width: 700px) { Der Bildschirm ist nicht breiter als 700px } Adaptives Design Geht vom Browser aus. (Javascript-Lösung) if ( navigator.userAgent.indexOf( 'Chrome' ) > -1 ) { Es ist der Chrome-Browser } Problem: Keine Lösung ist vorausschauend oder gar 100% optimal Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

22 „mobile first“ meint jetzt was genau?
1 Ausgangslage ist nicht mehr Desktop, sondern mobile Endgeräte 2 responsive design (adaptive design) - Ein Angebot kann sehr gut auf einem Smartphone oder Tablet laufen, aber eben auch auf dem Desktop oder TV und es sieht auch gut im Druck aus, sofern es ausgedruckt werden sollte. (Aber, es geht hier vor allem um Glasplatten.) 3 Das Angebot ist nicht nur optisch schlank, sondern auch strukturell (und eigentlich auch in der Logik und im Inhalt). 4 Es wird nicht alles HTML und Medien in allen denkbaren Auflösungen erst einmal ausgeliefert, und dann nach Belieben mit CSS wegeschaltet, was je nach Endgerät nicht zu sehen sein soll. Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

23 „mobile first“ bedeutet dann nicht:
Das alte Desktop-Design Muss weg bei Tablet und Phone Muss weg bei Desktop Titel (groß) Muss weg bei Phone Menu Titel (klein) Teaser (extern) Muss weg bei Tablet und Phone Text Muss weg bei Desktop Teaser (intern) Muss weg bei TV Footer Denn, zu viel HTML (Struktur) und CSS (Design) = viel zu schwer, viel zu langsam und zu viel Stromverbrauch !!! Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

24 „mobile first“ verlangt Dynamik
Tablet Desktop Titel (normal) Titel (groß) Menu Text Menu Text Teaser (extern) Titel Footer Text Teaser (intern) Titel (klein) Text Phone Footer Footer Die einzelnen Bauteile werden nach Bedarf mit Javascript nachgeladen, bzw. dynamisch umgewandelt Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

25 „mobile first“ bedeutet für Webangebote somit ….
Extended Markup Language XML Hypertext Markup Language Cascading Style Sheets HTML CSS Java script Daten JavaScript Object Notation Struktur Design Logik JSON Daten Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

26 Und was ist eine „mobile APP “ ???
1 Es ist ein Programm, das z.B.: in Java programmiert wurde. Native App, weil native Code. 2 Das Programm wird aus den AppStores bezogen, wobei sich der Nutzer dort registrieren muss. Java 3 Eigentlich hat es auch nichts mit Internet zu tun. Programmierung a Es sei denn, es greift auf die Daten eines Internet- Dienstes zu, etwa über einen Mail-, Web- oder andere Server Java ist nicht Javascript b Es sei denn, es ist eigentlich nur ein native Rahmen um eine Webanwendung - Hybride App Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

27 Was ist eine „Hybride APP “ ???
World Wide Web Eine Hybride App ist ein native Rahmen um eine Webanwendung herum, die selbst im Internet als Website existiert, und/oder deren Dateien als HTML5-Projekt auf dem Endgerät liegen. Hypertext Markup Language Cascading Style Sheets JavaScript Object Notation Java HTML CSS Java script JSON Struktur Design Logik Daten WebClient Native App Android System WebView WebApps der ersten Generation Seit Android 4.3 (Jelly Bean) eigene Komponente und nicht mehr fester Bestandteil des Android Systems. Grund waren ständige Sicherheitslücken und dadurch notwendige Udates und Upgrades. Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

28 Was ist eine „Webbasierende APP “ ???
Eine webbasierende App ist eine App in native Code, die Daten aus dem Web bezieht, bzw Daten in das Web sendet. Immer mehr Apps verlangten die Berechtigung „Internet-Zugriff“ Native Code Eingabe Daten DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA … World Wide Web Verarbeitung Ausgabe Native App Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

29 Was ist eine „Launcher APP “ ???
Macht nichts anders als eine Internetadresse (URL) an einen Browser auf dem Endgerät zu übergeben. Viele Apps sind irgendwie native, aber eigentlich eher nur ein „Link“ zu einer Website World Wide Web Native Code URL Teilen safari Apple firefox Mozilla Chrome Google edge Microsoft Native App Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

30 Die Touchicons Native Code App WebView Objekt HTML5
Wie bei einer native App sind die Touchicons (in den verschiedensten Größen) auch bei einer hybriden App innerhalb der App deklariert. App Native Code WebView Objekt HTML5 Mit nur einem Klick bin ich da ! Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

31 Die Touchicons HTML5 WebApp Mit nur einem Klick bin ich da !
Bei einer echten WebApp werden die Icons in der Webseite definiert. WebApp HTML5 Mit nur einem Klick bin ich da ! Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

32 Die Touchicons in der Webseite
add-to-screen Für den Safari-Browser bot Apple ab 2016 die apple-touch-icon-Deklaration an: HTML5 <link rel="apple-touch-icon" href="touch-icon-iphone.png“ > <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png“ > <link rel="apple-touch-icon“ sizes="180x180“ href="touch-icon-iphone-retina.png“ > <link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png“ > 180x180 167x167 152x152 Wird eine solche Webseite im iPhone oder im iPad geöffnet, erlaubt Safari, das Icon direkt auf den Home-Screen zu legen. Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

33 Die Touchicons in der Webseite
add-to-screen Die Vorteile: 1 Es ist keine Installation über einen App-Store notwendig. Also auch keine Nutzer-Registrierung. Kinder dürfen anonym bleiben. 2 Es sind keine hybriden Apps, oder Launcher-Apps notwendig, nur um einen Link vom Screen des Smartphones zur gewünschten Webseite zu haben. Also keine doppelte Entwicklung. 3 Es wird kein extra Speicher benötigt, der über die Abspeicherung der Icons hinausgeht. 4 WebApps haben keinen Zugriff auf das System des Endgerätes. 5 Die Installation ist kostenlos. 6 Es ist kinderleicht. Auch Kinder können die Touch-Icons ihrer Lieblingsseiten auf ihr Handy „installieren“ und „deinstallieren“. Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

34 WebApps Beispiele Facebook Google Maps Twitter NASA Pinterest
Starbucks Welt.de Angela Merkel Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

35 WebApps Beispiele für Kinder
WAS IST WAS Liliane Susewind Wendy Bibi Blocksberg Bibi&Tina SWR Kindernetz Legakids Blinde Kuh Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

36 Mehrere WebApps von einem Anbieter
Suchmaschine Zufallsgenerator Videos Nachrichten Links Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

37 Progressive WebApp – Das Manifest
2017 legen beim W3C Google, Mozilla, Microsoft und Apple Standards für das Manifest vor HTML <link rel="manifest" href="./pwa-manifest.json" type="application/manifest+json" > Manifest 1 Touch-Icons 2 Name 3 Internet-Adresse Blinde Kuh - Suchmaschine Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

38 Progressive WebApp – Das Manifest
Das Format des PWA-Manifestes ist JSON (JavaScript Object Notation) pwa-manifest.json Was steht denn hier eigentlich drin ??? {display: "standalone", orientation: "any", scope: "/pwa/", icons:  [ {src: "./assets/icons/icon-48x48.png", sizes: "48x48", type: "image/png„ }, {src: "./assets/icons/icon-96x96.png", sizes: "96x96", type: "image/png„ }, {src: "./assets/icons/icon-144x144.png", sizes: "144x144", type: "image/png"}, {src: "./assets/icons/icon-192x192.png", sizes: "192x192", type: "image/png"}, {src: "./assets/icons/icon-512x512.png", sizes: "512x512", type: "image/png„ } ], start_url: "/pwa/index.html?pwa", description: "Suchmaschine für Kinder - Blinde Kuh", name: "Blinde Kuh - Suchmaschine", short_name: "Blinde Kuh - Suchmaschine", theme_color: "#154787", background_color: "#154787" nur gucken, nicht auswendig lernen Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

39 Normale WebApp – Kein Internet
Wenn es keinen Internetanschluß gibt, wird im Browser eine Fehlerseite gezeigt. Sieht irgendwie ein bisschen doof aus Internet An Internet Aus Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

40 Progressive WebApp – Die Offlinevariante
Bei einer PWA gibt es eine Offline-Seite, die dann aktiv wird, wenn kein Internetzugriff besteht ServiceWorker(In) in JavaScript CACHE Internet An Internet Aus Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

41 Progressive WebApp – Mit Sicherheit
Vor allem Google forciert das Thema, dass Anbieter von HTTP aus HTTPS umstellen sollen HTTP HTTPs Hypertext Transfer Protocol Secure Webserver Hypertext Transfer Protocol unsicher, weil Daten werden klar übertragen „sicher“, weil Daten werden verschlüsselt Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

42 Progressive WebApp – Zusammenfassung
Webseite Touch-Icons Offline-Seite Webserver HTTPs ServiceWorker Icons Display Orientation Name Description Manifest Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

43 Progressive WebApp – Install-Banner
Browser wie Chrome zeigen bei einer progressiven WebApp eine Installationsaufforderung Install-Banner Webseite Installierte WebApp Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

44 Progressive WebApp – WebAPK
Der Chrome-Browser kann auf Android-Gräten eine APP generieren Google Chrome öffnen erzeugen APK entpacken Gepackte APP Webseite Native App Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

45 Progressive WebApp versus Native, Hybride App
Die Vorteile: 1 Es ist keine Installation über einen App-Store notwendig. 2 Es ist keine mehrfache Entwickung notwendig. 3 Eine installierte PWA hat ca. 60 Kbyte. Eine hybride App hat meist schon 2 Mbyte. 4 Die App steht nicht mehr in Konkurrenz zur eigenen Webseite. 5 Die progressive WebApp wird Browser und Geräte -unabhängig. neu: seit Herbst 2018 6 Die progressive WebApp ist auch auf einem Windows PC installierbar. 7 Die progressive WebApp ist durch die Webseite suchmaschinenoptimiert. Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

46 Eine kleine Statistik am Endeh
2012 ist Chrome für den mobilen Markt noch bedeutungslos 2017 ist Chrome mit knapp 60% Marktführer 2018 spielt Firefox keine Rolle auf dem mobilen Markt 2018 liegt Safari bei 14%, und lag gemütlich all die Jahre um die 20% 2018 liegt der Absatz anteilig im Mobilen Markt von Android-Geräten bei 83% und von iOS-Geräten bei 16%, das sind zusammen 99% Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

47 Richtungsvorgaben scheitern im Alltag
Der Mobilmarkt hat sich nahezu unberechenbar weiterentwickelt und wird dies weiter tun. Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft