你的第一个应用

如果你想按照本指南开发，你可以下载我们的快速入门应用模板。还可以参阅应用模板指南找到更多有关其内容的介绍。

应用架构

打包型应用 VS. 托管型应用

开放网络应用有两种类型：打包型和托管型。打包型应用本质上来说就是一个包含各种HTML、CSS、JavaScript、图像、清单（manifest）等应用资源的zip文件。托管型应用在一个给定域名的服务器上运行，就像是一个独立的网站。两种应用都需要有有效的清单。到了要在火狐市场中列出你的应用是，你要上传应用的zip文件或提供托管应用所在的URL

在本指南结束时，你将创建一个寄宿于本机（localhost）地址上的托管型应用。一旦你的应用准备好进入火狐市场，你可以选择把它作为打包应用打包或作为托管应用启动。

应用清单

每一个火狐应用都需要一个位于应用根目录下的manifest.webapp文件， 这个文件提供与应用有关的重要信息，如：版本、名称、描述、图标地址、本地字符串、指明应用可以从哪儿被安装等等。只有名称和描述是必须的。应用模板中的简单清单如下所示：

{
  "version": "0.1",
  "name": "Open Web App",
  "description": "Your new awesome Open Web App",
  "launch_path": "/app-template/index.html",
  "icons": {
    "16": "/app-template/app-icons/icon-16.png",
    "48": "/app-template/app-icons/icon-48.png",
    "128": "/app-template/app-icons/icon-128.png"
  },
  "developer": {
    "name": "Your Name",
    "url": "https://yourawesomeapp.com"
  },
  "locales": {
    "es": {
      "description": "Su nueva aplicación impresionante Open Web",
      "developer": {
        "url": "https://yourawesomeapp.com"
      }
    },
    "it": {
      "description": "La tua nuova fantastica Open Web App",
      "developer": {
        "url": "https://yourawesomeapp.com"
      }
    }
  },
  "default_locale": "en"
}

一个基本的清单是你所需要最先上手的地方。关于清单的更多细节，见应用清单。

应用布局&设计

随着不同设备上屏幕分辨率标准的增多，响应式设计已经变得越来越重要。即使你应用的主要目标平台是移动平台比如Firefox OS，其他设备很有可能也会访问它。CSS媒体选择（CSS media queries）使你可以根据设备调整布局，如下的CSS样例中所示的结构：

/* The following are examples of different CSS media queries */

/* Basic desktop/screen width sniff */
@media only screen and (min-width : 1224px) {
  /* styles */
}

/* Traditional iPhone width */
@media
  only screen and (-webkit-min-device-pixel-ratio : 1.5),
  only screen and (min-device-pixel-ratio : 1.5) {
  /* styles */
}

/* Device settings at different orientations */
@media screen and (orientation:portrait) {
  /* styles */
}
@media screen and (orientation:landscape) {
  /* styles */
}

有许多JavaScript和CSS的框架可以用于协助响应式设计和移动应用发展（Bootstrap等），选择最适合你的应用和开发样式的框架即可。

Web APIs

JavaScript APIs正随着设备即时的被开发和增强。Mozilla的WebAPI致力于为JavaScript APIs引入许多标准的移动端特性。设备支持状态列表可以在WebAPI页面中查看。JavaScript的特征检测依旧是最好的做法，如下例所示：

// If this device supports the vibrate API...
if('vibrate' in navigator) {
    // ... vibrate for a second
    navigator.vibrate(1000);
}

在下面这个例子中，<div>的显示样式会根据设备的电池状态的改变而改变：

// Create the battery indicator listeners
(function() {
  var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery,
      indicator, indicatorPercentage;

  if(battery) {
    indicator = document.getElementById('indicator'),
    indicatorPercentage = document.getElementById('indicator-percentage');

    // Set listeners for changes
    battery.addEventListener('chargingchange', updateBattery);
    battery.addEventListener('levelchange', updateBattery);

    // Update immediately
    updateBattery();
  }

  function updateBattery() {
    // Update percentage width and text
    var level = (battery.level * 100) + '%';
    indicatorPercentage.style.width = level;
    indicatorPercentage.innerHTML = 'Battery: ' + level;
    // Update charging status
    indicator.className = battery.charging ? 'charging' : '';
  }
})();

在上面的示例代码中，一旦你确定设备支持Battery API，你就可以为chargingchange 和 levelchange添加时间监听器来更新元素的样式。

时常检查WebAPI页面以确保更新设备API的状态

Install API功能

在我们的样例快速开始应用模板中，我们已经实现了一个安装按钮，可以在你把应用当作一个标准网页来浏览时可以单击它来把那个网站当作一个应用安装在Firefox OS上。按钮标签并没有什么特别的：

<button id="install-btn">Install app</button>

按钮的功能由Install API实现（见install.js）：

var manifest_url = location.href + 'manifest.webapp';

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

// get a reference to the button and call install() on click if the app isn't already installed. If it is, hide the button.
var button = document.getElementById('install-btn');

var installCheck = navigator.mozApps.checkInstalled(manifest_url);

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

我们来简要的看一下发生了什么：

1. 我们得到一个安装按钮的引用并把它储存在button变量中。
2. 我们使用navigator.mozApps.checkInstalled 来检查这个由https://people.mozilla.com/~cmills/location-finder/manifest.webapp这个清单来定义的应用是否已经安装在设备上。这个测试结果被储存在installCheck这个变量中。
3. 当测试成功完成时，它的成功完成事件被触发，因此installCheck.onsuccess = function() { ... }会被执行。
4. 然后我们用一个if语句判断installCheck.result是否存在。如果存在，以为着应用已经被安装了，隐藏安装按钮。在应用已经被安装的情况下不需要安装按钮（废话>_<!）
5. 如果应用没有被安装，为按钮添加一个单击事件监听器，所以在按钮被单击的时候install()函数会被执行。
6. 当单击按钮并且install()函数执行时，我们把清单位置保存在一个叫manifest_url的变量中，然后利用navigator.mozApps.install(manifest_url)来安装应用，用一个installLocFind变量来储存对那个安装的应用。你会注意到安装也会触发success和error事件，所以你可以根据应用是否成功安装来执行不同的动作。

第一次遇到可安装网络应用时你可能想要核实API的执行状态。

WebRT APIs (基于权限的 APIs)

有些WebAPI虽然可以使用但是需要特定的功能开启才具有使用的权限。应用可能会像下面这样在manifest.webapp中记录权限请求：

// New key in the manifest: "permissions"
// Request access to any number of APIs
// Here we request permissions to the systemXHR API
"permissions": {
    "systemXHR": {}
}

权限分为下面三个等级：

• 一般权限——不需要任何特定访问权限的API。
• 特殊权限——只要开发者在应用清单文件中设置了访问权限就可以在应用中利用并通过可信任来源进行分发的API。
• 认证权限——控制力设备上关键功能的API，比如打电话和发短信的服务。这些一般不允许第三方开发者使用。

关于应用权限等级的更多信息，请阅读打包型应用的类型。你可以在应用权限中找到更多关于API要求权限和需要什么样的权限。

工具&测试

测试在对移动应用的支持中是至关重要的。测试可安装开放网络应用有多种方式。

Firefox OS 模拟器

安装和使用Firefox OS模拟器  是启动和运行你的应用最简单的方式。在你安装模拟器之后，可以通过工具->web开发者->Firefox OS模拟器菜单来启动。模拟器启动时会有一个Javascript控制台，这样你就可以在模拟器中调试你的应用。

应用管理器

测试工具的新宠儿被称为应用管理器。这个工具允许你通过USB链接桌面火狐浏览器和一个可兼容性设备（或者一个Firefox OS模拟器），直接将应用推送到设备上，验证应用并且像运行在设备上一样的调试。

单元测试

当在测试不同设备和版本时，单元测试就会非常有价值。jQuery的QUnit是一个流行的客户端测试工具，当然你也可以使用任何你喜欢的测试工具。

在设备上安装Firefox OS

既然Firefox OS是一个开源平台，代码和工具都可以用于在你自己的设备上构建和安装Firefox OS。构建和安装指南以及什么设备可以安装的注意事项可以在MDN上发现。

特定的Firefox OS开发者预览版设备可以在开发者预览版手机页面找到更多信息。

应用提交和分发

一旦你的应用完成，你可以像标准网站或应用一样托管它（更多信息请阅读发布应用），或者可以发布到火狐市场。你的应用清单将被验证并且你可以选择你的应用将支持的设备（比如：Firefox OS、桌面版火狐浏览器、移动版火狐浏览器、平板班火狐浏览器）。一旦验证通过，你可以为你的应用添加更多细节（截屏、描述、价格等）并且正式在火狐市场应用列表中提交应用。提交成功后，你的应用可以被任何人购买和安装。

更多商场&上市信息

1. 向Firefox OS商场中提交应用
2. 市场审查标准
3. 应用提交演练视频