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

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

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

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

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

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

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

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

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

„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

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

„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

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

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

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

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

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

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

Entwicklungsschritt 2 – Die Software kann mehr Besser als die Technik, sind für den Nutzer die Möglichkeiten durch die Vielfalt der Anwendungen! 2008 - 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

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

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

„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

„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

„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

„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

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

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

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

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

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

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

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

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

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

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

Mehrere WebApps von einem Anbieter Suchmaschine Zufallsgenerator Videos Nachrichten Links www.blinde-kuh.de Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

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 https://www.blinde-kuh.de/pwa/ Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft

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

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

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

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

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

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

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

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

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

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