如何使用 manifold.JS 在 Android、iOS 和 Windows 上构建托管 Web 应用

Jeff Burtoft

0/5 (0投票)

2015 年 6 月 23 日

CPOL

6分钟阅读

13543

为什么你应该使用托管 Web 应用以及如何使用 manifoldJS 为自己构建一个应用。

最近在 //BUILD/ 2015 大会上，微软发布了 manifoldJS – 这是在跨平台构建托管应用最简单的方式。虽然微软开发者平台的技术研究员兼首席技术官 John Shewchuk 在台上出色地构建了一个托管 Web 应用（你可以在这里查看回顾），但我想更详细地介绍一下：为什么选择托管 Web 应用以及如何使用 manifoldJS 为自己构建一个应用。

为什么选择托管和 manifoldJS？

托管 Web 应用以最小的努力将 Web 的最佳特性带到应用商店中。它们是利用你已经构建的体验获得更多用户触达的好方法。当你更新 Web 体验时，你的用户在托管 Web 应用中也会获得相同的更新！问题是，直到现在，托管应用最困难的地方在于每个平台上的流程都是如此不同。manifoldJS 通过将重点放在 W3C Web 应用清单上，改变了这一现状——这是一种标准驱动的开源应用创建方法——然后使用该元数据在 Android、iOS 和 Windows 上创建托管原生应用。当平台支持托管应用时，我们原生构建它，然后我们使用 Cordova 为没有原生支持的平台进行 polyfill。

manifoldJS 入门

基本上有两种方法可以开始。如果你是一名命令行中的 Web 开发者，请从 CLI 界面开始。对于希望在云中运行 manifoldJS 的开发者，我们的网站上也有相同的工具。

你要做的第一件事是为你的网站创建一个清单。这对于 Web 开发者来说应该非常熟悉，因为它是一个相当简单的 JSON 对象。这是本网站的一个示例

{
"name": "This Here Web",
"short_name": "THW",
"icons": [
{
"src": "images/tiny.png",
"sizes": "70x70",
"type": "image/png"
}
],
"start_url": "index.html",
"scope":"http://*.thishereweb.com"
"display": "standalone",
"orientation": "landscape"
}

有关构建清单文件的更多详细信息，包括如何从 Web 服务器提供它，请查看这篇关于清单的文章。如果您需要一些帮助来构建该清单，请尝试manifoldjs.com 网站上的代码生成器。我们将通过向导引导您了解所需的参数，最后为您提供一个完整的网站清单。

使用 CLI 工具

ManifoldJS 运行在熟悉的技术之上。唯一的要求是您已安装 node.js。ManifoldJS 可以在任何系统（mac、linux、windows）上运行，但只能为该系统支持的平台构建应用。

安装工具

C:\> npm install manifoldjs

C:\> grunt manifoldjs

ManifoldJS 将通过 NPM 处理所有依赖项的安装。从那里，您只需传入您的网站

C:\> ManifoldJS http://www.thishereweb.com

接下来会发生两件事中的一件

如果您的网站上有清单，它将下载清单以及相应的图像，并从中构建应用程序。
如果您的网站上没有清单，我们将简单地假设一些默认数据，并为您生成应用程序以及清单。我们还将使用占位符图像，以便我们仍然可以构建工具。

如果您想查看发生了什么，只需打开一些日志记录并密切关注控制台。除了日志记录，我们还有许多其他选项可以设置以控制工具的输出

参数

参数	描述
<网站网址>	（必填）托管网站的 URL
-m\|–manifest	（可选） W3C Web 应用清单文件的位置（URL 或本地路径）。如果未指定，工具会在网站 URL 中查找清单。否则，将创建一个指向网站 URL 的新清单。
-d\|–directory	（可选）生成的项目文件的路径（默认值：当前目录）
-s\|–shortname	（可选）应用程序短名称。指定时，它会覆盖清单的 short_name 值
-l\|–loglevel	（可选）跟踪日志级别选项可用日志级别：debug,trace,info,warn,error（默认值：warn）
-p\|–platforms	（可选）要生成的平台。支持的平台：windows,android,ios,chrome（默认值：所有平台）
-b\|–build	（可选）强制构建过程

使用基于网络的清单生成器

所有这些强大的功能也都在我们的基于网络的工具中提供。访问网络生成器并开始使用。

完成这些步骤后，只需单击最后的下载，包含所有软件包的 zip 文件将发送给您。

您的应用“范围”

Web 应用清单允许您指定应用的“范围”。这有助于确定您的应用在何处结束，开放 Web 在何处开始。只有在您范围内的 URL 才会显示在应用中。如果您使用多个域，或者从我们的域调用内容，只需在清单中添加 URI 访问值。

更强大的原生 API Web 体验

作为 Web 开发者，我们一直在寻求能够帮助我们模糊原生应用和 Web 功能集之间界限的 API。托管 Web 应用在大多数平台上都是受信任的环境，代码直接与开发者相关联。因此，一些平台允许您访问在浏览器中无法触及的原生 API。

在 Android、iOS 和 Windows 上，我们使用 Cordova 为托管应用提供 polyfill。这样做的额外优势是您可以将 Cordova JS 文件添加到您的网站并在您的托管应用中使用这些 API。但是，在 Windows 10 中，您实际上可以访问 Windows 通用应用的整个 API 表面，这包括从蓝牙到低级人机界面的所有内容。要为您的应用允许这些 API，只需将其添加到您的清单中

"mjs_urlAccess": [

{ "url": "http://manupjs.azurewebsites.net/" },

{ "url": "http://www.manifoldjs.com/" }

],

通过设置访问规则，我们将启用 API，供您直接调用或通过 Cordova API 调用。

后续步骤

我们正在努力使构建托管 Web 应用的过程变得更加简单，但目前仍有少数最后步骤需要开发者完成。对于每个平台，我们都提供了如何部署到每个应用商店的指南。测试是应用开发的重要组成部分，我们还提供了充分利用托管 Web 应用的技巧和建议。此外，所有应用都必须提交到相应的应用商店，我们也会为您指明正确的方向。

最终想法

托管 Web 应用允许您在开发商店应用的同时保持 Web 的完整性和独特性。现在，使用 manifoldJS 开发这些应用变得更简单了。您专注于 Web 标准，剩下的我们来做。