logo
二维码
banner图

七行JSON代码将你的网站变成移动应用

2023-01-08 11:26

本文介绍了借助 Jasonette 将 Web 视图和原生组件融合构建真正“混合”应用的做法。

如果我告诉你,只需要 上述 7 行橙色的 JSON 代码 就可以将一个网站变成移动应用,你相信吗?完全不需要使用某种框架 API 重写网站,就可以获得与移动应用相同的行为。如果你已经有一个现成的网站,只需要简单地引用 URL 就可以将其“打包”为原生应用。

而如果在此基础上,只需要略微调整 JSON 代码内容,就可以直接访问所有原生 API、原生 UI 组件以及原生视图切换(View Transition)。

最简化的范例效果如下图所示:

从中可以看出,我嵌入了一个 GitHub.com 的 Web 页面,但界面上其余布局均为原生 UI 组件,例如 导航条 以及 底部的标签栏。而我们并不需要使用任何 API 重写网站,就可以自动获得原生的切换效果。

在介绍具体做法前你可能会问:“看着挺酷,但除了在原生应用框架内展示 Web 页面之外,这种技术还有什么意义?”

问得好!这也是本文要讲的重点。我们只需要创建一个无缝的 Web 视图与应用间双向通信,借此,父应用就可以触发 Web 视图内的任何 JavaScript 函数,随后 Web 视图即可从外部调用原生 API。

例如:

请注意,这个视图包含:
  • 原生导航条,以及内置的切换功能
  • 一个 Web 视图,其中嵌入了一个可以生成二维码的 Web 应用
  • 在底部包含一个原生的文字输入组件
上述所有这一切只需要略微调整 JSON 代码的属性即可实现。

最后请注意,随着在文字输入区输入不同内容,二维码也会产生相应变化。输入的文字可触发二维码生成器 Web 应用内部的 JavaScript 函数重新生成二维码图像。

目前还没有任何一个开发框架曾试图从根本上解决“Web 视图与原生应用无缝集成”的问题,因为这些框架都专注于完全原生,或完全 HTML5 的做法。

无论什么时候当我们听到有人讨论移动应用的未来时,很可能会听到类似“到底是 HTML5 还是原生方法会最终胜出呢?”这样的说法。

似乎没人觉得native和html可以共存,而且二者的协同和最终实现似乎也并不容易。

本文我将要介绍:
  • 为何 Web 引擎与原生组件的融合通常是一种更好的做法。
  • 为何 HTML 与原生的无缝集成那么难,具体又该如何实现。
  • 更重要的是,该如何使用这样的技术快速构建自己的应用。
为何要在原生应用中使用 HTML?

在进一步介绍前,首先一起看看这样做是好是坏,以及什么时候适合使用这种方法。这种做法的一些潜在用例如下:

1. 使用 Web 原生功能

应用中的部分内容使用 Web 引擎来实现也许是一种更适合的做法。例如 WebSocket 是一种原生的 Web 功能,主要面向 Web 环境而设计。这种情况下就更适合使用内建的 Web 引擎(iOS 的 WKWebView 以及 Android 的 WebView),而非安装某些只能“模拟”WebSocket 的第三方库。

无需额外安装任何代码,使用免费工具即可实现目标,这样岂不是更好。同时这也催生了下一个原因。

2. 避免二进制文件体积过大

有些功能也许需要借助庞大的第三方库,而你可能希望能快速用上这样的功能。

例如,为了以原生方式包含二维码图像生成器,可能需要安装某些第三方库,这会导致二进制文件体积增大。但如果使用 Web 视图引擎并通过一个简单的<script src>调用 JavaScript 库,就可以免费实现这一切,并且避免了使用第三方原生库。

3. 缺乏可靠的移动库

对于一些前沿技术,可能暂时并不具备稳定可靠的移动端实现。

好在大部分此类技术都具备 Web 实现,因此最高效的集成方法就是使用 JavaScript 库。

4. 构建部分原生,部分基于 Web 的应用

很多新手开发者想要将自己的网站移植为移动应用,但在发现自己现有网站的部分功能过于复杂,无法面向每种移动平台快速重写时,往往会感到沮丧或受挫。

例如你可能有一个非常复杂的 Web 页面无法快速转换为移动应用,但网站的其他内容可以很容易地转换。

面对这种情况,如果通过某种方法将应用的大部分内容以原生方式构建,对于特别复杂的页面直接将其以 HTML 的形式无缝集成到应用中,是不是很棒啊。

这是如何实现的?

A. Jasonette

Jasonette 是一种基于标记语言,构建跨平台原生应用的开源方法。

该技术看似 Web 浏览器,但并不会将 HTML 标记语言解释为 Web 页面,而是会将 JSON 标记解释为 iOS 和 Android 上的原生应用。

正如所有 Web 浏览器都有完全相同的代码,但只要按需解释不同类型的 HTML 标记,即可为用户提供所有不同类型的 Web 应用,所有 Jasonette 应用也有着完全相同的库,可按需解释不同类型的 JSON 标记并创建出你的应用。开发者完全无需触及代码本身,只需要编写标记,将代码实时“翻译”为原生应用,即可开发出自己的应用来。

虽然 Jasonette 的核心作用在于构建原生应用,但本文的重点在于介绍如何将 HTML 集成到核心原生引擎中,接下来就一起了解一下吧。

B. Jasonette Web 容器

原生应用很棒,但有时候我们依然需要使用 Web 功能。

但 Web 视图与原生应用的集成是个麻烦的过程。无缝的集成要求:
  • Web 视图应作为原生布局的一部分进行集成:Web 视图应作为原生布局的一部分纳入应用中,并且操作方式应与其他任何原生 UI 组件保持一致。否则会让用户感觉很笨拙,并且感觉上就像自己实际上是在访问网站那样。
  • 父应用可以控制子 Web 容器:父应用应能随意控制子 Web 视图。
  • 子 Web 容器可触发父应用的原生事件:子应用应该能触发父应用的事件以运行原生 API。
这是一个非常繁重的工作,因此先从第一个环节着手介绍:直接将 Web 容器嵌入原生布局 —并将其作为第 1 版发布:

JSON Web 容器,JSON 中的 HTML 将变为原生应用组件。

仅这一点就已经很实用了,但由于无法交互,依然存在一定的局限。

父应用无法控制子 Web 容器,子容器无法向父应用发送任何事件通知,这 导致 Web 容器与外界完全隔离。

C. Jasonette Web 容器 2.0:使其可交互

发布第 1 版之后,我们开始处理第二个问题:为 Web 容器添加交互能力。

下文将介绍如何为之前创建的静态 Web 容器添加交互能力,让它变得更强大。

实现:交互式 Web 容器

1. 通过 URL 加载

问题

之前在第 1 版中,为了使用 Web 容器作为后台视图组件,我们首先需要将$jason.body.background.type设置为"html",随后在$jason.body.background.text属性下添加硬编码的 HTML 文本,例如这样:

一般来说,人们往往更希望直接使用 Web URL 对容器进行实例化,而不希望将整个 HTML 代码以硬编码的方式作为一行代码加入。

解决方案

Web 容器 2.0 增加了url属性,我们可以嵌入file://形式的本地 HTML,例如这样(可以从伴随应用发布的本地 HTML 文件加载):

或者也可以嵌入远程的http[s]:// URL,例如这样(可以从远程 HTML 加载):

2. 父应用与 Web 容器的双向通信

问题

之前,Web 容器只能用于展示内容,无法交互。这意味着 下列做法全部无法实现:

  • Jasonette 到 Web 容器的通信:从 Jasonette 中调用 Web 容器内部的 JavaScript 函数。
  • Web 容器到 Jasonette 的通信:从 Web 容器代码中调用原生 API。
此时我们只能展示 Web 容器的内容。这就像网页中嵌入的 iframe 框架,主页面完全无法访问 iframe 框架中的内容。

解决方案

Jasonette 最大的目标在于设计一种可以描述跨平台移动应用的标准化标记语言。因此我们需要这个标记语言能够全面地描述父应用和子 Web 容器之间的双向通信。

为此我在父应用和子 Web 容器之间使用了一种基于 JSON-RPC 的通信管道。由于 Jasonette 中的一切都是通过 JSON 对象表达的,因此使用 JSON-RPC 标准格式作为通信协议就成了一种非常自然合理的方式。

为了让 JavaScript 函数能够调用 Web 容器,需要声明一个名为$agent.request的操作:

$agent.request 是一种原生 API,可触发 JSON-RPC 请求并发送给 Web 容器。为了使用该 API,必须将options对象作为参数传递。

options对象实际上是发送给 Web 容器的 JSON-RPC 请求。每个属性的含义如下:
  • id:Web 容器构建在一种名为 Agent 的底层架构基础上,通常来说,我们可以为一个视图使用多个 Agent,每个 Agent 可以有自己的唯一 ID。但 Web 容器是一种特殊类型的 Agent,只能使用 $webcontainer 作为 ID,因此这里需要使用 ID。
  • method:要调用的 JavaScript 函数名称。
  • params:传递给 JavaScript 函数的参数数组。
因此完整来看,所用的标记应该是类似这样的:

这串标记实际上是在说:

当视图加载($jason.head.actions.$load)时,向 Web 容器 Agent 发送一个 JSON-RPC 请求($agent.request),而具体的请求是通过options指定的。

Web 容器在 $jason.body.background 下定义,本例中将会加载一个名为file://index.html的本地文件。

随后会查找一个名为 login 的 JavaScript 函数并传递params下的两个参数("alice"和"1234")。

上文介绍了父应用如何触发子 Web 容器的 JavaScript 函数调用,我们还可以反着来,让 Web 容器触发父应用的原生 API。