开始开发app

3 位贡献者:

Web apps是使用标准的网络技术构建的app。它可以运行在任何的现代浏览器上,你可以使用你喜欢的工具来开发它。有一些可以用来区分Web apps和网站:Apps会被用户安装,他们是自给自足的并不需要依赖于一个类似于Chrome那样的窗口浏览器,它们可以被设计成为运行在离线模式。Gmail,Twitter以及Etherpad都是Web apps。

Mozilla的Open Web Apps项目提议在现在的网站上增加一些小东西可以让apps更加绚丽,有趣并且提供极具计算能力的环境。这些apps运行在桌面浏览器和移动设备上,而且与网站相比,它会更加容易被使用者发现和使用。它们已经渐渐的显露出那些给力的特色,比如可以同步使用者的所有设备。

在你开始之前

如果你是一个第一次接触web apps的开发者,也许你想要验证一些执行状态的 API

发布app

为了从一个网站添加web app,有一件你不得不去做的事情,那就是添加一个应用标识(app manifest)。这是一个用来描述你的app的JSON文件,它包括了名称,图标,以及一个任何人都能读懂的描述。

这个标识(manifest)必须放在你网站的域名下,并且要使用“application/x-web-app-manifest+json”这样的Content-type(注意:Firefox并不是强制这样作,但是这对于Firefox商店(Marketplace)来说是必要的)。所有关于标识(manifest)的细节你可以参考app manifest 文档。那里有一些工具可以帮助你检查标识(manifest)。见验证一个标识(Validating a manifest)

同源政策

这里有一件对于每个app都非常重要的事情,那就是没有app都要被放在它自己的域名上。不同的apps不能分享同样的域名。一个可以接受的办法是它们可以被放在不同的子域名上。举个例子,更多信息可以参考关于应用标识的FAQs

检查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。在你向Firefox市场(Marketplace)提交app之前,你可以通过你的网站测试安装app,你只需要保证你的manifest是有效的就可以了。

你只需要放置一个按钮或者一个链接来执行如下JavaScript代码就可以:

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)(比如emample.webapp),而且会问使用者是否要安装这个应用程序。如果用户同意安装,这个app会被安装到浏览器上。在Mac OS X上,应用程序会被安装在"Applications"文件夹中。

navigator.mozApps.install()的第二个参数是install_data,这是为了在用户安装的时候存留一些信息。这些信息可以被同步到该用户的其他设备上,你可以调用getSelf()用来检索你的应用程序(见检查app是否被安装了)。举个例子:

navigator.mozApps.install(
    "http://path.to/my/example.webapp",
    {
        user_id: "some_user"
    }
);

让app更给力(Promoting the app)

Mozilla正在建立一个使用开放框架的app市场(marketplace),它包括处理探索、评论、评级已经支付功能,它可以使第三方建立自己的商店。并且你不必须要把你的app放到商店的列表中。

如果你希望用户购买你的app,见Marketplace payments

这个Firefox市场(Marketplace)很快就会被推出。你可以通过注册App开发者电子信来获取Firefox Marketplace的开发进度,以及给我们一些开始app时的建议。

离线运行和使用高级移动设备APIs

现代网络浏览器已经添加了很多伟大的特性可以使你的应用程序运行在离线环境下或者与你的移动设备交互。下面是一些有用的链接:

 

本地存储

本地存储 API 提供了一个持续的键值(key-value)存储方式,你可以使用它来去跟踪使用你Web app的用户数据。如果用户使用现代浏览器,比如Firefox 4或更高版本,或者Google Chrome,你还可以使用 IndexedDB, 这是一个结构化的,高性能的客户端存储器。

如果你有一些需要被分享到不同移动设备上的用户数据,那么你可以看前面的内容中有关于使用install()install_data参数。

例子

一些开源的web apps的例子:

还可以看

Apps开发者首页

文档标签和贡献者

向此页面作出贡献: ReyCG_sub, teoli, Will_Chen
最后编辑者: ReyCG_sub,