当前位置:首页 > 开发 > Web前端 > 前端 > 正文

Firefox OS应用开发指南之预备知识

发表于: 2014-09-15   作者:agevs   来源:转载   浏览次数:
摘要:   从app的开发环境开始 Web apps是基于标准web技术之上的应用。它们能运行在任何现代浏览器之上(一般来说对html5支持好的都是现代浏览器),并且采用你喜欢的开发工具来开发。与网站不同,web app具有如下几个典型的特征: 应用本身是由用户安装的,它们是独立的,并不依赖与浏览器窗口,同时可以在离线状态下运行。Gmail, Twitter, 和 Etherpad都是we

 

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。这是一个描述你appJSON格式文件,包括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是否安装。如下:

.代码 
  1. var request =navigator.mozApps.checkInstalled("http://path.to/my/example.webapp");  
  2. request.onsuccess = function() {  
  3. if(request.result) {  
  4. // we're installed  
  5. }else {  
  6. // not installed  
  7. }  
  8. };  
  9. request.onerror = function() {  
  10. alert('Error checking installation status: ' + this.error.message);  
  11. };  

 

 

安装app

你可以直接通过你的网站来发布app。通过你的站点来测试安装是一个不错的主意。在提交appFirefox Marketplace之前确保你的manifest文件的合法性。

只需用一个按钮或者超链接来触发如下的javascript代码: 分享一个最好用的UI前端框架!

.代码 
  1. var request =navigator.mozApps.install("http://path.to/my/example.webapp");  
  2. request.onsuccess = function() {  
  3. //great - display a message, or redirect to a launch page  
  4. };  
  5. request.onerror = function() {  
  6. //whoops - this.error.name has details  
  7. };  

 

触发navigator.mozApps.install()这句代码会让浏览器加载manifest(这里是example.webapp)并且询问用户是否安装。如果用户确认安装,那么这个app将被安装进浏览器。在OS X中应用将被安装到Applications目录下。

navigator.mozApps.install()的第二个参数是关于数据方面的,用于保存一些信息到用户已安装应用的数据集中。这些信息可以被同步到其他设备,应用可以通过调用getSelf()来恢复,参考:Checkingwhether the app is installed。如下:

.代码 
  1. navigator.mozApps.install(  
  2. "http://path.to/my/example.webapp",  
  3. {  
  4. user_id: "some_user"  
  5. }  
  6. );  

 

推销你的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应用开发指南之预备知识

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
Mozilla 宣布了两款与 Geeksphone 合作的 Firefox OS 开发预览机,适用于准备投入 Firefox OS 开发
1.http编程知识 http中client 和server的工作模式   client和server建立可靠的tcp链接(在HTTP1.1
twitter官方博客今天宣布将为 Mozilla 最新发布的手机操作系统Firefox OS打造应用,并将登录 firefo
Firefox os 手机迟迟不能在国内大面积上市,现在能买到的Firefox os手机国内就一款Firefox os ZET O
一、 计算机系统简介 1、硬件系统:看得见,摸得着 主机:主机箱、主板、内存、硬盘、CPU(中央处理
通过对前面内容的介绍,大家已经了解了如何获取响应运动传感器的数据,本节将介绍有关捕获方向传感
生活中我们经常听到人们说“不要把鸡蛋放到一个篮子里”,这样可以降低风险。深究一下,这是为什么
在QtCreator当中用到了不少的Concurrent(并发),比如编译时,搜索时等。其实在很多场合中都需要用
第一章 引言 第二章 预备知识 第三章 直接聚类法 第四章 K-means 第五章 DBSCAN 第六章 OPTICS <
应用程序安装目录 前面介绍了如何对本地应用存储空间中的文件以及文件夹进行操作,在应用中除了可以
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号