Web Apps sind Apps, die mit Standard Web Technologien gebaut werden. Sie funktioneren in jedem modernen Browser und du kannst sie mit deinen bevozugten Tools entwickeln. Einige Eigenschaften, die Web Apps von Websites unterscheiden: Der User installiert Apps, sie sind in sich geschlossen, benötigen nicht unbedingt einen Browser und arbeiten auch offline. Gmail, Twitter, und Etherpad sind Web Apps.
Das Mozilla Open Web Apps-Projekt beruht auf einigen kleinen Ergänzungen für bestehende Websites. Diese Ergänzungen verwandeln die Websites in Apps, welche in einer ergiebigen, interessanten und kraftvollen Computing Umgebung laufen. Diese Apps funktionieren auf in Desktop Browsern und mobilen Geräten, und sie sind für die User einfacher zu Entdecken und Starten als Websites. Sie haben Zugang zu einer wachsenden Anzahl neuartiger Funktionen, wie zum Beispiel die Synchronisierung aller Geräte des Users.
Vor dem Start
Wenn du ein Einsteiger bist und Web Apps entwickeln möchtest, solltest du dich zuerst über den aktuellen Implementierungsstatus der API informieren.
Eine App publizieren
Um aus einer Website eine Web App zu erstellen, musst du nur eines tun: ein app manifest hinzufügen. Das ist eine JSON-Datei, die deine App inklusive Name, Icons und einer für Menschen lesbaren Beschreibung vorstellt.
Das manifest muss auf der gleichen Domain gehostet sein wie die Website und verlangt nach einem Content-Type von application/x-web-app-manifest+json (Hinweis: Dies wird im Moment von Firefox nicht zwingend verlangt, ist aber nötig für den Firefox OS Marketplace). Die kompletten Informationen zum manifest findest du in der documentation. Es gibt Tools, die dein mainfest validieren, siehe Validieren eines Manifests.
Grundsatz der selben Herkunft
Es ist wichtig anzumerken, dass jede App von einer eigenen Domain gehostet werden sollte. Verschiedene Apps sollte nicht von derselben Domain gehostet werden. Eine akzeptable Lösung ist das Hosten unterschiedlicher Apps mit unterschiedlichen Subdomains. Konsultiere das FAQ zu app manifests für mehr Informationen zum Thema Hosting.
Überprüfen, ob eine App installiert ist
Wenn ein Webbrowser die Seite einer App lädt, muss die Seite für den Fall vorbereitet sein, dass der User die App nicht installiert hat. Durch das Aufrufen von getSelf()kann dies einfach überprüft werden, zum Beispiel so:
var request = navigator.mozApps.getSelf();
request.onsuccess = function() {
if (request.result) {
// we're installed
} else {
// not installed
}
};
request.onerror = function() {
alert('Error checking installation status: ' + this.error.message);
};
Die App installieren
Du kannst deine App direkt von deiner Site publizieren. Es ist zudem eine gute Idee, die Installation zu Testen. So stellst du sicher, dass das manifest valide ist, bevor die App in den Firefox OS Marketplace gestellt wird.
Kreiere einfach einen Button oder Link, der folgendes Javascript ausführt:
var request = navigator.mozApps.install("https://path.to/my/example.webapp");
request.onsuccess = function() {
// great - display a message, or redirect to a launch page
};
request.onerror = function() {
// whoops - this.error.name has details
};
navigator.mozApps.install() bringt den Browser dazu, das manifest zu laden (z.B. example.webapp) und fragt den User, ob er die App installieren möchte. Wenn der User der Installatin zustimmt, wird die App in den Browser installiert. In OS X erfolgt die Installation in den "Programme" -Ordner.
Der zweite Paramenter ist ein install_data Argument zu navigator.mozApps.install(), um einige Informationen im Data Store der Applikationen des Users zu speichern. Diese Informationen können mit anderen Geräten synchronisiert und von deiner App mittels getSelf() abgerufen werden (siehe Überprüfen, ob eine App installiert ist). Zum Beispiel:
navigator.mozApps.install(
"https://path.to/my/example.webapp",
{
user_id: "some_user"
}
);
Die App bekannt machen
Mozilla baut einen Marktplatz für Apps zum Entdecken, Testen, Bewerten und Verkaufen von Apps. Dazu wird eine offene Infrastruktur genutzt, die es Drittherstellern erlaubt, eigene Stores zu eröffnen. Es ist allerdings nicht zwingend, seine App über den Marktplatz bereitzustellen.
Wenn du deine App verkaufen möchtest, beachte bitte Marketplace Zahlungen.
Der Firefox OS-Marketplace sollte in naher Zukunft verfügbar sein. Du kannst dich zudem für den sign up for the Apps Developer newsletter eintragen, um Neuigkeiten zum FireFox OS-Marketplace zu erhalten sowie Tipps und Rat zum Entwickeln von Apps.
Offline-Betrieb und fortgeschrittene APIs
Moderne Webbrowser verfügen eine Menge grossartiger Features, um Applikationen offline arbeiten zu lassen und auf Funktionen des Geräts zuzugreifen. Hier sind einige nützliche Links:
- Offline-Betrieb: Details und Demos zum HTML5 AppCache
- Online und Offline Events: Feststellen, wann ein Gerät On- und Offline ist
- Audio und Video nutzen in deiner App
- Grafiken Zeichnen mit Canvas
- 3D-Grafiken mit WebGL
- Content-Editable nutzen zum Kreieren von umfassenden und schnellen Editoren in deinen Apps
- Dateien von Web Applikationen nutzen mit der HTML5 File API
- Drag and Drop nutzen zum Verschieben von Objekten zwischen und innerhalb von Web Applikationen
- Ausrichtung des Geräts feststellen
Daten lokal speichern
Die localStorage-API nutzt ein Schlüssel-Wert-Speicher zum Sichern von User-Daten zwischen zwei Sitzungen mit der App. Sofern der User einen modernen Browser wie Firefox 4 oder besser sowie Google Chrome nutzt, kannst du zudem IndexedDB nutzen, eine strukturierte, hoch performante Datenbank im Browser.
Wenn du Daten hast, die zwischen verschiedenen Instanzen der App und über alle Geräte des Users geteilt werden müssen, solltest du den install_data Parameter zur install() Funktion hinzufügen, wie weiter oben beschrieben.
Beispiele
Einige Beispiele offener Web Apps:
- MozillaBall Beispiel (nutzt den Canvas zum Zeichnen von Grafiken und die JavaScript API zum Installieren der App)