HTML5 und JavaScript: So erstellst du mobile Web-Apps

Mobile Web-Apps müssen nicht immer nativ programmiert werden. Auch mit HTML5 und den damit eingeführten JavaScript-APIs entwickelst du mobile Web-Apps, die bezüglich der Funktionalität den nativ programmierten Apps in (fast) nichts nachstehen. Dazu kommt, dass native 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 unverzichtbaren Bestandteil geworden. Wer jedoch selbst mobile Apps anbieten möchte, wird schnell feststellen, dass dies mit einigen Hürden und nicht wenig Aufwand verbunden ist. Zunächst einmal müssen native Apps für jede Plattform – unter anderem iOS und Android – eigenständig entwickelt werden. Die sogenannten Hybrid-Apps, die auf mehreren Plattformen laufen, stellen hingegen nur eine Art Container dar, der in HTML und JavaScript programmierte Webanwendungen enthält.

Googles Play Store
Googles Play Store

Ein weiterer Nachteil nativer Apps ist, dass diese nur über den jeweiligen App-Store installiert werden können. Das führt im Play Store von Google zu einmaligen Registrierungskosten und bei Apple zu regelmäßigen Kosten. Zwar ist es auf Androidgeräten möglich, Apps auch ohne Store zu installieren. Dazu müssen jedoch in den Geräteeinstellungen explizit App-Installationen aus „unbekannten“ Quellen zugelassen werden.

Bei Webanwendungen bestehen all diese Probleme nicht. Sie werden in HTML5 und JavaScript programmiert und sind somit unabhängig von Betriebssystemen und Stores.

Geräteorientierung und Standortbestimmung

Viele Apps nutzen die speziellen Gerätefunktionen, mit denen Smartphones und Tablets ausgestattet sind. Dazu gehört das Gyroskop, welches die Drehung eines Gerätes um die eigene Achse erkennt und so beispielsweise feststellt, ob ein Gerät im Portrait- oder Landscape-Modus gehalten 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 werden über das Ereignis „deviceorientation“ drei Winkel ausgegeben, welche die aktuelle Drehung des Gerätes darstellen.

Ebenfalls häufig verwendet ist die Standortbestimmung per GPS. Neben Navigationsanwendungen sind es vor allem Apps sozialer Netzwerke, die gerne auf den jeweiligen Standort des Nutzers zugreifen. Auch dies ist per JavaScript möglich.

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

Im Beispiel werden per „geolocation“ die Koordinaten des Längen- und Breitengrades ausgegeben. So lässt sich die jeweilige GPS-Position ermitteln.

Offline-Speichern per Application Cache

Native Apps haben gerade auf mobilen Geräten den Vorteil, dass sie einmal heruntergeladen werden und dann auch ohne Internetverbindung zur Verfügung stehen. Aber auch dies ist kein Grund, zwingend auf eine native App zu setzen. Denn der Application Cache von HTML5 erlaubt es ebenfalls, Dateien einer Webanwendung dauerhaft auf einem Gerät zu speichern.

Dazu wird im HTML-Element eine sogenannte Manifest-Datei referenziert, über die definiert ist, welche Dateien beim erstmaligen Laden der Seite auf dem Gerät gespeichert werden sollen.

<html manifest="example.appcache">

Die Manifest-Datei enthält dann aufgelistet alle Dateien der Website, die offline verfügbar gemacht werden.

CACHE MANIFEST
index.html
stylesheet.css
logo.png

Im Beispiel werden drei Dateien heruntergeladen und anschließend immer aus dem Application Cache geladen statt aus dem Internet.

Gestensteuerung

Während auf Desktopgeräten die Maus regiert, sind es auf Smartphones und Tablets die Finger. Neben einfachen Taps, die weitestgehend den Mausklick ersetzen, sind mit den Fingern auch sogenannte Gesten möglich. Am bekanntesten dürfte die Wischgeste stein, mit der beispielsweise Menüs ein- und ausgeblendet werden oder durch eine Bildergalerie geblättert wird.

Auch diese Funktionalität lässt sich per JavaScript realisieren. Hierzu gibt es verschiedene „touch“-Ereignisse, welche ähnlich funktionieren wie die „mouse“-Ereignisse. So stehen dir „touchstart“, „touchmove“ und „touchend“ zur Verfügung, mit denen die Position eines Fingers auf dem Display wiedergegeben wird. Dabei können mit den „touch“-Ereignissen auch mehrere gleichzeitig platzierte Finger registriert werden.

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

Über „changedTouches“ werden alle Berührungen auf dem Display als Array gespeichert. Im Beispiel werden die Koordinaten der jeweils ersten Berührung wiedergegeben.

Kamerazugriff

Noch relativ neu ist die Möglichkeit, auf Kameras per „getUserMedia()“ zuzugreifen. Hierzu wird zunächst ein leeres „<video>“-Element mit eingeschaltetem Autoplay platziert.

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

Anschließend wird per „getUserMedia()“ das Kamerabild dort hinein platziert.

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

„getUserMedia()“ erwartet drei Parameter. Zunächst definierst du, ob Video- und Audioinhalt übertragen werden sollen. Anschließend wird eine Funktion erwartet, die den Stream verarbeitet und im Beispiel dem „<video>“-Element übergibt. Als letztes muss noch eine Callback-Funktion her, die im Falle eines Fehlers aufgerufen wird.

Derzeit muss „getUserMedia()“ noch mit Vendor-Prefix – zum Beispiel „webkitGetUserMedia()“ – ausgezeichnet werden.

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

Im mobilen Chrome gibt es die Funktion „Zum Startbildschirm hinzufügen“. Hierbei wird ein Lesezeichen nicht im Browser, sondern auf dem Startbildschirm platziert. Über eine Manifest-Datei hast du die Möglichkeit, einen vom Seitentitel abweichenden Namen und ein eigenes Icon definieren.

Chrome und die Funktion „Zum Startbildschirm hinzufügen“
Chrome und die Funktion „Zum Startbildschirm hinzufügen“

Dazu muss die Manifest-Datei zunächst im HTML-Kopf definiert sein.

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

Anschließend wird in dieser Datei im JSON-Format festgelegt, wie das Lesezeichen auf dem Startbildschirm dargestellt werden soll.

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

Im Beispiel werden per „name“ die Bezeichnung des Lesezeichens und per „icons“ eine Reihe von Dateien definiert, die Icons in unterschiedlichen Auflösungen und Pixeldichten referenzieren.

Auch das Verhalten der Anwendung, wenn sie über den Startbildschirm geöffnet wird, lässt sich festlegen.

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

Per „display“ wird eine Website zu einer Standalone-Anwendung. Hierbei werden Adressleiste und Menü des Browser ausgeblendet und die Website im Vollbild dargestellt. Per „orientation“ kannst du Portrait- oder Landscape-Modus vorgeben.

Fazit

Dank des Web-Application-Manifestes unterscheiden sich einmal auf dem Startbildschirm abgelegte, mobile Web-Apps kaum noch von nativen Apps. Mit Hilfe der zahlreichen JavaScript-APIs ist es zudem möglich, nahezu alle Features von Smartphones und Tablets zu nutzen, die auch native Apps nutzen können.

(dpe)

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.

Sortiert nach:   neueste | älteste | beste Bewertung
Gerold M.
Gast

Seit langem endlich mal wieder ein interessanter, lesenswerter Beitrag und mal nicht dieses dumme WordPress-Geschwafel. Danke dafür!

wpDiscuz