使用本机功能增强 Web 应用程序 - 将 PhoneGap 的 InAppBrowser 与 Rails Web 应用程序应用程序 javascript 桥接答案

【问题标题】：Augmenting a webapp with native capabilities - Bridging PhoneGap's InAppBrowser with Rails web app application javascript使用本机功能增强 Web 应用程序 - 将 PhoneGap 的 InAppBrowser 与 Rails Web 应用程序应用程序 javascript 桥接
【发布时间】：2013-04-25 10:28:23
【问题描述】：

我使用 Rails 3 和 JQuery Mobile 编写了一个简单的聊天应用程序，您可以在这里查看原型： http://budz.vdsites.com

它的用处非常有限，但作为一个纯粹的网络应用程序，我希望包含一些原生移动功能，例如通知、图片上传（通过图库或相机）、联系人获取以及之后可能会出现的更多功能.我还计划为桌面部署一个类似的增强客户端，两者使用相同的前端。

一个重要的要求是能够编写最少的代码来启用这些功能，因为我可以支持的平台集不止一个，然后维护每个代码库将变得乏味。

经过一些研究，我发现我最好的选择是基于 PhoneGap 的无铬原生应用，在手机端具有足够的功能来启用这些额外的功能。为此，InAppBrowser 小部件似乎非常适合这项工作。

但是，进一步研究它的 API，似乎几乎没有工具可以在本机应用程序和 Web 应用程序之间进行基本通信，除了基本的负载相关事件，除非我破解我的应用程序，否则这些事件对我来说毫无用处大规模触发这些事件（这样做看起来很假）。

最终，我希望能够在 PhoneGap 端监听自定义事件，并从 web 应用程序触发它们。

我想出了一些实现所需功能的线索：

我可以创建一个 DOM 元素以将其属性用作本机端和 Web 应用程序之间的媒介 - 但似乎没有办法从其容器外部访问 DOM。
我可以在 inAppBrowser 之外的 phoneGap 监听我的 webapp 中的一些特定端点，并根据服务器响应触发本机功能 - 这确实有效，但这意味着我必须为其他平台编写不同的监听代码，因此会稍微中断我的最低编码要求。

这是我的问题：

有没有办法使用 PhoneGap 实现我想要的行为（事件调度）？
您如何看待我提出的两种方法？
我应该寻找另一个平台吗？你有什么建议？
社区对此有何看法？您如何处理此类案件？

感谢您提供的任何见解！

【问题讨论】：

标签： javascript ruby-on-rails cordova jquery-mobile

【解决方案1】：

我不确定这是否已内置，但是，您可以很容易地在您打开的页面中注入您自己的自定义脚本 InAppBrowser，至少在 Android 上（不确定其他目前的平台。）此功能尚未记录在案，但是在 mobile-spec 测试套件中有针对它的测试，它看起来很简单： https://github.com/apache/cordova-mobile-spec/blob/master/inappbrowser/index.html#L165 他们只是打电话给inAppBrowser.injectScript()。如果你看该页面，您会看到他们正在操纵外部网络通过注入以下代码，页面的 DOM 非常容易：
```
             var code = '(function(){\n' +
              ' var header = document.getElementById("header");\n' +
              ' header.innerHTML = "Script literal successfully injected";\n' +
              ' return "abc";\n' +
              '})()';
```
并将其注入：iab.executeScript({code:code},callback。一世假设您可以这样做以将事件写入隐藏的队列中外部页面中的 DOM 元素并将事件拉出此队列从您的 inAppBrowser 处理它们。似乎有点笨拙尽管。我尝试注入您可以访问的全局变量来自任何一个 JavaScript 页面，但运气不佳......有可能有一些方法可以做到这一点，如果我想出什么我会请务必编辑此帖子。
第一种方法与我上面建议的差不多。我会使用隐藏在外部页面中的内容并将事件/命令写入其中，然后您可以在 Cordova 代码中读取和解释。对于第二种方法，我不明白您的建议或为什么必须为不同的平台编写不同的代码。
抱歉，我真的没有任何其他建议。我认为 Cordova/PhoneGap 是您的最佳选择，因为使用跨所有平台的同一组 Cordova API 可以轻松地在多个平台上创建具有相同本机功能的应用程序。
我认为您正在尝试做的事情（从 InAppBrowser 中打开的外部页面拦截 JavaScript 事件）可能是一个非常有用的概念和想法。我也看到其他人要求这个。我认为，如果不可能（可能是，我会继续搞砸它），那么管道中可能会有计划。您可以针对 Cordova 针对此功能创建一个功能请求，并查看它的接收情况。

【讨论】：

你的做法很有意思，如果我理解的很好，注入脚本的返回值会传递给回调函数吗？我的第二种方法可能需要更多代码，因为我不一定只部署到 phonegap，因为我也在考虑 Unity Web 应用程序和 Pokki 作为部署手段。例如，我可以添加一些像 /users/4/events 这样的端点，它将输出 JSON 格式的消息，然后从客户端对其进行长轮询，但我必须支持单独的代码库以在各种平台上进行事件管理（例如 PhoneGap、Unity Web App 和 Pokki）
是的，正确，在那个例子中，“abc”将被传回回调函数。
我刚刚对其进行了测试，它的工作方式符合我的要求！谢谢你的领导！

【解决方案2】：

还有另一种更以服务器为中心的混合 Web 应用方法，称为 BridgeIt：http://bridgeit.mobi。您可以非常轻松地为 Android、iOS 或 Windows Phone 8 上的任何 Web 应用程序添加本机支持。它是一个简单的 javascript api，允许您访问各种原生移动功能，如相机、摄像机、联系人等。它有一个很棒的 web/native 通知平台。

【讨论】：

链接没有意义。