Was ist eine Web-App?
Wikipedia über (mobile) Web Apps
Web-Apps sind für mobile Internetnutzer über den vorinstallierten mobilen Browser aufruf- und installierbar. Sie verhalten sich wie mobile Webseiten, verwenden jedoch modernste Programmiertechniken wie AJAX und bieten dadurch ähnliche Funktionen und Eigenschaften an wie native Apps, die fest installiert sind.
Was kann eine WebApp? (1 / 13)
Video & Audio
- Benutzerdefinierte Steuerelemente
- MP4, WebM, OGG
- Mit Lösungen wie videojs "nachrüstbar"
Support: Bis auf Opera Mini alle aktuellen ab IE 9, jedoch nicht jedes Format.
Was kann eine WebApp? (2 / 13)
Webstorage. Einfacher Key-Value Store
- Local oder Session based
- Ähnlich Cookie aber mehr Platz (5-25 MB)
Support: Bis auf Opera Mini alle ab IE 8
Was kann eine WebApp (3 / 13)
WebSQL. SQL Datenbank.
- SQL Abfragen möglich
- größere Datenmengen möglich (meist mit Userprompt)
- Auch für komplexere Daten geeignet
Support: Alle bis auf IE, FF, Opera Mini
Was kann eine WebApp (4 / 13)
IndexedDB.
- NoSQL Datenbank für größere Datenmengen
- Blobs/Arrays/Objekte
Support: Alle bis auf Safari, Android-Browser, Opera Mini
Was kann eine WebApp? (5 / 13)
2D-Canvas.
- Grafiken
- Animationen
- Transformationen
- Zeichnen
- Spieletauglich
- teils Hardwarebeschleunigt
Support: Alle gängigen Browser ab IE 9
Was kann eine WebApp? (6 / 13)
WebGL
- 3D Grafiken auf Basis von WebGL
- teils Hardwarebeschleunigt
- Eigene Shader möglich
- hervorragend für Spiele geeignet
Support: Ab IE 11 + alle gängigen
Auf mobile leider noch sehr eingeschränkt.
Was kann eine WebApp? (7 / 13)
Kamera/Video-/Audiocapture
- via getUserMedia
- Zugriff auf Alben möglich
- Bilddaten via JS analysierbar/nachbearbeitbar
Support: aktuelle Android, IOS, Chrome, FF, Safari
Was kann eine WebApp? (8 / 13)
Weiches Touch-Scroll Verhalten
- via -webkit-overflow-scrolling: touch;
- hardwarebeschleunigtes Scrollen
- Scrollverhalten wie vom OS gewohnt.
Support: IOS, Chrome Mobile
Was kann eine WebApp (10 / 13)
3D Positionierung von DOM Elementen
- teils hardwarebeschleunigt
- via 3D Transition
- für Übergangseffekte
Support: Alle gängigen Browser bis auf Opera Mini
Was kann eine Web-App (11 / 13)
File API
- Weiterverarbeiten / auslesen von Dateien
- Drag & Drop von Dateien in die WebApp
- Mehrere Dateien gleichzeitig
Support: alle gängigen bis auf Opera Mobile und IE Mobile
Was kann eine Web-App (12 / 13)
Geo-Lokalisierung
- Auslesen der geographischen Position des Gerätes
Support: Alle gängigen ab IE 8 (bis auf Opera Mini)
Was kann eine Web-App? (13 / 13)
Accelerometer
- Zugriff auf Beschleunigungssensoren
- via orientation-change event
- x,y,z Beschleunigung
Support: IOS, Chrome, FF
Feature Detection
Modernizr!
- Erkennt vorhandene Features
- CSS Klassen für Features
- JS Objekt mit Features
- Script-Loader für das Nachladen von Polyfills
Einsatzgebiete reine Web-Apps
"Für alles was möglich ist"
- Diverse Gadget-Apps
- (Einfache) Spiele
- Shop-Software / Kataloge
- Info-Apps
- Portal-Apps (News, ...)
Einsatzgebiete Hybrid-Apps
Folgende Anforderungen wären ein Grund für Hybrid-Apps:
- Verwendung/Verkauf in den Stores
- Höhere Performance
- Zusätzliche Device-Features außerhalb von HTML5
- Benutzer sollen Gefühl einer "echten" App haben
Einsatzgebiete Native Apps
Um native Apps kommt man in folgenden Fällen trotzdem nicht herum:
- Noch mehr Performance nötig
- Zugriff auf spezielle Features des Phone nötig
- App als Hintergrundservice
- App als OS-Plugin (z.B. Livewallpaper)
Oft reicht es aber auch den geforderten Teil als natives Plugin mit einer Hybrid-App zu verheiraten.
Überblick: Apps (1 / 2)
Von niedrig bis hoch:
Features, Performance, Komplexität, Kosten?
Überblick Apps (2 / 2)
...Von niedrig bis hoch:
Features, Performance, Komplexität, Kosten?
Komplexität und Kosten einer App haben nichts mit der verwendeten Technologie zu tun!
Ausnahme: Native muss (meist) für jede Plattform einzeln programmiert werden. Web- und HybridApps sind relativ plattformunabhängig.
Überblick Hybrid-/WebApp-Frameworks
Überblick über viele Frameworks inklusive Beispielcode:
http://propertycross.com
Phonegap
- Entstanden 2009
- 2011 von Adobe Systems aufgekauft
- Apple approved
- Seit 2012 Cloud-Build Service
- Nutzt/basiert auf Apache Cordova (OpenSource)
Unterstützt nahezu alle mobilen Plattformen (Android, IOS, Windows, BlackBerry, ...)
Ludei: CocoonJS
Nicht ganz so bekannt, aber rockt!
- Beschleunigter Canvas + WebGL Support!
- Integrierter Support für Game Engines.
Intel's App Framework / Intel XDK
Wie Phonegap basierend auf Cordova, mit eigenem Cloud-Build, Debugger und Emulator.
Zusätzliche Features:
- Facebook Login Button
- Multitouch auf Android
- OAuth
- Erweiterete Audio Features
- Beschleunigter (2D) Canvas
Echtes App-Feeling?
Features ok... Damit sich die App wirklich "echt" anfühlt, muss sie das Verhalten und Aussehen der nativen Apps möglichst gut nachahmen.
Mögliche Antworten:
- Frameworks
JQuery Mobile, Sencha Touch, ...
-
Responsive Design
15:45 im großen Saal
JQuery Mobile
HTML5 basiertes UI-Framework auf Basis von JQuery und JQuery UI.
- Einheitlicher Cross-Plattform-Look
- Einfach erweiterbar
Sencha Touch
Umfassendes UI Framework.
- Native Look
- Eigenes Build-Tool oder via Cordova
Phonegap im Detail: Features
- Accelerometer
- Camera
- File
- Geolocation
- Media
- Network
- Storage
-
Notifications (alert, sound, vibration)
-
Events
-
Contacts
-
Compass
+ Kontrolle über den Browser + Buttons (je nach OS)
API-Beispiel-Code
Zugriff auf die Kamera:
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.DATA_URL
});
function onSuccess(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
}
function onFail(message) {
alert('Failed because: ' + message);
}
API-Beispiel-Code
Anlegen eines neuen Kontaktes im Adressbuch:
var myContact = navigator.contacts.create({"displayName": "Test User"});
myContact.note = "This contact has a note.";
Reagieren auf Events wie "Critical Battery status":
window.addEventListener("batterycritical", alert("Please recharge!"), false);
Phonegap: Cloud-Service und Build
Via Phonegap Cloud build direkt aus dem Web. Keine SDK Installation nötig.
- Eigene Dev-Keys hinzufügbar
- Code wird direkt von Github aktualisiert
- Mehrbenutzerfähig
Phonegap: Lokaler Build
Alternativ zum Cloud-Build auch klassisch via Commandozeile möglich:
- SDKs müssen installiert sein!
- Selbst zertifizieren mit XCode / Android Keytool Utility
Browser-Testing (Ripple)
Ripple-Emulator (Chrome Extension, Apache Incubator)
- Zum Testen von Phonegap, Blackberry, im Browser...
- Emuliert Device-Features
- Debugging direkt im Browser
Alle Tests erfolgreich?
Ab in den Store! Einfach die fertig signierte Datei an den jeweiligen Store zur Überprüfung einreichen.
Nicht vergessen: Store-Richtlinien beachten (Apple!)