最近我们一直在谈论很多关于 Open Web Apps、Firefox OS 的内容，并且我想要介绍如何开始，以及可能更重要的是为什么。

为什么选择 Web 应用程序？

如果我们看一下移动开发的环境，通常开发者需要在选择平台和技能之间做出选择。可能选择 iOS 和 Objective-C，或者 Android 和 Java。

当然，这里最大的挑战是，如果你想要在多个平台上发布你的内容，你只有几种选择

• 选择一个平台，忽略其他平台
• 学习多种编程语言
• 为每个平台建立独立的开发团队

对于大型组织来说，拥有多个团队是他们可以做到的，而许多其他组织则难以做到。当然，许多移动应用程序是在公司/服务网站之外的，这只是在需要维护、支持和开发的事物之上增加了越来越多的内容。

因此，出于节省成本、简化单一开发语言等原因，许多开发者转向了 PhoneGap、Titanium 等选项，从而使用 HTML5 和 JavaScript 进行开发，然后将其打包到各种移动操作系统中。

这是一种不错且有趣的方法，但在大多数情况下可能远非最佳选择。我们 Mozilla 希望你能够利用你现有的 Web 开发技能，但我们不希望你为了使其正常工作而跳过障碍，我们希望平台能够不断发展，为你提供更多可能性和功能。

这是通过向你作为开发者提供大量 WebAPIs、Web Activities 等实现的，使 Web 层成为它应有的强大平台。

Open Web Apps 的理念不是让你选择一个新的平台，更糟糕的是排除其他平台，相反，它是关于让你能够重用你现有的代码，并且如果需要，可以进行一些小的改动使其可以作为应用程序安装。

我应该构建一个应用程序吗？

虽然许多其他平台都非常渴望让你绑定到他们的平台，将你的应用程序发布到他们的应用商店等，但我更倾向于说你首先需要问自己的问题是

我真的需要将它做成一个应用程序吗？

在某些情况下，当然可以！但在其他情况下，你需要保持专业，并得出结论，它可能不会增加任何额外价值 - 在一些用例中，你不需要做应用程序，如 No, I’m not going to download your bullshit app 和 Packaged HTML5 Apps: Are we emulating failure? 等文章中所述。

我不想欺骗你为了应用程序而构建应用程序，或者只是因为其他人正在构建而构建。我更希望看到你进行合理的评估，如果你的应用程序想法能够为最终用户和整体用户体验提供一些额外的东西，那么你应该考虑做应用程序。

那么，这些情况可能是哪些？其中一些可能是

• 你想要提供比从网页提供的更丰富的体验，例如访问特定于平台/设备的一些 WebAPIs
• 你需要在 localStorage 或 IndexedDB 中存储大量信息
• 用户想要进行真正的安装
• 用户想要在他们的主屏幕/桌面上有一个漂亮的图标，以便更轻松地访问

Open Web Apps 的类型

你可以安装两种基本的 Open Web Apps 类型

• 托管应用程序
• 打包应用程序

托管应用程序

托管应用程序是在应用程序上下文中从 URL 运行的应用程序。这意味着你需要在线才能运行它，并且所有资源（例如文件、图像等）将驻留在你的服务器上，以及你将托管它的位置。

避免连接需求的一种选择是 确保你的应用程序可以在脱机状态下运行。这可以通过添加一个包含要脱机提供的资产列表的 appcache 文件，然后从你的主页面引用它来实现

HTML 文件

Appcache 文件

CACHE MANIFEST
# Version 1.0

index.html
css/base.css
js/base.js
js/webapp.js
js/offline.js

NETWORK:
*

FALLBACK:
/ fallback.html

为了更多地了解脱机支持和注意事项，我强烈建议你查看这些资源

• Application Cache is a Douchebag
• Appcache 事实

优点

• 你完全控制更新过程
• 只需运行/重用当前的现有代码

缺点

• 需要连接（如果未实现脱机支持）
• 不像打包应用程序那样可以访问那么多 API

打包应用程序

打包应用程序 是将所有资产放在 ZIP 文件中，然后将其作为要安装的完整包提供。这使得这些文件始终可用，并且还为你提供了更高的权限 - 即你可以访问更多 API - 因为所有代码都可以在安装之前进行安全清除。

优点

• 默认情况下可以在脱机状态下使用
• 更多 API 访问权限

缺点

• 更难维护
• 发布新版本的更新过程

最终，你需要评估你的需求、工作流程、你需要使用的 API 等，才能做出是否使用托管应用程序或打包应用程序的良好决策。

Open Web Apps 入门

在说了这么多之后，你实际上需要什么才能构建 Open Web App？事实证明，并不多。我们在 MDN 上的 构建应用程序入门 文档中对此进行了说明，但我还想在这里简要介绍一下。

基本上，你只需获取你现有的网站/服务，并添加一个清单文件即可。就是这样！是的，真的。当然，还需要将其安装。

清单文件

清单文件描述了你的应用程序，包括名称、图标、开发者等，还包括本地化支持、启动路径、对某些 API 的权限请求等等。所有清单字段都可以在 MDN 上的应用程序清单 中找到。

一个简单的清单可能如下所示

{
    "version": "1",
    "name": "Firefox OS Boilerplate App",
    "launch_path": "/Firefox-OS-Boilerplate-App/index.html",
    "description": "Boilerplate Firefox OS app with example use cases to get started",
    "icons": {
        "16": "/Firefox-OS-Boilerplate-App/images/logo16.png",
        "32": "/Firefox-OS-Boilerplate-App/images/logo32.png",
        "48": "/Firefox-OS-Boilerplate-App/images/logo48.png",
        "64": "/Firefox-OS-Boilerplate-App/images/logo64.png",
        "128": "/Firefox-OS-Boilerplate-App/images/logo128.png"
    },
    "developer": {
        "name": "Robert Nyman",
        "url": "http://robertnyman.com"
    },
    "installs_allowed_from": ["*"],
    "default_locale": "en"
}

将此文件保存为 .webapp 扩展名，例如 manifest.webapp。这里需要注意的一点非常重要，即此文件需要使用 Content-type: application/x-web-app-manifest+json 提供。

你需要在你的服务器上进行设置，例如通过 Apache 中的 .htaccess 文件 进行设置

AddType application/x-web-app-manifest+json .webapp

一旦有了清单文件，请务必 验证你的应用程序，以确保它具有正确的格式。

安装应用程序

现在你的清单文件已准备就绪，并且使用正确的 Content-type 提供，让我们提供一种安装它的方法。在你的网页中，你可以添加一个安装按钮，该按钮会调用此代码

var installApp = navigator.mozApps.install(manifestURL);

// Successful install
installApp.onsuccess = function(data) {
    console.log("Success, app installed!");
};

// Install failed
installApp.onerror = function() {
    console.log("Install failednn:" + installApp.error.name);
};

确保清单文件的 URL 是绝对的 - 一个简单的方法是从当前页面（包含安装按钮的页面）中提取 URL，并将 manifest 文件放在同一个位置

var manifestURL = location.href.substring(0, location.href.lastIndexOf("/")) + "/manifest.webapp";

此外，你还可以为 install 方法提供第二个参数 receipts，它是一个 JSON 对象。有关更多信息，请参阅 install 方法的文档。

安装打包应用程序

上面的解决方案（包含清单文件和安装调用）适用于托管应用程序。对于打包应用程序，你需要执行一些额外的步骤

将所有应用程序内容打包为 ZIP 文件

确保将所有文件（而不是包含文件夹）打包为 ZIP 文件，包括常规清单文件。清单文件必须命名为 manifest.webapp

创建迷你清单

创建另一个清单文件，例如名为 package.webapp，并确保 package_path 是指向 ZIP 文件的绝对路径。

此外，开发者名称和信息必须在迷你清单和 ZIP 文件中的常规清单之间保持一致。

{
    "name": "Firefox OS Boilerplate App",
    "package_path" : "http://localhost/Firefox-OS-Boilerplate-App/Firefox-OS-Boilerplate-App.zip",
    "version": "1",
    "developer": {
        "name": "Robert Nyman",
        "url": "http://robertnyman.com"
    }
}

安装包

现在，你不再使用常规的 install 方法，而是调用 installPackage 方法，它指向迷你清单，而迷你清单又指向 ZIP 文件/包

var manifestURL = location.href.substring(0, location.href.lastIndexOf("/")) + "/package.webapp";
var installApp = navigator.mozApps.installPackage(manifestURL);

启用开发者模式

为了使这在 Firefox OS 模拟器 中正常工作，你需要启用开发者模式

Settings > Device Information > More Information >
Developer > Developer mode

注意：这仍在开发中，该选项的可用性可能会有所不同，并且可能在你的模拟器版本或实际 Firefox OS 设备中不可用。

所有 Firefox OS 模拟器的发布版本和预发布版本都可以在 Mozilla 的 FTP 上找到。

指定权限

如果你打算使用一些只有打包应用程序才能访问的 API，你需要在你的常规（manifest.webapp）文件中添加几项内容

• 添加 type 属性（例如“type” : “privileged”）
• 指定权限访问

"permissions": {
    "contacts": {
        "description": "Required for autocompletion in the share screen",
        "access": "readcreate"
    },
    "alarms": {
        "description": "Required to schedule notifications"
    }
}

还有一个有趣的选项，即 packaged-app-server，它允许在运行时请求文件时将其打包为 ZIP 文件。

$ cd ~/myapp
$ python ~/serve_packaged_apps.py

示例应用程序

作为示例应用程序，如果你想查看一些容易分析、调整和入门的内容，请随时测试 Firefox OS Boilerplate App。它支持

• 一个安装按钮，允许你将其作为托管应用程序安装
• Web Activities - 大量示例和用例
• 实际操作中的 WebAPIs
• 脱机支持（默认情况下已禁用）
• 打包应用程序 - 将你的应用程序作为 ZIP 文件安装

哪些平台受支持？

让我们看一下目前 Open Web Apps 所处的状态。它们在以下平台上受支持

Firefox OS

你可以在 Firefox OS（模拟器或设备上）中安装 Open Web App，并且大多数 WebAPIs 和 Web Activities 都会正常工作。

Android 版 Firefox

在Android 版 Firefox 中，您可以安装应用程序，并将其安装在您的主屏幕上，并使用正确的图标。但是，它不支持 WebAPIs 和 Web 活动。

桌面版 Nightly/Aurora 版本

您可以在Firefox Nightly/Firefox Aurora 中安装和运行独立应用程序，但它无法访问许多 WebAPIs，并且没有 Web 活动。

目前，初始重点是支持移动设备，但希望和目标是通过添加对所需 API 和更多功能的支持，使开放式网络应用程序能够在所有平台和设备上运行。

市场

关于开放式网络应用程序，您可以从任何地方使用或安装它们。完全取决于您。但是，如果您有兴趣被列出、托管等等，我建议您看看Firefox 市场。

您还可以访问开发者中心，获取有关应用程序开发的更多信息。

结论

开放式网络应用程序并非要改变您的开发方式，它们是让您可以选择将现有的 Web 解决方案安装为应用程序、访问设备特定的 API 等等。

不要重新发明轮子，只需让它更强大！