`
agevs
  • 浏览: 70767 次
  • 来自: 北京
博客专栏
924aba1e-229a-352e-b6d4-f15f3159a438
各种Web前端技巧经验分享...
浏览量:0
文章分类
社区版块
存档分类
最新评论

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

阅读更多

 

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()函数的第二个参数。

 

0
1
分享到:
评论

相关推荐

    [MDN搬运]Firefox OS开发的学习_02_app_manifest

    【压缩包子文件的文件名称列表】:“MDN搬运]Firefox OS开发的学习_02_app_manifest.docx”是包含详细信息的文档,我们可以通过阅读它来学习Firefox OS应用开发的核心概念——App Manifest。 在Firefox OS中,App ...

    firefox os app

    【Firefox OS 应用开发详解】 Firefox OS 是Mozilla公司推出的一款基于开放网络标准的操作系统,主要应用于智能手机和平板电脑。其核心理念是构建一个完全基于Web技术的应用平台,开发者可以使用HTML、CSS和...

    [MDN搬运]Firefox OS开发的学习_01_从开发应用开始

    MDN是一个强大的资源库,提供了详尽的Web技术和Firefox OS开发指南。 1. **Firefox OS基础知识** - Firefox OS的核心是基于HTML5、CSS3和JavaScript构建的,这使得开发者可以使用熟悉的Web技术来开发原生应用。 -...

    firefox os 开发者文档

    知识点一:Firefox OS 开发概述 Firefox OS 是由Mozilla主导开发的开源移动操作系统,使用Linux内核和基于Gecko的运行环境。该系统的核心理念是所有用户可接触的应用都应该是基于Web的应用。开发方式完全采用开放源...

    firefox os实践

    Firefox OS,全称为Firefox操作系统,是由Mozilla公司开发的一款开源、基于Linux内核的移动设备操作系统。...通过这个实例,开发者可以深入了解Firefox OS的生态系统,为今后的Web应用开发打下坚实的基础。

    Firefox OS的概览以及开发环境的介绍

    **Firefox OS**的系统架构由Linux内核作为底层支撑,之上则是基于Web的应用层,包括各种Web应用如主屏幕、联系人、拨号器、短信、即时消息、日历、浏览器、媒体播放器、相机等。这些应用通过HTML5、CSS和JavaScript...

    quickguidefirefoxosdevelopment.pdf_firefoxos快速开发_

    《Firefox OS快速开发指南》是针对想要投身于Firefox操作系统应用开发者的详尽参考资料。这份PDF文档,名为"quickguidefirefoxosdevelopment.pdf",涵盖了从基础知识到高级实践的完整流程,帮助开发者快速掌握Fire...

    FIREFOX OS 概况和开发环境介绍

    与传统的专有移动平台相比,Firefox OS打破了产权负担和限制,使得开发者无需深入学习特定平台的原生API即可进行应用开发。这一点对于希望接触跨平台技术的开发者来说是一个巨大的优势。 在Web标准中,Firefox OS...

    OSTC开源技术大会-张频-Firefox OS 释放移动的未来

    Mozilla在全球拥有约1000名员工,分布在15个国家,推出了著名的开源软件Firefox火狐浏览器,拥有超过五亿用户,全球市场占有率约25%,火狐扩展下载量达到30亿次。 2. **Firefox OS的开发背景**:在PC端,网络环境...

    How to make apps for Firefox OS

    “Setup For Firefox OS App Development”(Firefox OS应用开发设置)涉及了开发前的准备工作,可能包括介绍Gecko引擎、所需的应用程序、App Manager的设置,以及如何安装Firefox OS模拟器。 “Basic Concepts”...

    Firefox插件让你在桌面浏览器体验Firefox OS.docx

    标题和描述中提到的知识点是关于Firefox OS模拟器的,这是一种通过Firefox浏览器插件r2d2b2g实现的功能,允许用户在桌面环境中体验Firefox OS操作系统。这个模拟器主要面向开发者,旨在简化Firefox OS应用的开发和...

    Firefox OS模拟器 3.0.1 正式版

    模拟器可以使用 Firefox OS 目前开发中的大多数功能。 Mozilla发布了Firefox OS Simulator 3.0正式版,带来了预览版里的所有功能,并且做出了更多的改进。安装好套件后,可以在 Firefox 主选单的【WEB开发者】-【 ...

    [翻译]Firefox OS开发入门——第一个app

    要开始开发Firefox OS应用,开发者需要了解如何创建manifest.json文件,这是一个描述应用基本信息和权限的配置文件。此外,使用Firefox OS的模拟器可以方便地测试和调试应用。开发者可以通过Mozilla提供的开发工具,...

    [MDN搬运]Firefox OS开发的学习_04_在线及离线事件

    在Firefox OS应用程序开发中,理解和处理设备的在线和离线状态是至关重要的。本节将深入探讨如何使用Web API来检测和响应这些状态变化,以便为用户提供无缝的体验。 1. **离线优先策略** 在移动设备上,网络连接...

    一个firefox OS App的例子

    本示例是一个Firefox OS应用——一个简单的时钟应用,通过解压后的文件我们可以深入理解Firefox OS App的开发过程。 首先,`index.html`是应用的主页面,它定义了用户界面的基本结构。在Firefox OS App中,HTML文件...

    Firefox OS模拟器3.0版本发布.docx

    Firefox OS模拟器3.0版本是Mozilla为了支持Firefox操作系统应用程序开发而推出的一个强大工具。这个模拟器让开发者能够在不依赖真实设备的情况下,测试和调试针对Firefox OS设计的应用程序。随着3.0版本的发布,...

    firefox os 系统构造

    Firefox OS,全称为Boot to Gecko,是一个基于开放网络标准的操作系统,主要由Mozilla开发。它的设计目的是为了构建一个完全依赖于Web技术的应用平台,其中包括HTML、CSS和JavaScript。Firefox OS的核心组成部分包括...

    [MDN搬运]Firefox OS开发的学习_03_使用App缓存

    本篇文章将深入探讨 App Cache 的概念及其在 Firefox OS 应用开发中的应用。 **一、Web App 缓存简介** Web App 缓存是 HTML5 的一个重要特性,允许网页和资源在用户首次访问后被缓存,以便在离线或网络不稳定时...

    Firefox OS App Day_Web APIs

    【Firefox OS App Day_Web APIs】这一主题聚焦于利用HTML5和Web APIs在Firefox操作系统上构建应用程序的实践。HTML5是现代网页开发的核心标准,它引入了许多新的元素、APIs和功能,极大地增强了网络应用的能力,使之...

    火狐开发os移动系统demo示例

    火狐开发os移动操作系统demo代码文档示例 firefox 移动操作系统 代码和文档示例, 使用firefox 浏览器操作,需要安装 FireFox os Simulator,地址为: http://download.csdn.net/detail/kaixin5588/6592373

Global site tag (gtag.js) - Google Analytics