作者：使用 HTML5 的桌面应用程序
HTML 最棒的一点是它永远不会“完成”。HTML 陪伴着我们，比我们认为习以为常的大多数开发技术还要久远（.NET、ASP、Java、PHP 等）。
HTML 的最新版本 HTML5 已经成为软件和信息行业中热议的话题。当我们说“HTML5”时，我们实际上是指“HTML/CSS/JavaScript”的组合。
在 Mozilla，我们通常将其统称为“Web 运行时”或简称 WebRT。Mozilla 的应用程序计划，包括 Web 运行时，在此有文档记录。
怀疑者喜欢说“HTML5 还没有准备好”。本周，我看到一篇报道称，HTML5 在未来 10 年内都不会“准备好”。对此，我反问：“准备好做什么？”当然，还有很多 API 正在开发中，但对于许多场景来说，HTML5 已经可以使用了。对于许多其他场景，它现在已经可以开发了，并且在不久的将来就可以投入使用。
最近，Mozilla Apps Native Install Experience 被引入 Firefox Nightly 频道。（在此阅读有关 Firefox 发布频道的更多信息。）
此功能使我们能够在 Windows 或 Mac 上以原生启动体验安装 HTML5 应用程序（Linux 和 Android 即将推出）。
一个好方法是简单地将您的应用程序列入 Mozilla Marketplace。Marketplace 很快就会向公众开放，开发者现在可以在 Marketplace 生态系统门户 上提交他们的应用程序。除了要提交的应用程序之外，您还需要一组 BrowserID 凭据。
面向 Mozilla Web Runtime 的 HTML5 应用程序包含一个清单文件。
清单只是一个声明应用程序某些数据的 JSON 文件。
这是来自示例应用程序的清单文件。您可以在此处了解有关 Mozilla 应用程序清单的更多信息。
{
"version": "1.0",
"name": "KO Round Timer",
"description": "A Workout Timer for Fighting Athletes!",
"icons": {
"128": "/images/icon-128.png"
},
"developer": {
"name": "Joe Stagner",
"url": "http://koscience.com"
},
"installs_allowed_from": [
"http://timer.koscience.com",
"https://marketplace.mozilla.org"
],
"default_locale": "en"
}
JSON 不需要用 CRLF 格式化。上面显示的 JSON 只是为了简化显示而进行了格式化。
请注意上面的第 12 行，它指定了应用程序可以从哪里安装。
Mozilla Web Runtime 包含一个 apps 对象（winbow.navigator.mozApps）。mozApps 对象（目前在 Windows 和 Mac 上的 Firefox Nightly 中实现）具有一个方法来安装应用程序。我们将在稍后查看使用该 API 的代码。
如果您希望您的应用程序从 Mozilla Marketplace 安装，则不需要编写任何安装代码。当您在 Marketplace 中列出您的应用程序时，Marketplace 会为您的应用程序创建一个列表页面，该页面包含一个安装按钮。
当点击安装按钮时调用的生成代码会告诉运行时安装应用程序。运行时会获取应用程序的清单，并会检查应用程序是否允许从请求安装的域安装，以及其他检查。
如上所述，您可以在清单中看到第 14 行指定应用程序可以从“https://marketplace.mozilla.org”安装。
但是，您可能希望允许用户从其他域安装您的应用程序，例如您自己的网站。
您可以在我们上面列出的示例清单中看到第 13 行，其中“http://timer.koscience.com”也被指定为有效的“安装来源”位置。我可以指定任意数量的域，以授权其从这些域安装应用程序，并且支持通配符。
但是，如果我们要从自己的网站安装应用程序，则需要自己实现安装逻辑。
我们可以创建一个与 Mozilla Marketplace 上的应用程序列表页面类似的页面，或者使应用程序“自动安装”，这意味着我们可以自己在应用程序中实现安装逻辑。
例如，请看下面的 Workout Timer 应用程序。
请注意计时器底部的导航按钮行。
最右边的一个按钮是“安装我”。
安装按钮应该只在应用程序在支持 mozApps 运行时的环境中运行时显示。由于此应用程序（K.O. Timer）是一个 HTML5 应用程序，因此它可以在任何兼容 HTML5 的浏览器中运行，但只有在支持 mozApps 的浏览器/运行时中运行时才能“安装”。
我们也不希望安装按钮在应用程序已安装的情况下显示。
这是一个用于测试运行时支持和安装状态的 JavaScript 方法。
如果存在运行时支持并且应用程序未安装，则会显示一个安装按钮。
在某些情况下，您可能选择不显示可选的安装按钮，而是在应用程序未安装的情况下直接启动安装程序。
（此代码使用 jQuery）
function TestAppInstalled() {
if ((!navigator.mozApps) || (!navigator.mozApps.getSelf)) {
/*-----------------------------------------------------------+
|| Test to see if the Mozilla Apps Web Runtime is supported
|| HACK: Testing for either mozApps OR mozApps.getSelf is a
|| hack.
|| This is needed because some pre-beta versions of Firefox
|| have the object present but nit fully implemented.
|| TODO: Update when Firefox Desktop & Mobile are complete.
------------------------------------------------------------*/
return;
}
var MyAppSelf = navigator.mozApps.getSelf();
MyAppSelf.onsuccess = function() {
if (! this.result) {
// Application is not "installed"
$('#InstallButton').show();
}
else {
// This "MozApp" is already installed.
}
return;
}
MyAppSelf.onerror = function() {
alert('Error checking installation status: ' +
this.error.message);
return;
}
}
当用户点击安装按钮时，会调用以下代码。
$('#InstallButton').click(function() {
var installation = navigator.mozApps.install(
"http://timer.koscience.com/kotimer.webapp");
installation.onsuccess = function() {
$('#InstallButton').hide();
alert("K.O. Timer has been successfully installed.....");
}
installation.onerror = function() {
alert("APP: The installation FAILED : " + this.error.name);
}
});
因此，当用户在支持 mozApps 的浏览器（目前是 Firefox Nightly）中导航到 K.O. Timer 应用程序（timer.koscience.com）并点击“安装我”按钮时，mozApps 运行时会启动安装程序。
在用户点击上面图片中显示的对话框中的“安装”按钮后，会调用安装程序，安装完成后，用户会获得原生启动体验。
在 Windows 上，您会获得一个桌面快捷方式。
以及一个开始菜单项。
当然，应用程序现在也位于用户的 Mozilla MyApps 集合中。
重要的是要记住，尽管这些启动器已在用户的系统上创建，但应用程序本身仍然存在于云中。开发人员可以选择通过其他 HTML5 功能（如 AppCache、LocalStorage 或 IndexedDB）为其应用程序添加“离线”功能。
能够为 HTML5 应用程序提供原生启动器，再加上 Mozilla Marketplace 公开发布后（在不久的将来）将可用的庞大 HTML5 应用程序分发机制，为构建基于标准的应用程序的开发者创造了巨大的机遇。
23 条评论