Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
Zurück in die Zukunft
Progressive WebApps in der Kinderseitenlandschaft
Hamburg 2018, Darja Martens und Stefan R. Müller, Suchmaschine Blinde Kuh
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
Wirrwarr an Begriffen entzaubern
Application
PWA
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
Es wurde irgendwie festgestellt …
WEB
APP
Übermorgen
Gestern
Heute
Morgen
Vorgestern
langweilig cool zu Hause, Spielen, Freunde Schule, Lehrer
Smartphone erfunden
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
Hurra !!! Das Web ist endlich tot !!!
Zitat: „THE WEB IS DEAD. LONG LIVE THE INTERNET“ Wired-Chefredakteur Chris Anderson – August 2010
Vivre le Freies Internet
von wegen …
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 …
APP
Übermorgen
Gestern
Heute
Morgen
Vorgestern
WEB
Webbasierende Apps wegen Datenaustausch
Datenbanken
WebApps Direkt in den Browser aufgerufen
Hybride Apps Web in einem extra „Fenster“
Native
Co
de
(JAV
A)
We
bSi
te (
HTM
L)
Progressive WebApps (PWA) Über den Browser installieren
Icon
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
Desktop PC
Smartphone
Wischen mobil privat cool neu
Tippen, Klicken Schule, Arbeit(sgerät) old scool = Sperrmüll
Programme Tools, Anwendungen (Applications)
Programme Tools, Anwendungen (APPs, frz: appli)
Har
dw
are
Soft
war
e
LAN WLAN 5G Internet
Differenzierung mobiler Endgeräte
3G
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
Desktop PC
Smartphone
Wischen mobil privat cool neu
Tippen, Klicken Schule, Arbeit(sgerät) old scool = Sperrmüll
Laptop/Notebook
etwa nicht mobil?
Programme Tools, Anwendungen (Applications)
Programme Tools, Anwendungen (APPs, frz: appli)
Har
dw
are
Soft
war
e
LAN WLAN WLAN 5G Internet
Klare Differenzierung mobiler Endgeräte ?
3G 5G 3G mit Wlan und Modem (oder gar mobilen Wlan-Router via Smartphone)
„mobil“ oder doch lieber „mobile“ ?
PHONE TABLET
LAPTOP
wifi (WLAN)
mobile connection
mobil, aber nicht mobile
mobil, aber nicht mobile
kann mobil, muss aber nicht mobil genutzt werden
PC Workstation
TV
mobil und mobile
mobil und mobile
kann mobil sein, kann mit Modem ein mobile sein
nicht mobil, und auch
nicht mobile
nicht mobil, kann aber mit
Modem ein mobile sein
nicht mobil, aber neuerdings auch WLan
nicht mobil, und auch nicht
mobile
Betriebssystem Android, iOS
iPhone, Windows Android, iOS,
iPad, Windows 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
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
Desktop PC
Smartphone
Laptop/Notebook
Har
dw
are
Bet
rieb
ssys
tem
Klare Differenzierung der Betriebssysteme
Android (google)
Tablet
WindowsMobile
Windows (microsoft)
Linux
ChromeOS (google)
Mac OS (apple)
iOS(apple)
(nokia)
R. I. P.
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
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)
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.
Ein Tablet ist irgendwie ungeeignet für den Büroalltag.
Lösung: bluetooth
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
Desktop PC
Smartphone
Laptop/Notebook
Har
dw
are
Bet
rieb
ssys
tem
Symbiosen – Beispiel Google (Betriebssystem)
Android (google)
Tablet
ChromeOS (google)
Google Fuchsia Ein Betriebssystem für alle Endgeräte
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
Smartphone Phone Har
dw
are
Bet
rieb
ssys
tem
Symbiosen – Beispiel Samsung (Hardware)
Android (google)
(ab Galaxy S8)
Phone wird auch zum Desktop PC
Samsung DeX
USB USB HDMI
Monitor oder TV Maus Tastatur
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
Hier ist deine Musik. Hier sind deine Emails. Hier ist … das Internet. Und hier ist ein Anruf. Auf deinem iPhone.
Raumschiff Enterprise – Das nächste Jahrhundert
2007 - Werbungslogan von apple für das erste iPhone:
Krass … Das Internet wird mobil, denn es passt endlich in den Tricorder.
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
Entwicklungsschritt 2 – Die Software kann mehr
Es gibt für fast alles eine APP. Nur auf deinem iPhone.
2008 - Werbeslogan von apple für das zweite iPhone:
Besser als die Technik, sind für den Nutzer die Möglichkeiten durch die Vielfalt der Anwendungen!
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
Jede neue Lösung schafft neue Probleme
Entwicklungsschritt 3 – Das Design ändert sich
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.
Responsives Design vs. Adaptives Design
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
Responsives 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
„mobile first“ meint jetzt was genau?
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
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.
„mobile first“ bedeutet dann nicht:
Titel (groß)
Men
u
Teaser (extern)
Footer
Teaser (intern)
Muss weg bei Tablet und Phone
Titel (klein)
Muss weg bei Desktop
Muss weg bei Phone
Muss weg bei Desktop
Muss weg bei Tablet und Phone
Muss weg bei TV
Denn, zu viel HTML (Struktur) und CSS (Design) = viel zu schwer, viel zu langsam und zu viel Stromverbrauch !!!
Text
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
Das alte Desktop-Design
„mobile first“ verlangt Dynamik
Titel (groß)
Men
u
Teaser (extern)
Footer
Teaser (intern)
Die einzelnen Bauteile werden nach Bedarf mit Javascript nachgeladen, bzw. dynamisch umgewandelt
Text Titel
Text
Titel (normal)
Men
u
Footer
Text
Titel (klein)
Footer
Text
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
Desktop
Tablet
Phone
„mobile first“ bedeutet für Webangebote somit ….
Struktur Design
Hypertext Markup Language Cascading Style Sheets
Logik
Daten
Extended Markup Language
Daten
JavaScript Object Notation
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
Und was ist eine „mobile APP “ ???
Programmierung
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
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.
3 Eigentlich hat es auch nichts mit Internet zu tun.
a Es sei denn, es greift auf die Daten eines Internet-Dienstes zu, etwa über einen Mail-, Web- oder andere Server
b Es sei denn, es ist eigentlich nur ein native Rahmen um eine Webanwendung - Hybride App
Java ist nicht Javascript
Was ist eine „Hybride APP “ ???
Native App
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
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.
WebClient
Struktur Design
Hypertext Markup Language Cascading Style Sheets
Logik Daten
JavaScript Object Notation
World Wide Web
Android System WebView 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.
WebApps der ersten Generation
Was ist eine „Webbasierende APP “ ???
Native App
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
Eine webbasierende App ist eine App in native Code, die Daten aus dem Web bezieht, bzw Daten in das Web sendet.
World Wide Web
Immer mehr Apps verlangten die Berechtigung „Internet-Zugriff“
Eingabe
Verarbeitung
Ausgabe
Daten
DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA DATA …
Was ist eine „Launcher APP “ ???
Native App
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
Macht nichts anders als eine Internetadresse (URL) an einen Browser auf dem Endgerät zu übergeben.
World Wide Web
Viele Apps sind irgendwie native, aber eigentlich eher nur ein „Link“ zu einer Website
edge Microsoft
firefox Mozilla
safari Apple
Chrome Google
URL Teilen
Die Touchicons
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
Wie bei einer native App sind die Touchicons (in den verschiedensten Größen) auch bei einer hybriden App innerhalb der App deklariert.
Native Code
WebView Objekt
HTML5
App
Mit nur einem Klick bin ich da !
HTML5
Die Touchicons
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
Bei einer echten WebApp werden die Icons in der Webseite definiert.
WebApp
Mit nur einem Klick bin ich da !
HTML5
Die Touchicons in der Webseite
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
Für den Safari-Browser bot Apple ab 2016 die apple-touch-icon-Deklaration an:
<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“
>
Wird eine solche Webseite im iPhone oder im iPad geöffnet, erlaubt Safari, das Icon direkt
auf den Home-Screen zu legen.
add-to-screen
180x180
167x167
152x152
Die Touchicons in der Webseite
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
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.
6 Es ist kinderleicht. Auch Kinder können die Touch-Icons ihrer Lieblingsseiten auf ihr Handy „installieren“ und „deinstallieren“.
5 Die Installation ist kostenlos.
WebApps Beispiele
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
NASA Facebook Google Maps Twitter
Pinterest Starbucks Welt.de Angela Merkel
WebApps Beispiele für Kinder
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
WAS IST WAS Liliane Susewind Wendy Bibi Blocksberg
Bibi&Tina SWR Kindernetz Legakids Blinde Kuh
Mehrere WebApps von einem Anbieter
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
Suchmaschine Zufallsgenerator Videos Nachrichten Links
www.blinde-kuh.de
Progressive WebApp – Das Manifest
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
2017 legen beim W3C Google, Mozilla, Microsoft und Apple Standards für das Manifest vor
<link rel="manifest" href="./pwa-manifest.json" type="application/manifest+json" >
HTML
Manifest
Blinde Kuh - Suchmaschine
1 Touch-Icons
2 Name
3 Internet-Adresse
https://www.blinde-kuh.de/pwa/
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" }
Progressive WebApp – Das Manifest
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
Das Format des PWA-Manifestes ist JSON (JavaScript Object Notation)
nur gucken, nicht auswendig lernen
Normale WebApp – Kein Internet
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
Wenn es keinen Internetanschluß gibt, wird im Browser eine Fehlerseite gezeigt.
Internet An Internet Aus
Sieht irgendwie
ein bisschen doof aus
Progressive WebApp – Die Offlinevariante
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
Bei einer PWA gibt es eine Offline-Seite, die dann aktiv wird, wenn kein Internetzugriff besteht
Internet An Internet Aus
CACHE
ServiceWorker(In) in JavaScript
Webserver
Progressive WebApp – Mit Sicherheit
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
Vor allem Google forciert das Thema, dass Anbieter von HTTP aus HTTPS umstellen sollen
HTTP Hypertext Transfer Protocol
HTTPs Hypertext
Transfer Protocol
Secure
unsicher, weil Daten werden klar übertragen
„sicher“, weil Daten werden
verschlüsselt
Progressive WebApp – Zusammenfassung
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
Progressive WebApp – Install-Banner
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
Browser wie Chrome zeigen bei einer progressiven WebApp eine Installationsaufforderung
Installierte WebApp Webseite Install-Banner
Progressive WebApp – WebAPK
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
Der Chrome-Browser kann auf Android-Gräten eine APP generieren
Native App Webseite
APK
Google Chrome
Gepackte APP
öffnen
erzeugen
entpacken
Progressive WebApp versus Native, Hybride App
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
Die Vorteile:
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.
6 Die progressive WebApp ist auch auf einem Windows PC installierbar.
7 Die progressive WebApp ist durch die Webseite suchmaschinenoptimiert.
1 Es ist keine Installation über einen App-Store notwendig.
Eine kleine Statistik am Endeh
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
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%
Richtungsvorgaben scheitern im Alltag
Zurück in die Zukunft - Progressive WebApps in der Kinderseitenlandschaft
Der Mobilmarkt hat sich nahezu unberechenbar weiterentwickelt und wird dies weiter tun.