Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 5. August 2016

HTML5 und JavaScript: So erstellst du mobile Web-Apps

mobile Web-Apps

Mobile Web-Apps müs­sen nicht immer nativ pro­gram­miert wer­den. Auch mit HTML5 und den damit ein­ge­führ­ten JavaScript-APIs ent­wi­ckelst du mobi­le Web-Apps, die bezüg­lich der Funktionalität den nativ pro­gram­mier­ten Apps in (fast) nichts nach­ste­hen. Dazu kommt, dass nati­ve Anwendungen auch ihre Nachteile haben, die du mit HTML5 nicht hast.

mobile Web-Apps

Kein Store-Zwang, keine unterschiedlichen Plattformen

Apps sind auf Smartphones und Tablets zu einem unver­zicht­ba­ren Bestandteil gewor­den. Wer jedoch selbst mobi­le Apps anbie­ten möch­te, wird schnell fest­stel­len, dass dies mit eini­gen Hürden und nicht wenig Aufwand ver­bun­den ist. Zunächst ein­mal müs­sen nati­ve Apps für jede Plattform – unter ande­rem iOS und Android – eigen­stän­dig ent­wi­ckelt wer­den. Die soge­nann­ten Hybrid-Apps, die auf meh­re­ren Plattformen lau­fen, stel­len hin­ge­gen nur eine Art Container dar, der in HTML und JavaScript pro­gram­mier­te Webanwendungen ent­hält.

Googles Play Store

Googles Play Store

Ein wei­te­rer Nachteil nati­ver Apps ist, dass die­se nur über den jewei­li­gen App-Store instal­liert wer­den kön­nen. Das führt im Play Store von Google zu ein­ma­li­gen Registrierungskosten und bei Apple zu regel­mä­ßi­gen Kosten. Zwar ist es auf Androidgeräten mög­lich, Apps auch ohne Store zu instal­lie­ren. Dazu müs­sen jedoch in den Geräteeinstellungen expli­zit App-Installationen aus “unbe­kann­ten” Quellen zuge­las­sen wer­den.

Bei Webanwendungen bestehen all die­se Probleme nicht. Sie wer­den in HTML5 und JavaScript pro­gram­miert und sind somit unab­hän­gig von Betriebssystemen und Stores.

Geräteorientierung und Standortbestimmung

Viele Apps nut­zen die spe­zi­el­len Gerätefunktionen, mit denen Smartphones und Tablets aus­ge­stat­tet sind. Dazu gehört das Gyroskop, wel­ches die Drehung eines Gerätes um die eige­ne Achse erkennt und so bei­spiels­wei­se fest­stellt, ob ein Gerät im Portrait- oder Landscape-Modus gehal­ten wird. Das geht auch mit JavaScript.

window.addEventListener("deviceorientation", function() {
 console.log(e.alpha);
 console.log(e.beta);
 console.log(e.gamma);
}, true);

Im Beispiel wer­den über das Ereignis „device­ori­en­ta­ti­on“ drei Winkel aus­ge­ge­ben, wel­che die aktu­el­le Drehung des Gerätes dar­stel­len.

Ebenfalls häu­fig ver­wen­det ist die Standortbestimmung per GPS. Neben Navigationsanwendungen sind es vor allem Apps sozia­ler Netzwerke, die ger­ne auf den jewei­li­gen Standort des Nutzers zugrei­fen. Auch dies ist per JavaScript mög­lich.

navigator.geolocation.getCurrentPosition(function(position) {
 console.log(position.coords.latitude, position.coords.longitude);
});

Im Beispiel wer­den per „geo­lo­ca­ti­on“ die Koordinaten des Längen- und Breitengrades aus­ge­ge­ben. So lässt sich die jewei­li­ge GPS-Position ermit­teln.

Offline-Speichern per Application Cache

Native Apps haben gera­de auf mobi­len Geräten den Vorteil, dass sie ein­mal her­un­ter­ge­la­den wer­den und dann auch ohne Internetverbindung zur Verfügung ste­hen. Aber auch dies ist kein Grund, zwin­gend auf eine nati­ve App zu set­zen. Denn der Application Cache von HTML5 erlaubt es eben­falls, Dateien einer Webanwendung dau­er­haft auf einem Gerät zu spei­chern.

Dazu wird im HTML-Element eine soge­nann­te Manifest-Datei refe­ren­ziert, über die defi­niert ist, wel­che Dateien beim erst­ma­li­gen Laden der Seite auf dem Gerät gespei­chert wer­den sol­len.

<html manifest="example.appcache">

Die Manifest-Datei ent­hält dann auf­ge­lis­tet alle Dateien der Website, die off­line ver­füg­bar gemacht wer­den.

CACHE MANIFEST
index.html
stylesheet.css
logo.png

Im Beispiel wer­den drei Dateien her­un­ter­ge­la­den und anschlie­ßend immer aus dem Application Cache gela­den statt aus dem Internet.

Gestensteuerung

Während auf Desktopgeräten die Maus regiert, sind es auf Smartphones und Tablets die Finger. Neben ein­fa­chen Taps, die wei­test­ge­hend den Mausklick erset­zen, sind mit den Fingern auch soge­nann­te Gesten mög­lich. Am bekann­tes­ten dürf­te die Wischgeste stein, mit der bei­spiels­wei­se Menüs ein- und aus­ge­blen­det wer­den oder durch eine Bildergalerie geblät­tert wird.

Auch die­se Funktionalität lässt sich per JavaScript rea­li­sie­ren. Hierzu gibt es ver­schie­de­ne „touch“-Ereignisse, wel­che ähn­lich funk­tio­nie­ren wie die „mouse“-Ereignisse. So ste­hen dir „touch­start“, „touch­mo­ve“ und „tou­chend“ zur Verfügung, mit denen die Position eines Fingers auf dem Display wie­der­ge­ge­ben wird. Dabei kön­nen mit den „touch“-Ereignissen auch meh­re­re gleich­zei­tig plat­zier­te Finger regis­triert wer­den.

document.getElementsByTagName("body")[0].addEventListener("touchmove", function(e) {
  console.log(e.changedTouches[0].pageX);
  console.log(e.changedTouches[0].pageY);
}, false);

Über „changedTouches“ wer­den alle Berührungen auf dem Display als Array gespei­chert. Im Beispiel wer­den die Koordinaten der jeweils ers­ten Berührung wie­der­ge­ge­ben.

Kamerazugriff

Noch rela­tiv neu ist die Möglichkeit, auf Kameras per „getUserMedia()“ zuzu­grei­fen. Hierzu wird zunächst ein lee­res „<video>“-Element mit ein­ge­schal­te­tem Autoplay plat­ziert.

<video autoplay="autoplay"></video>

Anschließend wird per „getUserMedia()“ das Kamerabild dort hin­ein plat­ziert.

navigator.getUserMedia ({
  audio: true,
  video: true
}, function (stream) {
  document.getElementsByTagName("video")[0].src = window.URL.createObjectURL(stream);
}, function() {
  console.log("Fehler");
});

„getUserMedia()“ erwar­tet drei Parameter. Zunächst defi­nierst du, ob Video- und Audioinhalt über­tra­gen wer­den sol­len. Anschließend wird eine Funktion erwar­tet, die den Stream ver­ar­bei­tet und im Beispiel dem „<video>“-Element über­gibt. Als letz­tes muss noch eine Callback-Funktion her, die im Falle eines Fehlers auf­ge­ru­fen wird.

Derzeit muss „getUserMedia()“ noch mit Vendor-Prefix – zum Beispiel „webkitGetUserMedia()“ – aus­ge­zeich­net wer­den.

Web-Apps mit dem Web-Application-Manifest auf dem Startbildschirm platzieren

Im mobi­len Chrome gibt es die Funktion „Zum Startbildschirm hin­zu­fü­gen“. Hierbei wird ein Lesezeichen nicht im Browser, son­dern auf dem Startbildschirm plat­ziert. Über eine Manifest-Datei hast du die Möglichkeit, einen vom Seitentitel abwei­chen­den Namen und ein eige­nes Icon defi­nie­ren.

Chrome und die Funktion „Zum Startbildschirm hinzufügen“

Chrome und die Funktion „Zum Startbildschirm hin­zu­fü­gen“

Dazu muss die Manifest-Datei zunächst im HTML-Kopf defi­niert sein.

<link rel="manifest" href="manifest.json">

Anschließend wird in die­ser Datei im JSON-Format fest­ge­legt, wie das Lesezeichen auf dem Startbildschirm dar­ge­stellt wer­den soll.

{
  "name": "Demo",
  "icons": [{
    "src": "icon_36x36.png",
    "sizes": "36x36",
    "type": "image/png",
    "density": 1
  }]
}

Im Beispiel wer­den per „name“ die Bezeichnung des Lesezeichens und per „icons“ eine Reihe von Dateien defi­niert, die Icons in unter­schied­li­chen Auflösungen und Pixeldichten refe­ren­zie­ren.

Auch das Verhalten der Anwendung, wenn sie über den Startbildschirm geöff­net wird, lässt sich fest­le­gen.

"display": "standalone",
"orientation": "portrait"

Per „dis­play“ wird eine Website zu einer Standalone-Anwendung. Hierbei wer­den Adressleiste und Menü des Browser aus­ge­blen­det und die Website im Vollbild dar­ge­stellt. Per „ori­en­ta­ti­on“ kannst du Portrait- oder Landscape-Modus vor­ge­ben.

Fazit

Dank des Web-Application-Manifestes unter­schei­den sich ein­mal auf dem Startbildschirm abge­leg­te, mobi­le Web-Apps kaum noch von nati­ven Apps. Mit Hilfe der zahl­rei­chen JavaScript-APIs ist es zudem mög­lich, nahe­zu alle Features von Smartphones und Tablets zu nut­zen, die auch nati­ve Apps nut­zen kön­nen.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Ein Kommentar

  1. Seit lan­gem end­lich mal wie­der ein inter­es­san­ter, lesens­wer­ter Beitrag und mal nicht die­ses dum­me WordPress-Geschwafel. Danke dafür!

Schreibe einen Kommentar zu Gerold M. Antworten abbrechen

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