从app的开发环境开始
Web apps是基于标准web技术之上的应用。它们能运行在任何现代浏览器之上(一般来说对html5支持好的都是现代浏览器),并且采用你喜欢的开发工具来开发。与网站不同,web app具有如下几个典型的特征:
应用本身是由用户安装的,它们是独立的,并不依赖与浏览器窗口,同时可以在离线状态下运行。Gmail, Twitter, 和 Etherpad都是web app。
火狐公司的web app项目为现有的网站提供了额外的机遇,让它们能变成能运行在一个丰富、有趣且强大的计算环境中的应用。这些应用能运行在桌面浏览器和移动设备中,相比网站这种形式来说,用户更容易发现和安装它们。Web app正迅速的增加着一些出色的功能,比如,用户能在各种各样的设备之间实现数据同步。
开始之前.分享一个最好用的UI前端框架!
如果你还是第一次接触web app,那么你可以参考 implementationstate of the API.
发布app
开发一个网站app唯一要做的事情就是添加一个app manifest。这是一个描述你app的JSON格式文件,包括app名称,app图标,以及其他可读信息。
Manifest文件必须和你的网站在同一个域名下,且被访问的Content-Type是application/x-web-app-manifest+json的形式。(Note:现阶段FireFox不强制这么做,但是要发布在FireFox应用市场,这是必须的)。要知道关于
manifest全部细节请参考:app的 manifest 文档。关于检查manifest合法性的工具的详细情况参考:Validatinga manifest.
同一网站下多个app
记住有一点很重要,这就是每个app都只能从自己的域名之下被访问。不同的app不能共享同一个域名。有一种解决这一限制的办法:不同的app关联不同的子域名。要知道更多,参考关于manifest的政策s
检查一个app是否已经安装
当一个浏览器在加载app页面的时候,页面需要判断这个用户是否没有安装该app,通过调用checkInstalled()
,判断一个app是否安装。如下:
- var request =navigator.mozApps.checkInstalled("http://path.to/my/example.webapp");
- request.onsuccess = function() {
- if(request.result) {
- // we're installed
- }else {
- // not installed
- }
- };
- request.onerror = function() {
- alert('Error checking installation status: ' + this.error.message);
- };
安装app
你可以直接通过你的网站来发布app。通过你的站点来测试安装是一个不错的主意。在提交app到Firefox Marketplace之前确保你的manifest文件的合法性。
只需用一个按钮或者超链接来触发如下的javascript代码: 分享一个最好用的UI前端框架!
- var request =navigator.mozApps.install("http://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()
这句代码会让浏览器加载manifest(这里是example.webapp
)并且询问用户是否安装。如果用户确认安装,那么这个app将被安装进浏览器。在OS X中应用将被安装到Applications目录下。
navigator.mozApps.install()
的第二个参数是关于数据方面的,用于保存一些信息到用户已安装应用的数据集中。这些信息可以被同步到其他设备,应用可以通过调用getSelf()
来恢复,参考:
Checkingwhether the app is installed。如下:
- navigator.mozApps.install(
- "http://path.to/my/example.webapp",
- {
- user_id: "some_user"
- }
- );
推销你的app
Mozilla正在打造一个app的市场,一个能能管理好app的发现,排名和计费的应用市场。采用允许第三方创建自己商店的开放平台的方式,但创建自己的商店并不是必须的。
如果你想让人们为你的app付费,参考Marketplacepayments。
FireFox 市场将会很快投入使用,你可以注册为应用开发人员来获得FireFox 市场的最新信息,同时获得一些关于开发app的建议。注册地址:sign upfor the Apps Developer newsletter
离线运行和使用高级api
现代浏览器增加了很多新的特性来支持离线运行和本地话操作。这里是一些有用的连接:
离线运行:使用HTML5 appcache的demo;
联网与断网事件:检测设备的离线与在线状态
在应用中使用音频和视频
用 Canvas画图
使用 WebGL绘制3D图形
使用 Content-Editable来为app创建功能全面、快速的富文本编辑器
通过HTML5 的api在web应用中使用文件系统
使用 Drag 和 Drop来拖动程序中的元素
检测设备的横竖屏。分享一个最好用的UI前端框架!
在本地存储数据
本地存储的api提供了以键值对形式存储用户访问app的数据的方法。如果用户用的是现代浏览器,比如firefox 4 或者Chrome,你还能使用IndexedDB,一种高性能的结构化的客户端数据库。
如果你希望在不同设备不同app之间共享数据的话,你需要使用上面提到的install()
函数的第二个参数。
相关推荐
模拟器可以使用 Firefox OS 目前开发中的大多数功能。 Mozilla发布了Firefox OS Simulator 3.0正式版,带来了预览版里的所有功能,并且做出了更多的改进。安装好套件后,可以在 Firefox 主选单的【WEB开发者】-【 ...
Firefox OS的概览以及开发环境的介绍
[MDN搬运]Firefox OS开发的学习_02_app_manifest
FIREFOX OS 概况和开发环境介绍文档,对于初步接触firefox os的人员可以看看。
从MDN搬运的Firefox OS开发文章,to be continue...
firefox os 开发者文档对初学开发者是个不错的开发指导中文文档,对你学习firefox os 开发有一定的帮助!
火狐开发os移动操作系统demo代码文档示例 firefox 移动操作系统 代码和文档示例, 使用firefox 浏览器操作,需要安装 FireFox os Simulator,地址为: http://download.csdn.net/detail/kaixin5588/6592373
[MDN搬运]Firefox OS开发的学习_04_在线及离线事件
Firefox 开发组编写的火狐插件指南
学习firefox os开发的第一个例子
Firefox OS 是由 Mozilla 及其移动开发者社区开发的新操作系统。 它基于 Mozilla Firefox 浏览器和免费和开放的技术,例如 HTML、CSS、JavaScript 和 Linux。 在多个操作系统上运行您的应用程序过去很麻烦。 他们每...
firefox os 开发文档 QEMU Emulator Firefox OS Desktop Firefox OS Simulator Firefox Nightly Firefox OS Device
Firefox OS Boilerplate App 应用了 Firefox OS 的 Gaia 风格,但请注意,没有义务为您的应用程序添加相同的外观和感觉:Firefox OS 应用程序是 Web 应用程序,因此无需遵循 UI 指南。 有关构建开放式 Web 应用...
本系列文章很适合作为学习Firefox附加组件开发的参考。其中说明了Firefox扩展开发所需要使用到的技术,并对这些技术进行了简明的介绍。原文地址:https://developer.mozilla.org/En/Firefox_addons_developer_guide ...
Firefox-OS-Boilerplate-App-gh-pages
Firefox OS开发入门——第一个app,如何创建一个可在Firefox OS中运行的App,并在模拟器中进行测试。
firefox os快速开发文档.英文语言
firefox插件开发教程firefox插件开发教程
火狐Firefox浏览器的插件Video DownloadHelper 8.0 的合作应用VdhCoAppSetup2.0.11 未升级则提示:需要合作应用升级 你正在应用合作应用版本 1.6.1 但是本功能需要版本 2.0.9
这个文档是个人在开发100工具时总结出来的文档,部分内容摘自他人,只供学习