使用本机功能扩充webapp - 使用Rails Web应用程序应用程序搭建PhoneGap的InAppBrowser javascript [英] Augmenting a webapp with native capabilities - Bridging PhoneGap's InAppBrowser with Rails web app application javascript

问题描述

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

I have written a simplistic chat application using Rails 3 and JQuery Mobile, you can have a look at the prototype here : http://budz.vdsites.com

这是usefelness，但是作为一个纯粹的网络应用程序是相当有限，我想包括一些本地移动功能，如通知，图片上传（通过图库或相机），联系人抓取和可能更多的后来。我也计划为台式机部署类似的增强型客户端，使用相同的前端。

It's usefelness however is pretty limited as a mere web app, and I'm looking to include some native mobile capabilities such as notifications, picture uploading ( through the gallery or the camera ), contacts fetching and maybe more to come after that. I am also planning to deploy a similar enhanced client for desktops, using the same front end for both.

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

One important requirement is to be able to write the minimal required code to enable those abilities, as I could support more than a platform set and then maintaining every code base will become tedious.

经过一番研究后，我最好的打算是基于PhoneGap的无铬本地应用程序，只有足够的功能在手机端启用这些额外的功能。为此，InAppBrowser窗口小部件似乎完全适合该作业。

After some research it turns out my best bet would be a PhoneGap based chromeless native app, with just enough functionality in the phone-side to enable those extra functionalities. For this, the InAppBrowser widget seems to be perfectly adapted to the job.

但是，进一步查看它的API，似乎没有任何设施启用基本除了基本负载相关的事件之外，本地应用程序和网络应用程序之间的通信，除非我大量地攻击我的应用程序来触发这些事件，我看来是很无聊的。

However, looking into it's API further, it seems that there's next to no facility to enable a basic communication going between the native application and the web app, except the basic load related events which are useless to me unless I hack my application massively to trigger these events ( and it looks pretty bogus to do so ).

最终，我想能够在PhoneGap端听到自定义事件，并从webapp中触发它们。

Ultimately, I would like to be able to listen to custom events on the PhoneGap side, and trigger them from the webapp.

用一些线索实现所需的功能：

I came up with some leads to achieve the required functionality :

• 我可以创建一个DOM元素来使用它的属性作为介质在本机端和web应用程序 - 但是似乎没有办法从外部访问DOM它的容器。


• 我可以听到一些特定的端点在我的webapp从phoneGap，在inAppBrowser并且基于服务器响应触发本机功能 - 这肯定有效，但它意味着我必须为其他平台编写不同的侦听代码，从而轻微地打破我最小的编码要求。

这里是我的问题：

• 是否有办法实现我想要的行为使用PhoneGap？


• 您对我的两种建议方法有什么看法？


• 我应该寻找另一个平台吗？


• 社群对此有何建议？

• Is there a way to achieve the behaviour I want ( Event dispatching ) using PhoneGap ?
• What do you think about my two suggested approaches ?
• Should I look for another platform ? What do you suggest ?
• What's the community take on this ? How do you handle such cases ?

感谢您提供的任何洞察！

Thank you for any insights you can provide !

推荐答案

1. 我不知道这是否内置，但是，你可以很容易地
   注入自己的自定义在页面中使用
   打开的脚本InAppBrowser，至少在Android上（目前还不清楚其他
   平台）。此功能尚未记录，但
   是在移动规范测试套件中的测试，它
   看起来很容易：
   https://github.com/apache/cordova-mobile-spec/blob/master/inappbrowser/index.html#L165
   他们只是调用 inAppBrowser.injectScript（）。如果你看一下
   的页面，你会发现他们通过注入这个代码很容易操作外部web
   页面的DOM：

1. I'm not sure if this is built in yet, however, you can pretty easily inject your own custom scripts inside the page that you open up with InAppBrowser, at least on Android (not sure about the other platforms at the moment.) This feature hasn't been documented yet, but there are tests for it in the mobile-spec test suite and it looks pretty easy: https://github.com/apache/cordova-mobile-spec/blob/master/inappbrowser/index.html#L165 They are just calling inAppBrowser.injectScript(). If you look on that page, you'll see that they are manipulating the external web pages' DOM pretty easily by injecting this code:

             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 。I
假设你可以这样做，将事件写入外部页面中隐藏的
DOM元素中的队列中，并将事件从此队列中拉出
你的inAppBrowser来处理它们似乎有点janky
虽然，我尝试注入全局变量，你可以访问
从JavaScript页面，但没有太多运气...有
可能SOME方法来做这个，如果我想出任何我会
一定要编辑这篇文章。

and injecting it with: iab.executeScript({code:code},callback. I suppose you could do this to write events into a queue in a hidden DOM element in the external page and pull the events off this queue from your inAppBrowser to process them. It seems a little janky though. I tried injecting global variables that you could access from either JavaScript page but was not having much luck...there's probably SOME way to do this though, if I come up with anything I'll be sure to edit this post.

第一种方法是我在上面建议使用一个隐藏的外部页面并写入事件/命令，然后在Cordova代码中读取和解释。对于第二种方法，我不明白你的建议或为什么你

The first approach is pretty much what I suggested above. I'd use a hidden in the external page and write events/commands into it that you then read and interpret in the Cordova code. For the second approach, I don't understand what you are suggesting or why you would have to write different code for different platforms.

对不起，我真的没有其他建议，我认为Cordova / PhoneGap是你最好的选择因为在所有平台上使用同一组Cordova API在同一个本地功能的多个平台上创建应用程序会很容易。

Sorry I don't really have any other suggestions. I think Cordova/PhoneGap is the best choice for you since it will be easy to create an app on multiple platforms with the same native functionality using the same set of Cordova API's across all of the platforms.

你正在尝试做什么（从InAppBrowser中打开的外部页拦截JavaScript事件）可能是一个非常有用的概念和想法。我见过其他人也要这样。我认为如果它不可能已经（它可能是，我会继续搞乱它），可能有计划在pipleine它。您可以针对Cordova创建针对此功能的功能请求，并查看其接收情况。

I think what you are trying to do (intercept JavaScript events from the external page opened in the InAppBrowser) is probably a pretty useful concept and idea. I have seen other people asking for this too. I think that if it is not possible already (it might be, I'll keep messing around with it) that there might be plans for it in the pipleine. You could create a feature request against Cordova for this functionality and see how well it is received.

这篇关于使用本机功能扩充webapp - 使用Rails Web应用程序应用程序搭建PhoneGap的InAppBrowser javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！