Firefox OS Apps sind Web-Apps, die in HTML, CSS und JavaScript geschrieben sind. Die App wird im Internet publiziert, wie Sie es mit jeder anderen Website auch tun. Um die Website als installierbare Web-App auf dem Gerät zu erstellen, müssen Sie die App mit einem manifest und einem hock up, einem Installations-Button, wie nachfolgend erläutert, versehen.
Die folgenden Themen können als Ausgangspunkt genutzt werden:
Natürlich können Sie auch tiefer in die Technologie von Web-Apps eintauchen.
Die Web-App installieren
Mit der App und dem manifest im Internet, müssen Sie es Gecko bekannt machen. Während der Installationsphase schaut Gecko nach dem manifest und fügt die wichtigsten Einträge dem HomeScreen u.a. hinzu.
Um die App zu installieren, müssen sie die navigator.mozApps.install API aufrufen. Hier finden Sie ein Beispiel für einen Installations-Button, den Sie in ihre App einbinden können, wenn Sie sie selbst hosten.
<button id="install">
Installieren Sie diese App auf Ihrem HomeScreen!
</button>
<script>
(function(){
function install(ev) {
ev.preventDefault();
// Definierung der Manifest URL
var manifest_url = "https://my.webapp.com/manifest.webapp";
// App installieren
var myapp = navigator.mozApps.install(manifest_url);
myapp.onsuccess = function(data) {
// App ist installiert, Entfernen-Button
this.parentNode.removeChild(this);
};
myapp.onerror = function() {
// App war noch nicht installiert, Info ist in this.error.name definiert
console.log('Es ist ein Fehler bei der Installation aufgetreten., error: ' + this.error.name);
};
};
// Ein Verweis auf den Button und Aufruf von install() beim betätigen.
var button = document.getElementById('install');
button.addEventListener('click', install, false);
})();
</script>
Tipp: DenInstallations-Button können Sie auch in App-Stores, wie zum Beispiel dem Firefox Marketplace, einbinden, aber es ist oft sehr praktisch den Installations-Button auf der Startseite des Projekts zu haben.
Nun besuchen Sie Ihre Website mit der Firefox OS Browser App und benutzen Sie den Installations-Button.