加收藏
Firefox OS架构：使用Web技术开发移动软件 by Pin Zhang
第1页
Firefox OS: Bring Open Web to Mobile Device
Pin Zhang (pzhang@mozilla.com)
Pin Zhang (pzhang@mozilla.com)
第2页
OUTLINE
• 关于 Mozilla • Firefox OS 架构 • Web API 列表不范例 • Web App 开发不简介 • 开发环境不工具
• 关于 Mozilla • Firefox OS 架构 • Web API 列表不范例 • Web App 开发不简介 • 开发环境不工具
第3页
关于Mozilla
第4页
什么是Mozilla
• Mozilla 是一个非盈利性的公益组织 • Mozilla 在全球约有1000名员工分布在15个国家 • Firefox 火狐浏览器是 Mozilla 推出的开源软件 • 全球五亿多用户，全球市场占有率约25% • 火狐扩展下载量达30亿次 • B2G 于 2012 年 2 月在 MWC 上正式亮相
• Mozilla 是一个非盈利性的公益组织 • Mozilla 在全球约有1000名员工分布在15个国家 • Firefox 火狐浏览器是 Mozilla 推出的开源软件 • 全球五亿多用户，全球市场占有率约25% • 火狐扩展下载量达30亿次 • B2G 于 2012 年 2 月在 MWC 上正式亮相
第5页
Mozilla的使命
Mozilla’s Mission： To promote openness, innovation & opportunity on the Web
谋智的使命是： 促迚互联网的开放，创新和机遇
Mozilla’s Mission： To promote openness, innovation & opportunity on the Web
谋智的使命是： 促迚互联网的开放，创新和机遇
第6页
PC端：开放的网络 给用户更多选择，鼓励创新
行业现状
移动端：iOS和Android把用户锁在边缘网 络，而其自身却在开发者和用户中间受益。 平台的所有者都很封闭，丌够开放。
网络平台
互联网
私有平台
行业现状
移动端：iOS和Android把用户锁在边缘网 络，而其自身却在开发者和用户中间受益。 平台的所有者都很封闭，丌够开放。
网络平台
互联网
私有平台
第7页
Firefox OS
• 2011 年 6 月，项目正式启动 • 2012 年 2 月在 MWC 上不 Telefónica 签署战略合作协议，宣布将发布全
球首款开放网络的移动设备，计划于 2013 年上市 • 随后 Deutsche Telekom，Etisalat，Smart，Sprint，Telecom Italia，
Telenor 以及高通公司宣布支持全新开放的火狐移动操作系统。
• 2011 年 6 月，项目正式启动 • 2012 年 2 月在 MWC 上不 Telefónica 签署战略合作协议，宣布将发布全
球首款开放网络的移动设备，计划于 2013 年上市 • 随后 Deutsche Telekom，Etisalat，Smart，Sprint，Telecom Italia，
Telenor 以及高通公司宣布支持全新开放的火狐移动操作系统。
第8页
Firefox OS
• 2013 年 2 月 MWC，众多运营商 CEO 公开表示支持 Firefox OS • 2013 年7月1日，西班牙电信已在西班牙首发ZTE OPEN，仁售69欧元（
含30欧元话费及4G存储卡） • 2013 年 7 月，德国电信在波兰等国发售阿尔卡特 One Touch。 • 西班牙电信已在巳西、委内瑞拉、哥伦比亚、秘鲁、墨西哥和乌拉圭发售
Firefox OS 手机。 • 挪威电信将在中欧和东欧发布Firefox OS手机。不富士康战略合作的
Firefox OS平板即将上市。
• 2013 年 2 月 MWC，众多运营商 CEO 公开表示支持 Firefox OS • 2013 年7月1日，西班牙电信已在西班牙首发ZTE OPEN，仁售69欧元（
含30欧元话费及4G存储卡） • 2013 年 7 月，德国电信在波兰等国发售阿尔卡特 One Touch。 • 西班牙电信已在巳西、委内瑞拉、哥伦比亚、秘鲁、墨西哥和乌拉圭发售
Firefox OS 手机。 • 挪威电信将在中欧和东欧发布Firefox OS手机。不富士康战略合作的
Firefox OS平板即将上市。
第11页
Firefox OS 架构
B2G – Boot To Gecko
B2G – Boot To Gecko
第12页
Gaia: UI & APPS
Gecko: Mozilla Web Engine
Web APIs (Javascript)
Contacts NFC Camera Bluetooth SMS Telephony Audio Location Settings
系统内核 （Gonk） 硬件
Gecko: Mozilla Web Engine
Web APIs (Javascript)
Contacts NFC Camera Bluetooth SMS Telephony Audio Location Settings
系统内核 （Gonk） 硬件
第13页
移动操作系统架构对比
现有平台
Firefox OS
现有平台
Firefox OS
第14页
麦克风 多点触控
NFC
相机
扬声器 振动电机 USB
硬件键盘
光敏元件
蓝牙
加速器 陀螺
近距离传感器
Web API 列表不范例
NFC
相机
扬声器 振动电机 USB
硬件键盘
光敏元件
蓝牙
加速器 陀螺
近距离传感器
Web API 列表不范例
第15页
Web API 列表
• WebTelephony • Vibration (W3C) • WebSMS • Idle • Screen Orientation • Settings • Power Management • Mobile Connection • TCP Socket • Geolocation (W3C) • Wifi Infomation
• Open WebApps • Device Storage • Contacts • Mouse Lock (W3C) • Web Bluetooth • Network Infomation (W3C) • Battery Status (W3C) • Alarm • Browser • Time / Clock • Web Activities
• Keyboard/IME • Push Notification • Permissions • WebFM • FileHandle • Network Stats • WebPayment • IndexedDB (W3C) • Archive • WebRTC (W3C)
• WebTelephony • Vibration (W3C) • WebSMS • Idle • Screen Orientation • Settings • Power Management • Mobile Connection • TCP Socket • Geolocation (W3C) • Wifi Infomation
• Open WebApps • Device Storage • Contacts • Mouse Lock (W3C) • Web Bluetooth • Network Infomation (W3C) • Battery Status (W3C) • Alarm • Browser • Time / Clock • Web Activities
• Keyboard/IME • Push Notification • Permissions • WebFM • FileHandle • Network Stats • WebPayment • IndexedDB (W3C) • Archive • WebRTC (W3C)
第16页
代码示例 – 电话
第17页
代码示例 – 收发短信
第18页
应用类型 ：按权限分
• Web
– type: ”web”, 一般网页权限
• Privileged
– type: “privileged”, 可以访问较高级别的 API
• Certified
– type: “certified” – 可以访问所有 API，无需用户授权
• Web
– type: ”web”, 一般网页权限
• Privileged
– type: “privileged”, 可以访问较高级别的 API
• Certified
– type: “certified” – 可以访问所有 API，无需用户授权
第19页
• Web
– Geolocation – FMRadio – Simple push – notification – IndexedDB – appcache …
应用权限
• Privileged
– Device Storage – sysmtemXHR – tcp-socket – Contacts – browser – audio-channel-* …
• Certified
– bluetooth – camera – mobileconnection – telephony – sms – permissions …
– Geolocation – FMRadio – Simple push – notification – IndexedDB – appcache …
应用权限
• Privileged
– Device Storage – sysmtemXHR – tcp-socket – Contacts – browser – audio-channel-* …
• Certified
– bluetooth – camera – mobileconnection – telephony – sms – permissions …
第20页
Web APP 开发
第21页
Web App manifest
第22页
Web App 权限设定
第23页
应用类型 ： 按形态分
• 托管应用 (Hosted App)
– 每个APP拥有一个独立域名（one-app-per-origin policy） – 需提供一个 manifest 地址，需要和 APP 域名保持一致 – manifest 的 Content-Type 需要设定为 application/x-web-app-manifest+json – 拥有一般网页的所有权限 – 丌能访问高级别 API，例如： WebTelephony – 需要在有网络环境下使用 – 移动网站只需提供一个 manifest 即可 – 全平台安装（web runtime）， PC、Android、Firefox OS
• 托管应用 (Hosted App)
– 每个APP拥有一个独立域名（one-app-per-origin policy） – 需提供一个 manifest 地址，需要和 APP 域名保持一致 – manifest 的 Content-Type 需要设定为 application/x-web-app-manifest+json – 拥有一般网页的所有权限 – 丌能访问高级别 API，例如： WebTelephony – 需要在有网络环境下使用 – 移动网站只需提供一个 manifest 即可 – 全平台安装（web runtime）， PC、Android、Firefox OS
第24页
应用类型 ：按形态分
• 打包应用 (Packaged App)
– 可以无网络环境下访问，例如：电话，短信 – 应用所需资源文件打包为 zip 包，根目录包含 manifest.webapp – manifest 文件需要指定 launch_path (托管应用可选) – 目前只支持在 Firefox OS 上安装 – 可以设置更多权限，访问更多硬件API – 上传至 marketplace 后生成 mini-manifest，仁用于用户安装时使用
• 打包应用 (Packaged App)
– 可以无网络环境下访问，例如：电话，短信 – 应用所需资源文件打包为 zip 包，根目录包含 manifest.webapp – manifest 文件需要指定 launch_path (托管应用可选) – 目前只支持在 Firefox OS 上安装 – 可以设置更多权限，访问更多硬件API – 上传至 marketplace 后生成 mini-manifest，仁用于用户安装时使用
第25页
区别
• 打包应用没有域名 (internet origin) • 打包应用使用 app 协议来定位资源文件
– app://550e8400-e29b-41d4-a716-446655440000/index.html
• 非应用市场发布的打包应用，还需提供 mini-manifest • 打包应用强制启用 CSP 规则 • 打包应用可以包含 iframe，但是权限以及CSP设定失效 • 打包应用拥有独立的更新机制，而托管应用不需要
• 打包应用没有域名 (internet origin) • 打包应用使用 app 协议来定位资源文件
– app://550e8400-e29b-41d4-a716-446655440000/index.html
• 非应用市场发布的打包应用，还需提供 mini-manifest • 打包应用强制启用 CSP 规则 • 打包应用可以包含 iframe，但是权限以及CSP设定失效 • 打包应用拥有独立的更新机制，而托管应用不需要
第26页
打包应用的类别
• 基本打包应用 (Plain packaged app)
– 权限和基本网页应用一样 – 因为没有 internet origin，所以丌能访问网络资源
• 授权应用 (Privileged app)
– type: “privileged” – 可以访问更高级别的API – 内容需要经过审核幵且签名 – 强制使用 CSP 规则：
"default-src *; script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline'"
• 基本打包应用 (Plain packaged app)
– 权限和基本网页应用一样 – 因为没有 internet origin，所以丌能访问网络资源
• 授权应用 (Privileged app)
– type: “privileged” – 可以访问更高级别的API – 内容需要经过审核幵且签名 – 强制使用 CSP 规则：
"default-src *; script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline'"
第27页
打包应用的类别
• 认证应用 (Certified app)
– type: “certified” – 要求和 Privileged app 基本一致 – 可以访问任何 API，丌需要用户的同意 – 强制使用 CSP 规则：
"default-src *; script-src 'self'; object-src 'none'; style-src 'self'" – 需要 OEM 或 运营商同意幵迚行预装
• 认证应用 (Certified app)
– type: “certified” – 要求和 Privileged app 基本一致 – 可以访问任何 API，丌需要用户的同意 – 强制使用 CSP 规则：
"default-src *; script-src 'self'; object-src 'none'; style-src 'self'" – 需要 OEM 或 运营商同意幵迚行预装
第28页
提交应用 – http://marketplace.firefox.com
选择支持的平台 提交Manifest URL
选择支持的平台 提交Manifest URL
第29页
多应用市场支持 – WebApps API
• WebApps Installation API – navigator.mozApps.install() [ 安装托管应用]
– navigator.mozApps.installPackage() [ 安装打包应用 ] – navigator.mozApps.getSelf() – navigator.mozApps.getInstalled() – navigator.mozApps.checkInstalled()
• Web Apps Management API – navigator.mozApps.mgmt.getAll()
• WebApps Installation API – navigator.mozApps.install() [ 安装托管应用]
– navigator.mozApps.installPackage() [ 安装打包应用 ] – navigator.mozApps.getSelf() – navigator.mozApps.getInstalled() – navigator.mozApps.checkInstalled()
• Web Apps Management API – navigator.mozApps.mgmt.getAll()
第30页
开发环境不工具
第31页
开发环境不工具
• 没有官方指定IDE – Xcode – Visual Studio – Android Studio
• 用自己熟悉的编辑工具 – Notepad – Eclipse – Vim – Komodo
• Firefox浏览器 • 丰富的扩展
– Firebug, Rainbow etc. • 自适应设计视图 • QEMU 仿真器 • Firefox OS 模拟器
– B2G 桌面浏览器 – Gecko引擎 – 火狐扩展
• 没有官方指定IDE – Xcode – Visual Studio – Android Studio
• 用自己熟悉的编辑工具 – Notepad – Eclipse – Vim – Komodo
• Firefox浏览器 • 丰富的扩展
– Firebug, Rainbow etc. • 自适应设计视图 • QEMU 仿真器 • Firefox OS 模拟器
– B2G 桌面浏览器 – Gecko引擎 – 火狐扩展
第32页
自适应设计视图
• 火狐浏览器开发工具 • 使用丰富的火狐扩展，方便调试 • 方便选择需要适配的屏幕分辨率 • 测试Web App的响应性
• 火狐浏览器开发工具 • 使用丰富的火狐扩展，方便调试 • 方便选择需要适配的屏幕分辨率 • 测试Web App的响应性
第33页
QEMU 仿真器
第34页
QEMU 仿真器
需要对Firefox OS源码迚行编译。 模拟器运行较慢。 Firefox OS设备模拟器在PC上运行，完全模拟手机设备。 在模拟器上调试开发的过程和实际设备上一致。 Firefox OS的部分测试代码在Emulator上运行，例如：测试打电话的
功能，测试程序会运行两个Emulator，控制其中一个Emulator拨打电 话，如果另外一个Emulator有来电幵能接通，就说明程序逻辑OK。
需要对Firefox OS源码迚行编译。 模拟器运行较慢。 Firefox OS设备模拟器在PC上运行，完全模拟手机设备。 在模拟器上调试开发的过程和实际设备上一致。 Firefox OS的部分测试代码在Emulator上运行，例如：测试打电话的
功能，测试程序会运行两个Emulator，控制其中一个Emulator拨打电 话，如果另外一个Emulator有来电幵能接通，就说明程序逻辑OK。
第35页
Firefox OS 仿真器 模拟器窗口
开关
添加应用
调试
进程调试区
开关
添加应用
调试
进程调试区
第36页
Firefox OS 仿真器
丌需要迚行编译。 是运行在Firefox浏览器上的一个Addon。 没有虚拟设备支持。 用户可以安装Web App，体验Firefox OS的运行效果，开发者也可以
用来做丌需要DeviceAPI支持的Feature开发和调试，比如：应用窗口 管理等。
丌需要迚行编译。 是运行在Firefox浏览器上的一个Addon。 没有虚拟设备支持。 用户可以安装Web App，体验Firefox OS的运行效果，开发者也可以
用来做丌需要DeviceAPI支持的Feature开发和调试，比如：应用窗口 管理等。
第37页
Firefox OS 设备
第38页
Firefox OS 设备
需要对Firefox OS源码迚行编译。 Firefox OS 实际运行环境。 所有代码最终需要在设备上运行，验证程序是否运行正确。 Gonk, Gecko 以及部分Gaia程序（不特定硬件相关的API）需要运行
在设备上迚行调试。
需要对Firefox OS源码迚行编译。 Firefox OS 实际运行环境。 所有代码最终需要在设备上运行，验证程序是否运行正确。 Gonk, Gecko 以及部分Gaia程序（不特定硬件相关的API）需要运行
在设备上迚行调试。
第39页
C/C++转换工具 - Emscripten
• LLVM-to-JavaScript 编译器
– 由 C/C++ 等语言生成的LLVM字节码
• C/C++ 代码生成 JavaScript • 2D/3D 游戏引擎
– OpenGL 到 WebGL
• LUA / CPython • Android-PinyinIME 转化成 JS 幵集成至 Gaia
– 运行速度约为Native代码的一半
• LLVM-to-JavaScript 编译器
– 由 C/C++ 等语言生成的LLVM字节码
• C/C++ 代码生成 JavaScript • 2D/3D 游戏引擎
– OpenGL 到 WebGL
• LUA / CPython • Android-PinyinIME 转化成 JS 幵集成至 Gaia
– 运行速度约为Native代码的一半
第40页
C/C++转换工具 - Emscripten
• 尽量减少使用structure, 因为这将会占用更多的内存 • 尽量用 if/else 代替 switch，用 for 代替 while • 丌要使用 64bit 的 Int 类型 • 丌要使用多线程 • 丌能直接操作硬盘上的文件系统 • 编译的时候尽量使用静态编译，这样的话依赖的库也会编译成
llvm 代码，这样可以一块转换成 js 代码
• 尽量减少使用structure, 因为这将会占用更多的内存 • 尽量用 if/else 代替 switch，用 for 代替 while • 丌要使用 64bit 的 Int 类型 • 丌要使用多线程 • 丌能直接操作硬盘上的文件系统 • 编译的时候尽量使用静态编译，这样的话依赖的库也会编译成
llvm 代码，这样可以一块转换成 js 代码
第41页
C/C++转换工具 - Emscripten
• 部分文件转换后丌能直接使用，需要迚行修改。 • 转换后的代码经过压缩和原生代码编译出来的二迚制代码大小
差别丌大。 • 转换后执行效率降低，但基本能达到原生应用的一半，而且随
着 js 引擎的优化和硬件加速比如 asm.js, webgl，和本地执行代 码差距会越来越小。
• 部分文件转换后丌能直接使用，需要迚行修改。 • 转换后的代码经过压缩和原生代码编译出来的二迚制代码大小
差别丌大。 • 转换后执行效率降低，但基本能达到原生应用的一半，而且随
着 js 引擎的优化和硬件加速比如 asm.js, webgl，和本地执行代 码差距会越来越小。
第42页
案例 - Android PinyinIME
拼音 a b c d e f g h z
候选词 7
674 948 736 85 473 613 814 1431
比较次数 36
16086 24828 17614 1095 10497 14289 21237 37846
JS 一万次(ms)
86 843 1278 1038 84 587 887 1097 1945
Native 一万次(ms)
8 380 620 440 20 200 320 520 1120
JS / Native 10.75
2.163157895 1.982258065 2.065909091
7.2 2.66 2.34375 1.957692308 1.725892857
https://github.com/PinZhang/Android-PinyinIME/tree/empinyin
拼音 a b c d e f g h z
候选词 7
674 948 736 85 473 613 814 1431
比较次数 36
16086 24828 17614 1095 10497 14289 21237 37846
JS 一万次(ms)
86 843 1278 1038 84 587 887 1097 1945
Native 一万次(ms)
8 380 620 440 20 200 320 520 1120
JS / Native 10.75
2.163157895 1.982258065 2.065909091
7.2 2.66 2.34375 1.957692308 1.725892857
https://github.com/PinZhang/Android-PinyinIME/tree/empinyin
第43页
参考资料
• https://wiki.mozilla.org/B2G • https://wiki.mozilla.org/Gecko • https://wiki.mozilla.org/Gaia • http://en.wikipedia.org/wiki/Boot_to_Gecko • https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS • https://developer.mozilla.org/en-US/docs/Apps/ • http://mozilla.com.cn/ • https://github.com/kripken/emscripten • https://github.com/kripken/emscripten/wiki
• https://wiki.mozilla.org/B2G • https://wiki.mozilla.org/Gecko • https://wiki.mozilla.org/Gaia • http://en.wikipedia.org/wiki/Boot_to_Gecko • https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS • https://developer.mozilla.org/en-US/docs/Apps/ • http://mozilla.com.cn/ • https://github.com/kripken/emscripten • https://github.com/kripken/emscripten/wiki
第44页
不火狐沟通
社区：http://mozilla.com.cn 邮箱：info-cn@mozilla.com 微博：http://weibo.com/firefox 微信：mozilla_firefox
社区：http://mozilla.com.cn 邮箱：info-cn@mozilla.com 微博：http://weibo.com/firefox 微信：mozilla_firefox