Browser-App für Firefox OS erstellen – so geht‘s
Kommentare

Langsam aber sicher etabliert sich Firefox OS als Plattform für Mobile Devices. Zwar stellt das auf der Firefox-Web-Browser-Engine erstellte Betriebssystem bereits einen funktionierenden Browser zur Verfügung, allerdings lässt sich mithilfe des Browser-APIs leicht ein eigener Browser erstellen oder Browser-Funktionalität zu einer App hinzufügen. Yi-Fan Liao erklärt im Mozilla-Entwickler-Blog, wie man eine simple Browser-App für Firefox-OS-Devices erstellt.

WebIDE ist die Basis der Browser-App für Firefox OS

Grundsätzlich stellt eine Browser-App unter Firefox OS ein mit HTML5-Technologie erstelltes User Interface zur Verfügung und managet das Browsen von Websites durch den Einsatz des Browser-APIs. Um eine Browser-App unter Firefox OS zu erstellen, benötigt man zunächst die WebIDE, die ab Firefox 34 zur Verfügung steht. Damit kann leicht eine Web-App gebootstrapt, HTML-, CSS- und JavaScript-Modifikationen vorgenommen und die App in einem Firefox-OS-Simulator ausgeführt werden.

Zunächst wird die App mit einem leeren WebIDE-Template erstellt, bevor Code-Änderungen – insbesondere die browser-Erlaubnis – in der manifest.webapp-Datei vorgenommen werden. Die Browser-App erhält eine Toolbar mit simplen Steuerelementen sowie einem Suchfeld. Zusätzlich wird ein iframe-Container eingefügt, in dem die Handhabung der mozbrowser-Events mithilfe von JavaScript definiert wird. Anschließend kann einer der Firefox-OS-Simulatoren genutzt werden, um die Browser-App zu testen.

Wie man für die Erstellung der einzelnen Elemente im Detail vorgehen sollte, erklärt Yi-Fan Liao ausführlicher und mit Code-Beispielen in seinem Artikel. Allerdings muss die Funktionalität des so erstellten Firefox-OS-Browsers nicht hier enden. Es gibt verschiedene Möglichkeiten, um ihn mit weiteren Funktionalitäten zu versehen, etwa Lesezeichen, Suchvorschlägen oder Sharing-Optionen. Wer sich daran ausprobieren möchte, hat die Möglichkeit, den Code von GitHub herunterzuladen.

Aufmacherbild: a light bulb drawn in a sticky note symbolizing concept idea von Shutterstock / Urheberrecht: nito

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -