由 在过去的一年中，我们一直在招募已经为各种开放式 Web 和 HTML5 平台构建应用程序的开发人员：使用 PhoneGap、Appcelerator Titanium 或手工编写的包装器构建的原生平台应用程序；为亚马逊应用商店、黑莓 Webworks、Chrome Dev Store、Windows Phone 和 WebOS 构建的 HTML5 应用程序；以及使用 Emscripten 翻译成 JavaScript 的 C++ 应用程序。我们已经为数百名开发人员提供了支持，并在世界各地发布了设备以测试和演示 Firefox 应用程序。如果您在任何平台上都有一个评价很高、成功的 HTML5 应用程序，我们敦促您将其移植到 Firefox OS：我们相信这将是值得的。
11 月，Firefox OS 在匈牙利、塞尔维亚、黑山和希腊推出。本月初我们在意大利推出。在 2014 年，我们将与新的运营商在新的地区推出，并推出具有新外形的全新设备。我们预计在 2014 年会出现更强大的跨平台工具，以及与 PhoneGap 和 Firefox 开发者工具的更紧密集成。对于抢先机来说，这是最好的时机。
以下是几个成功移植的示例。我们与参与过“应用程序移植”计划和研讨会的熟练 HTML5 应用程序开发人员进行了交谈，并请他们描述了他们的 Firefox 应用程序移植体验。
Captain Rogers，作者为 Andrzej Mazur；Reditr，作者为 Dimitry Vinogradov 和 David Zorycht；Aquarium Plants，作者为 Diego Lopez
- Aquarium Plants（**Android，带有手工编写的原生包装器**）
- Calc（**iOS，带有手工编写的原生包装器**）
- Calcula Hipoteca（**亚马逊应用商店**）
- Captain Rogers（**HTML5 桌面**）
- Cartelera Panama（**Appcelerator Titanium**）
- Fresh Food Finder（**PhoneGap**）
- Picross（**WebOS**）
- Reditr（**Chrome Dev Store**）
- Speed Cube Timer（**黑莓 Webworks**）
- Squarez（**C++**）
- Touch 12i（**Windows Phone/ HTML5**）
Aquarium Plants（Android，带有手工编写的原生包装器）
**应用程序：** Aquarium Plants
**开发人员：**Diego Lopez
原平台：** Google Play 商店
时间
Aquarium Plants 使用我们自己的 JavaScript 代码和简单的 HTML5 代码编写：我们只使用了两个常见的 JavaScript 框架（Zepto.js 和 TaffyDB.js）。我花了大约 3 个小时或更少的时间。大部分时间都花在了阅读论坛和文档上。
建议
为 Firefox OS 构建/移植应用程序非常容易。能够使用 Web 工具和框架为 Firefox OS 创建原生应用程序真是太棒了。我建议其他开发人员开始开发 Firefox 应用程序；这几乎毫不费力，而且体验很棒。
挑战
我遇到的唯一挑战是找出如何构建包。当我意识到为 Firefox OS 构建就像用应用程序文件和清单创建压缩文件一样容易时，我感到很惊讶。
Calc（iOS，带有手工编写的原生包装器）
**应用程序：** Calc
**开发人员：**Markus Greve
原平台：** iOS，带有手工编写的原生包装器
时间
这真的很容易。这就是为什么我会签署“在其他地方编写，在 Firefox OS 上运行”的声明。我认为我花了大约两个晚上，第一个晚上让应用程序运行，第二个晚上对模拟器和 Keon 的显示尺寸进行了一些微调。之后又花了一个晚上来制作应用程序图标并将其部署到市场上 ;-) 。
建议
我建议开发人员尝试一下，看看它到底有多容易。我认为 Mozilla.org 做得很好，你们对开发人员的支持非常棒。我已经制作了一个简短的关于如何创建 FirefoxOS 应用程序的演示文稿，作为我经验的记录。你可以在这里看到它：五分钟内创建一个 Firefox OS 应用程序（英文）。还有一篇名为 App Entwicklung fur den Feuerfuchs 的博客文章，记录了我的德语经验。
挑战
1. 我使用 OSX 10.9 Mavericks，模拟器在旧插件下崩溃，但在 Firefox 1.26b 和 app-manager 下运行更加稳定。
2. 需要为每个应用程序使用一个子域 - 似乎这是一个未解决的问题。
3. JSON 清单中的数据类型（我尝试了“fullscreen”: true 而不是“fullscreen”: “true”）。我的错误：通过坚持使用文档解决了。
4. 我感觉文档中的图标尺寸与市场真正需要的尺寸不同。此外，当你需要在其他地方使用更大的文件（我认为商店需要 256×256）时，为 60×60 像素的图标提供 Photoshop 模板是没有意义的。最好提供一个 1024 的模板，然后用户将图像缩小。
5. 建议：可以更全面地解释 navigator.mozApp.checkInstalled() 和 .install() 之间的关联。
Calcula Hipoteca（亚马逊应用商店）
**应用程序：** Calcula Hipoteca
**开发人员：**Emilio Baena
原平台：** 亚马逊应用商店
时间
这很简单。我花了几个小时。
建议
你们在这个平台上做得很好。
挑战
我在 manifest.webapp 方面遇到了问题，我认为我缺少关于这种文件类型的更多文档。
Captain Rogers（HTML5 桌面）
**应用程序：** Captain Rogers
**开发人员：**Andrzej Mazur
原平台：** HTML5 桌面
时间
将 Captain Rogers 移植到 Firefox OS 平台的整个过程只花费了我两周的开发时间，再加上两周的测试和调试。在核心概念上，该游戏应该很简单，这样我就可以专注于将其打磨到适合 Firefox OS 设备并将其发布到 Firefox 市场。
挑战
并没有什么大问题，因为本质上，为 Firefox OS 构建应用程序就是为 Web 本身构建应用程序。Firefox OS 设备是移动 Web 长期以来一直期待的硬件——毕竟它是使用 JavaScript 和 HTML5 构建的。我将主要精力放在使游戏在 Firefox OS 设备上可玩上，重点是清单文件。我在让方向正确工作方面遇到了一些问题，但在华沙的 Firefox OS 应用程序研讨会上，我从 Jason Weathersby 那里获得了极大的帮助，最终，游戏的第一个版本运行得非常流畅，几天后就被接纳到 Firefox 市场。
对于优化代码，我推荐这篇 Louis Stowasser 和 Harald Kirschner 编写的实用文章——它对我帮助很大。此外，Web Audio API 在移动设备上仍然是一个大问题，但在 Captain Rogers 中运行得非常完美，它是在 Firefox OS 手机上发布的。
建议
主要信息很简单：如果你正在为 Firefox OS 构建 HTML5 游戏，那么你就是在为开放式 Web 构建游戏。Firefox OS 是 Web 所需要的硬件平台，从长远来看，每个人都将从中受益，因为标准和 API 已在数百万人的实际设备上经过实战检验。
如果你想了解更多关于 HTML5 游戏开发的信息，我可以推荐我的两个作品：我的 为 Firefox OS 做准备的文章 和 HTML5 游戏开发入门清单。你应该阅读这篇 Austin Hallock 编写的精彩介绍。这个社区非常乐于助人，所以如果你遇到任何问题，请查看 HTML5GameDevs 论坛寻求帮助，你一定会得到帮助。现在是 HTML5 游戏开发的好时机，所以加入进来，玩得开心吧！.
Cartelera Panama（Appcelerator Titanium）
**应用程序：** Cartelera Panama
**开发人员：**Demostenes Garcia
原平台/包装器：** Appcelerator Titanium
时间
快速掌握 Cartelera 的开发流程相当容易。Firefox OS 的开发很简单，因为它有很好的文档记录，而且 HTML5 + JavaScript 使创建应用程序 *非常* 容易。
挑战
我们Pixmat Studios的 UX/UI 团队非常注重用户体验，因此我们选择 Titanium 而不是 PhoneGap（更好的用户体验）。所以我们面临的主要挑战是让它看起来像一个真正的 Firefox OS 应用程序。最后，我们决定使用真正的 Firefox OS Building Blocks，而不是使用 Titanium 来构建 UI。我们决定
- 将应用程序的所有业务逻辑（处理时间表、电影、列表等）提取到自己的 Git 存储库/模块中。然后我们使用原生用户体验在 Titanium 和 Firefox OS 上重复使用所有内容，以支持我们现在接受的所有三个平台。
- 我们遇到的另一个问题是在手机上以一种好的方式实现 OAuth 客户端。但是 Jason Weathersby 指出了这方面的一些好资源。
建议
对于普通的 Web 开发人员来说，Firefox OS 和其环境（调试等）很容易使用，所以我们不需要额外的知识来开发真正的移动应用程序。
- 使用 Firefox OS Building Blocks 来构建 UI。轻松获得原生的 UI 体验，无需繁琐的操作。
- Mozilla MDN 上的 Firefox OS 将是你最好的朋友：-)。
- GitHub 上有一些很好的项目可以学习，所以创建一个帐户（如果你还没有的话）并寻找演示项目。
Fresh Food Finder（PhoneGap）
应用程序：Fresh Food Finder
开发者：Andrew Trice
原平台/包装器：PhoneGap
时间
Firefox OS 将支持 PhoneGap，为了准备，我想熟悉 Firefox OS 开发环境和平台生态系统。所以... 我移植了 Fresh Food Finder，去掉了特定的 PhoneGap API 调用。最棒的部分（这真正体现了基于 Web 标准的开发的强大之处）是，我能够利用现有的 PhoneGap 代码库，将其转换为 Firefox OS 应用程序，并在 24 小时内提交到 Firefox 市场！
建议
基本上，我注释掉了 PhoneGap 特定的 API 调用，添加了一些小错误修复，并添加了一些特定于 Firefox OS 的布局/样式更改（只是一些小调整，以便我的应用程序在设备上看起来正常）。然后你放入一个 manifest.webapp 配置文件，打包它，然后将其提交到市场。如果你感兴趣，你可以查看 Cordova 项目 中对 Firefox OS 支持的进展，它将在 PhoneGap.com 上发布，一旦它真正发布。（编辑注：请关注 2014 年初的发布新闻。）
Picross（WebOS）
应用程序： Picross
开发者：Owen Swerkstrom
原平台： WebOS
时间
在拿到设备后几分钟内，Picross 就安装并在 FxOS 上运行了。
挑战
我确实不得不进行一些触摸 API 调整，但这仅仅意味着快速阅读。
建议
我最喜欢的引言是“你没有移植到 FirefoxOS，你正在移植到 Web 上！”另外，Firefox OS（和 Firefox 浏览器）的 Canvas 支持非常棒。我的下一个游戏肯定会使用 Canvas。就我而言，“移植”路径非常简单。我的游戏已经在浏览器中运行，最初的设计是为了在 Palm Pre 上运行，而 Palm Pre 的分辨率与最低端的 FirefoxOS 手机相同。但安装应用程序的概念仅仅是访问一个网站：这才是真正让它变得轻松的原因，这也是 FirefoxOS 真正独特的地方。它有一个“官方”应用程序市场，但与任何其他智能手机不同，它并不_需要_它！作为用户，这是一种解放。我可以从任何我想要的地方安装任何 Web 应用程序。作为开发者，故事更精彩。我甚至不需要 Mozilla 的许可就在这个平台上发布应用程序。我不需要将我的设备置于特殊的开发模式，也不需要购买任何工具包，或在任何特定平台上构建。如果我可以建立一个网站，我就可以开始了。
尽管我刚刚称它为“不必要”，但 Firefox 市场给我带来了很好的体验。我不需要打包、签名和上传任何软件包——我只需要输入一个 URL 并输入一些描述性的信息。审核时间一直很短，现在甚至比我刚开始的时候更快。当我提交 Halloween Artist 时，它几乎立即得到了批准，审核人员建议我为 Mozilla Hacks 写一篇博客文章，介绍我是如何将它组合在一起的。这既是一个传统的“市场”，有特色应用程序等等，也是一个庆祝有趣代码和新颖想法的极客社区。这绝对是我希望我的应用程序生活的世界。
在我参加 Mozilla 工作坊之前，我一直在考虑对我正在开发的动作/冒险游戏采用什么方法。我一直在权衡编写一些 C OpenGL 代码、等待尚未发布的 SDL 2.0，或者，作为最后的手段，至少在 HTML5 Canvas 中进行一些原型设计。在了解到 FirefoxOS 手机上的 Canvas 操作基本上直接进入帧缓冲区，并在尝试了一些实验后，亲眼看到了我从这些廉价的小 ARM 设备中获得的惊人性能，我知道我将放弃这个项目中的 C 语言，并以 Web 应用程序的形式编写游戏。我强烈建议你为你的下一款游戏调查 Canvas，即使你之前主要是做 Flash 或 SDL 等。
Reditr（Chrome Dev Store）
应用程序： Reditr
开发者：Dimitry Vinogradov 和 David Zorycht
原平台： Chrome Dev Store
时间
我们花了大约一周时间将所有内容从 Chrome 移植到 Firefox OS。
挑战
我们在为 Firefox OS 创建 Reditr 时遇到的一个挑战是 内容安全策略 (CSP)。对用户来说，Web 应用程序的一大好处是他们可以看到应用程序所需的所有权限的完整概述。然而，对于开发者来说，学习如何创建内容安全策略可能需要一些时间。对于 Reditr 来说，我们花了几天的时间才通过反复试验了解到安全策略如何影响我们的应用程序。
建议
确保你了解你的应用程序如何处理内容安全策略。检查你使用的 API 是否支持 oAuth，因为这可以帮助解决 CSP 问题。
Speed Cube Timer - Blackberry Webworks
应用程序： Speed Cuber Timer
开发者：Konstantinos Mavrodis
原平台：Blackberry Webworks
时间
将导出的 Web 应用程序与 Firefox OS 兼容大约花了半个小时。（非常快，你认为吗？:)）
挑战
我在这里没有遇到任何我记得的真正挑战。一切都几乎是小菜一碟！
建议
我建议其他开发者尽快将他们的 HTML5 应用程序移植到 Firefox OS！移植 Web 应用程序从未如此简单。Firefox OS 是一个很有前途的操作系统，它展示了 Web 开发的强大功能！
Squarez（C++）
应用程序： Squarez
开发者：Patrick Nicolas
原平台：C++ with Emscripten
Emscripten 和 C++ 的使用
我一直更喜欢静态类型和编译语言，因为它们更适合我组织软件的方式。Emscripten 提供了多种选择，我决定用 C++ 编写游戏逻辑，用 HTML/CSS/JavaScript 编写用户界面。所有逻辑代码都在 C++ 中，对于多人模式，服务器可以重复使用所有内容，并且只有大约 500 行额外的代码。
时间
这款游戏一直都是一个 Web 项目：最初的开发，从头开始，花了将近一个月。将其移植为 Firefox 应用程序只花了几天时间，以便制作清单和图标。性能调整是一项复杂的任务，花费的时间几乎与开发的其他时间一样长。
挑战
Squarez 是我编写的第一款游戏，也是我第一次使用 Emscripten，这是第一个挑战。编写 Web 应用程序已经不是什么挑战了，因为高质量的文档随处可见。第二个挑战是调整性能，一旦我收到了 Geeksphone Keon，我发现这款游戏太慢了，几乎无法玩。我使用了来自原生编译代码和桌面 Firefox 和 Chromium 的性能工具来找到瓶颈。
由于 Emscripten JavaScript 生成，跟踪有故障的函数并不容易，我必须处理配置文件视图中部分损坏的名称。接下来的步骤是优化 CSS，我只能找到用于检查选择器处理中花费时间的工具。无法知道哪个特定的动画需要时间，我必须使用非常手动的方法，尝试禁用个别动画，猜测哪些需要时间，并盲目地进行更改。
建议
我对其他开发者的建议是选择他们喜欢的技术；我想要结构化和静态类型的代码，所以 Emscripten/C++ 是一个很好的解决方案。我还要劝阻只在 Firefox OS 中运行的应用程序的创建，而是利用标准使其在任何浏览器中可用，并使用 Web API 来增强应用程序。如果你还想包含代码库的链接，它可以在 squarez.git 中找到。所有内容都是 GPLv3+，如果你想要，可以进行分叉。
Touch 12i（**Windows Phone**）
应用程序： Touch 12i
开发者：Elvis Pfutzenreuter
原平台： 适用于 Windows Phone（和其他平台）的 HTML5
时间
完成大部分工作花费了一天时间，另外一天用于完成最终细节，包括在 Marketplace 注册。后来，我添加了支付收据检查功能，这花了我大部分时间，因为需要进行充分的测试。但这种努力可以很容易地用于另一个应用程序（Touch 11i）。
挑战
总的来说，移植非常容易。我用了一天时间就把它做好了。最大的问题是视窗：它在其他平台（所有基于 Webkit 的平台）上的工作方式不同。对于 Firefox，我不得不使用基于 CSS 变换的方法来让计算器适合屏幕。Touch 12i 是一款在 Windows Phone 上运行的 HTML5 应用程序，它在 Android 和 iOS 上也以相同的方式工作：一个包含主程序的 Web 组件的原生代码“外壳”。目前，Firefox 版本是唯一一个“纯”HTML5 的版本。（我以前也为 iOS 做过一个纯 Web 版，但这个模式已经为 iOS 简化了。）我写了一篇名为玩转 Firefox OS 的详细博文，介绍了我参加“手机应用移植计划”的经历。
以上就是全部内容。感谢您阅读到这里。如果您是 Firefox OS 应用程序移植人员、Web 开发人员或只是好奇的读者，我们很乐意收到您的来信。请在下方留言或发送邮件至appsdev@mozilla.com。
关于 Mark Coggins
Mark 曾经是 Actuate 的工程高级副总裁，Actuate 是一家在商业智能领域上市的公司。他是 Eclipse 基金会 BIRT 开源项目的联合创始人，也是六部以硅谷为背景的犯罪小说的作者。
6 条评论