Schnellstart

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Hier lesen sie eine schnelle Einführung zu installierbaren offenen Web-Apps, die auf Firefox OS oder anderen kompatiblen Systemen laufen. Beginnend mit einem Überblick über die Grundlagen, bis hin zu den Unterschieden zu normalen Standard-Apps/Webseiten, wurden diese Seiten geschrieben, um Entwickler beider Seiten zu unterstützen; die für Internetseiten und die für mobile Endgeräte.

 

A message saying I love the web, along with devices of different screen sizes to represent the modern web's responsive nature.

Offene Web-Apps haben im Vergleich zu Standard-Apps/Webseiten keine grundlegenden Unterschiede. Sie werden mit Technologien erstellt, die den Standards für offene Web-Technologien entsprechen (HTML, CSS, JavaScript usw.) und können mit einem normalen Internet-Browser benutzt werden. Der wichtigste Unterschied liegt darin, dass Apps auf mobilen Geräten installiert und offline verwendet werden können. Dazu können Apps über die erweiterten Schnittstellen (APIs) auf Fähigkeiten des Gerätes zugreifen, wie beispielsweise die Kamera, die Beschleunigungssensoren (Gyroskop) oder das Adressbuch und mit diesen interagieren. Weiterhin kann auf eine breite Entwicklerbasis zurückgegriffen werden, die nicht nur Hilfe bietet, sondern auch die Möglickeit Ihre Apps auf einem marketplace zu veröffentlichen, egal ob Sie diese kostenlos anbieten oder einen Preis dafür angeben.

Die Entwicklung offener Web-Apps hat kaum Einstiegshürden für erfahrene Entwickler von mobilen Endgeräten und Internetseiten. Ebenso bieten sie den Vorteil der plattformübergreifenden Verwendung und sind nicht an ein eingrenzendes System gebunden.

Hinweis: Mozilla's offene Web-Apps sind auf Firefox OS installierbar, ebenso auf Plattfomen, die Firefox und Mozilla's Web run time Technologie unterstützen. Für weitere Informationen besuchen sie Open web apps for Android, und Open web apps for Desktop. In Zukunft sollen die verwendeten Technologien standardisiert werden und auf viele Plattformen verfügbar sein.

Firefox OS

Firefox OS (auch bezeichnet über seinen Codenamen Boot to Gecko — bzw. B2G) ist Mozilla's offenes Betriebsystem für mobile Endgeräte. Es basiert auf einem Linux Kernel, der eine Gecko-basierende Laufzeitumgebung startet, die dem Benutzer erlaubt offene Web-Apps zu installieren und zu benutzen. Gecko ist die anzeigende Teilsoftware (rendering engine) die auch der Firefox Browser benutzt um Internetinhalte zu berechnen und anzuzeigen.

Firefox OS beinhaltet mit Gaia eine Sammlung von vorinstallierten Anwendungen, mit denen die grundlegenden Funktionen des mobilen Gerätes angesprochen und genutzt werden können, beispielsweise Einstellungen, Anrufe, SMS, Gespräche, die Speicherung von Fotos usw.

Unterstützung von Firefox OS-Versionen

Beachten Sie bei der Entwicklung von Apps für Firefox OS, für welche der unterschiedlichen Versionen, die auf den verschienen Generationen der Geräte ihrer Kunden laufen werden, Sie ihre App entwickeln (schauen dazu auf der folgenden Tabelle nach: available phones table). Behalten sie in Erinnerung, dass es nicht so einfach ist, die Software für mobile Endgeräte auf dem neuesten Stand zu halten, wie die auf normalen Desktop-Rechnern. Oft sind die Nutzer an Vorgaben der Anbieter bzw. der Mobilfunkbetreiber gebunden. Sie sollten daher ihre Apps mit Unterstützung für diese Firefox OS-Versionen entwickeln.
Diese Anbieterabhänigkeit sollte in Zukunft in dem Maße abnehmen, in dem mehr Firefox OS-Geräte angeboten werden, die mit der neuesten Version von Firefox OS ausgestattet sind und somit eine breitere Basis der gleichen Version bieten.

Wir empfehlen zur Zeit die Entwicklung für die grundlegende Plattform: Firefox 1.1.

MDN's web platform reference pages zeigt Informationen zu Browser/Plattformunterstützung. Mehr Infos zu App-spezifischen Technologien gibt es auf der Seite Apps API Reference.

Bsp.: Multiline Flexbox funktioniert erst ab Version 1.3, weshalb sie eine einfachere grafische Gestaltung benutzen sollten, um eine Abwärtskompatibilität älterer Versionen sicherzustellen.

Erforderliche Fähigkeiten

Wie bereits erwähnt basieren offene Web-Apps auf den Standardtechnologien HTML, CSS und JavaScript, so dass Entwickler, die bereits an Internetseiten gearbeitet haben, die Grundlagen bereits kennen sollten. Auch wenn Sie diese Grundlagen noch nicht kennen, können Sie sich diese zügig aneignen, in dem sie die einzelnen Bereiche der Beginner's tutorials durcharbeiten um erfolgreich mit offenen Web-Technologien entwickeln zu können.


 

Erforderliche Tools

Sie können offene Web-Apps mit einfachen freien Tools erstellen ... :

Einmal gestartet ...
können Sie ein Entwicklervorserienmodell bekommen oder
installieren Sie Ihre App auf einem eigenen Gerät ...

Ihre erste App

Dieser Abschnitt: ... finden sie unser quickstart starter template repo auf Github (download direkt als  zip-Datei).

Quickstart App Starter Vorlage

Unsere App nutzt die Battery Status API (über die Vibration API) und Systembenachrichtigung (über die Notification API).

Beginne mit:

  • battery-quickstart-starter-template/
    • index.html
    • images/
      • battery.svg
      • icon-128.png
      • icon-512.png
    • scripts/
      • battery.js
      • install.js
    • style/
      • style.css
    • .htaccess
    • README.md
  • index.html : ....
  • images : ... lies unseren Icon implementation for apps Guide.
  • scripts : ... — battery.js und install.js.
  • style : ..., style.css, ....
  • .htaccess: ... (Welche einige Macht hat.)
  • README.md: ... beschreibt alles.

Ein Manifest hinzufügen

Jede offene Web-App benötigt eine manifest.webapp ... und vieles mehr.

Füge die folgende manifest.webapp. hinzu.

{
  "name": "Battery",
  "description": "Battery provides a good template for an in-app battery/charge indicator with different visualization choices, plus ideas of what could be changed once battery level gets low.",
  "launch_path": "/index.html",
  "icons": {
    "128": "/images/icon-128.png",
    "512": "/images/icon-512.png"
  },
  "developer": {
    "name": "Chris Mills",
    "url": "http://www.conquestofsteel.co.uk"
  },
  "permissions": {
    "desktop-notification": {
      "description": "Needed for creating system notifications."
    }
  }
}

Hinweis: Für mehr Information ... App Manifests Referenz.

Hinweis: Pfade ... root startet ab http://www.mysite.com/myapp/, und my icon ab http://www.mysite.com/myapp/myicon/icon.png, der icon Pfad wäre /myapp/myicon/icon.png, nicht /myicon/icon.png.

API Berechtigungen

Es gibt eine Menge von WebAPIs innerhalb der manifest.webapp Datei, zu sehen in der Notification API.

Verschiedene APIs folgen:

  1. Normal — APIs ... Zugriffsberechtigungen.
  2. Privileged — APIs ... eine vertauenswürdige Quelle.
  3. Certified — APIs ... zur Benutzung.

Hinweise: Für mehr Information ... lesen Sie die  App Berechtigungen.

Web API Funktionalität

JavaScript APIs... features to JavaScript APIs.

Detecting support for features

One technique employed ... into your example code):

// Let's check if the browser supports notifications
if (!("Notification" in window)) {
  console.log("This browser does not support notifications.");
}

Our code for the quickstart example functionality

Inside the scripts/battery.js file, add the following ... we need:

// fork the navigator.battery object depending on what prefix the viewing browser uses
var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
// grab the elements we need, and put them in variables
var indicator1 = document.getElementById('indicator1');
var indicator2 = document.getElementById('indicator2');
var batteryCharge = document.getElementById('battery-charge');
var batteryTop = document.getElementById('battery-top');
var chargeIcon = document.getElementById('battery-charging');

// Flag to check if battery charged/not charged has already been notified once
// 0 for first time of notification,
// 1 means "charged" has already been notified,
// 2 means "not charged" has already been notified
// This is set to the opposite after each notification, so that you don't keep
// getting repeat notifications about the same charge state.
var chargingState = 0;

Next, we'll add ... event is fired:

function updateBatteryStatus() {
  // battery.level can be used to give us a percentage of bettery charge to report to
  // the app's user
  var percentage = Math.round(battery.level * 100);
  indicator1.innerHTML = "Battery charge at " + percentage + "%";
  batteryCharge.style.width = percentage + '%';

  if(percentage >= 99) {
    // report that the battery is fully charged, more or less ;-)
    batteryTop.style.backgroundColor = 'limegreen';
    batteryCharge.style.backgroundColor = 'limegreen';
    createNotification("Device battery fully charged.");
  }

  if(battery.charging) {
  // If the battery is charging
    if(chargingState == 1 || chargingState == 0) {
    // and if our chargingState flag is equal to 0 or 1
      // alter the styling to show the battery charging
      batteryTop.style.backgroundColor = 'gold';
      batteryCharge.style.backgroundColor = 'gold';
      indicator2.innerHTML = "Battery is charging";
      chargeIcon.style.visibility = 'visible';
      // notify the user with a custom notification
      createNotification("Device battery now charging.");

      // flip the chargingState flag to 2
      chargingState = 2;
    }
  } else if(!battery.charging) {
  // If the battery is NOT charging
    if(chargingState == 2 || chargingState == 0) {
    // and if our chargingState flag is equal to 0 or 2
      // alter the styling to show the battery NOT charging
      batteryTop.style.backgroundColor = 'yellow';
      batteryCharge.style.backgroundColor = 'yellow';
      indicator2.innerHTML = "Battery not charging";
      chargeIcon.style.visibility = 'hidden';
      // notify the user with a custom notification
      createNotification("Device battery is not charging.");

      // flip the chargingState flag to 1
      chargingState = 1;
    }
  }
}

Now it's time to add in the createNotification() function ... Chromium/Blink-based browsers.

function createNotification(message) {
  // Let's check if the browser supports notifications
  if (!("Notification" in window)) {
    console.log("This browser does not support notifications.");
  }
  // Let's check if the user is okay to get some notification
  else if (Notification.permission === "granted") {
    // If it's okay let's create a notification

    // show the notification
    var notification = new Notification('Battery status', { body: message });
    // And vibrate the device if it supports vibration API
    window.navigator.vibrate(500);
  }
  // Otherwise, we need to ask the user for permission
  // Note, Chrome does not implement the permission static property
  // So we have to check for NOT 'denied' instead of 'default'
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {
      // Whatever the user answers, we make sure Chrome stores the information
      if(!('permission' in Notification)) {
        Notification.permission = permission;
      }
      // If the user is okay, let's create a notification
      if (permission === "granted") {

        // show the notification
        var notification = new Notification('Battery status', { body: message });
        // And vibrate the device if it supports vibration API
        window.navigator.vibrate(500);
      }
    });
  }
}

Finally, we'll add ... the battery object to let ... (by running the updateBatteryStatus() function), and then run updateBatteryStatus() once to get the show started:

// Event handler to check whether the battery has started charging or stopped charging
battery.addEventListener("chargingchange", updateBatteryStatus, false);
// Event handler to check whether the battery charge level has changed
battery.addEventListener("levelchange", updateBatteryStatus, false);

// run the central function once when the app is first loaded
updateBatteryStatus();

The comments should ... and objects like chargingchange, battery, and Notification().

The JavaScript is ... starts charging (the chargingchange and levelchange event listeners.) When one of these..., the updateBatteryStatus() function is run, ... and runs createNotification().

This ... is.

Note: Check the WebAPI page frequently to keep up to date with device API statuses.

Install API functionality

In our sample app ... is nothing special:

<button id="install">Install app on device</button>

This button's functionality ... into your example's scripts/install.js file:

// get a reference to the install button
var button = document.getElementById('install');

// if browser has support for installable apps, run the install code; it not, hide the install button
if('mozApps' in navigator) {

    // define the manifest URL
    var manifest_url = location.href + 'manifest.webapp';

    function install(ev) {
      ev.preventDefault();
      // install the app
      var installLocFind = navigator.mozApps.install(manifest_url);
      installLocFind.onsuccess = function(data) {
        // App is installed, do something if you like
      };
      installLocFind.onerror = function() {
        // App wasn't installed, info is in
        // installapp.error.name
        alert(installLocFind.error.name);
      };
    };

    // if app is already installed, hide button. If not, add event listener to call install() on click
    var installCheck = navigator.mozApps.checkInstalled(manifest_url);
    installCheck.onsuccess = function() {

      if(installCheck.result) {
        button.style.display = "none";
      } else {
        button.addEventListener('click', install, false);
      };
    };
} else {
  button.style.display = "none";
}

Again, the comments explain what's going on quite nicely, but in brief, we first check whether the mozApps object exists in the browser (if('mozApps' in navigator)) — i.e. if the browser supports installable apps or not. If not, we just hide the install button.

Next, navigator.mozApps.checkInstalled checks whether the app defined by the manifest at manifest_url is already installed on the device. If the test returns a success, its success event is fired and the installCheck.onsuccess = function() { ... } is run.

We then test for the existence of installCheck.result; if it does exist, meaning that the app is installed, we hide the install button. If the app isn't installed, we add a click event listener to the button, so the install() function is run when the button is clicked.

When the button is clicked and the install() function is run, we install the app using navigator.mozApps.install(manifest_url), storing a reference to that installation in the installLocFind variable. You'll notice that this installation also fires success and error events, so you can run actions dependent on whether the install happened successfully or not.

Note: Installable open web apps have a "single app per origin" security policy; basically, you can't host more than one installable app per origin. This makes testing a bit more tricky, but there are still ways around this, such as creating different subdomains for apps.

Making the app work offline

By default, web apps (including hosted Firefox OS apps) don't work offline: resources are cached in the standard web way, but you can't guarantee the app will be available offline. There are various technologies and techniques that can be used to make apps work offline, and these are explained in more detail at our Offline apps developer recommendations page. We won't be discussing offline any further in this article, as we wanted to keep the scope clearly within the realm of distinct installable web app/Firefox OS app features.

Testing your app

At this point, your app should be finished, and you can start testing it in browsers. If the app does not seem to be working, you can find the finished source code to check against, or see the example running live. For example, it looks like this on a desktop computer:

An image of the quickstart app in a desktop browser. it shows a title saying Battery indicator, and icons to indicate that the battery is not charging.

Testing on Firefox desktop

The quickest way to test your app's basic functionality is to simply load it in Firefox desktop (open the index.html file in the browser) — this supports most of the features we are talking about here. The notifications look like so on OS X:

A system notification from Mac OS X saying that the device battery is not charging.

And in Firefox Aurora/Nightly and Firefox for Android, you can test the install functionality — these browsers include the Firefox runtime that allows installable web apps to be installed on the desktop.

Note: Bear in mind though that to test the install functionality you'll need to put the files onto a location on your own server that has no other installable web apps on the same origin (different subdomains is ok.) This is because of the "single app per origin" security policy we mentioned earlier. If you try to install the version we've got running on Github, for example, you'll get a MULTIPLE_APPS_PER_ORIGIN_FORBIDDEN error.

Testing in the Firefox OS simulator

You can also test the app in a Firefox OS simulator via our App Manager tool (and soon, on our all-new WebIDE tool). This will give you a more realistic idea of how it will look on a real device. In short, you need to:

  1. Install the Firefox OS simulator
  2. Open the App Manager (Tools > Web Developer > App Manager)
  3. Click Start Simulator then choose the simulator you installed earlier
  4. Click Add packaged app then navigate to your app's local directory
  5. Click the App's Update button to install it on the Firefox OS Simulator

Testing on a Firefox OS device

The vibration API won't work on these options however. To fully test this you'll need to get hold of a real Firefox OS device. If you've got one, you can connect it to your computer and install apps contained on your local drive straight onto it via the App Manager. Here's a Firefox OS screenshot showing the app running, along with a system notification.

A Firefox OS screenshot showing the app, with a notification to say that the battery is charging.

To install the app on your Firefox OS device via the App Manager:

  1. Install the Firefox OS simulator and ADB helper
  2. Open the App Manager (Tools > Web Developer > App Manager)
  3. On your Firefox OS device, Select the ADB and Devtools option in the Remote Debugging developer setting
  4. Connect your phone to your desktop computer via USB
  5. Click the option that represents your device in the "Not connected" bar at the bottom of the App Manager. For example, a Geeksphone Keon usually appears as full_keon
  6. Click Add packaged app then navigate to your app's local directory
  7. Click the App's Update button to install it on the Firefox OS Device

App Submission and Distribution

Once your app is complete, you can host it yourself like a standard web site or app (read App publishing options for more information), self-publish a packaged app, submit it to the Firefox Marketplace. What you do here depends on your circumstances:

  1. When publishing a Firefox OS app, it is generally a good idea to make it available as a packaged app. Packaged apps come with the advantages of having access to privileged APIs (see App permissions), and being installed on the device so they are available offline. A packaged app would effectively get the AppCache functionality discussed above for free, and you could remove the install functionality discussed above as well (see Self-publishing packaged apps for more information on what you'd do instead.)
  2. If you want your app to be available as a general web app and not just a Firefox OS app, hosted is the way to go, as discussed in this article.

When submitting to the Marketplace, your app's manifest will be validated and you may choose which devices your app will support (e.g. Firefox OS, Desktop Firefox, Firefox Mobile, Firefox Tablet). Once validated, you can add additional details about your app (screenshots, descriptions, price, etc.) and officially submit the app for listing within the Marketplace. Once approved, your app is available to the world for purchase and installation.

Learn more

That's it for now. Our quickstart is obviously a gross oversimplification of all the things involved in making a great app, but we've deliberately kept it this way to effectively highlight all the new things you need to know. For more information on different aspects of app design and development and Firefox OS, consult the below resources.

Firefox OS

Our Firefox OS zone focuses closely on the Firefox OS platform, giving you all need to know about building the platform, contributing to the Gaia project, phone specs, and Firefox OS-specific debugging and testing techniques.

Design Apps

There's no "right way" to design a user interface, but there are plenty of ways to make your app less fun and easy to use. Our Apps design section will help you avoid making common UI mistakes, and provide knowledge of responsive design and other essential topics for designing an app that is a joy to use, no matter what platform it's running on.

Build Apps

Our Apps build section provides clear developer recommandations and workflow advice to help experienced developers find solutions to common development problems rapidly, plus tutorials and API reference listings for those who want to go deeper.

Publish Apps

Want to get your app published and start forming a userbase? Our Marketplace zone contains all the information you need, including publishing options, submitting to the Firefox Marketplace, handing payments, and more.

FAQ

Frequently asked questions about app development basics.

Should I use a framework/library?

If you've got a certain framework or library that you tend to use often in your workflow, there is nothing to stop you creating an installable open web app with it.

Are there any example apps I can start playing with?

Yes, there are many available on the MDN App Center.

 

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: Darul, naseweis520, wif10, ranukanu, yves, teoli, AngelSankturio, chrisdavidmills
Zuletzt aktualisiert von: Darul,