InAppBrowser URL schemes

Hello everyone,

I have a difficulty to solve, I use in a project, the Cordova plugin inAppBrowser, on a specific page I have a link to a whatsapp contact starting with "https://web.whatsapp.com/send?phone=xxx"

Opened from browser as you know, automatically from smartphone opens the whatsapp app, this does not happen if the page is opened via plugin inAppBrowser.

To specify better, this link is not a dedicated page, but is located at the end of some steps that the user takes through navigation, in my case the checkout.

There is some method to make the whatsapp app open from browsing with inAppBrowser

Thank you!

Hello Paolo,

If I am not wrong, the Apache Cordova InAppBrowser plugin only deal with the HTTP and the HTTPS schemes. In fact the error that you see say exactly that: "Unknow URL scheme". Can I ask why not to use the system browser instead of the InAppBrowser in this case? On the other hand, I am not sure if you can use "https://web.whatsapp.com/send?phone=xxx", since in this case the URL scheme is "HTTPS", which is supported by the InAppBrowser.

If as you mention the above URL directly redirect (if Whatsapp is installed) to the other URL, which is not supported by the InAppBrowser plugin, then I think the only solution is to use the system browser instead of the InAppBrowser. You can use the InAppBrowser plugin but open the URL in the system browsers:

// In AB2 app.cordova.inAppBrowser.open('https://web.whatsapp.com/send?phone=xxx', '_system'); // In AB1 OpenWindow "https://web.whatsapp.com/send?phone=xxx" "" "_system" ""

---

The point is not to exit the app,

looking for a start (but I still don't solve the problem) By adding to the XML

<preference name = "AllowedSchemes" value = "whatsapp"> `

It no longer gives the error as before, proceeds to the whatsapp screen to send the message, but clicking continue, it says that whatsapp is not installed.

This is because he is still inside the web view ..

So I ran into other web searches and found a mod that should come close to the solution.

editing the core of plugin InAppBrowser.java

see this please

mod InAppBrowser for Whatsapp and other url schemes

the reasoning seems correct, but I still can't get it to go.

i am directly trying with a link starting with whatsapp: // send? phone = 3xxxxxx & text = hello

PS: I edited this file "compiled \ plugins \ cordova-plugin-inappbrowser \ src \ android \ InAppBrowser.java " as suggested in the post. and insert this

<preference name = "AllowedSchemes" value = "whatsapp"> ` <access origin = "whatsapp: *" launch-external = "yes">

into EXTRA XML

Hello Paolo,

It's possible to edit the source code of a plugin, however, probably it's not the best that we can do, since that can cause problems in the future, for example, when the plugin publish some updates, so our code can be "outdated" at sometime.

I think the solution here is to use the system browser instead of the InAppBrowser plugin. Certainly, that causes that the user leave the app, but, if that work as expected, probably is the best solution, because then we no need to go ahead, edit the plugin's code, etc. What do you think about it?

---

I have to explain how the app works to understand ....

of course, I understand that it took me a bit of imagination to do it this way and it is not ideal.

But I tried to use the few skills I have.

1) Upon opening, it records the deviceid (for notifications) and passes it via parameter through the url inAppBrowser (an ecommerce site)

2) at that point the user browses the site and through cookies keeps in memory the string of the device id, when finalizing the purchase, the value of the cookie is recalled and is saved in the order DB.

(to be clear, the device id is not associated with a user, but with an order, since the site does not provide user registrations)

The last step requires that the user to validate the order, confirms on whatsapp, in this case I have a pre-filled button that redirects to whatsapp with the order summary (all automatic, therefore without having to write everything he bought ).

Now everything works perfectly via the web, if I do as you said, the app would just be a screen with two buttons .... and I would rather not leave the app.

Hello Paolo,

Maybe you can think in a possible way to avoid the usage of Whatsapp? I mean... apparently you use Whatsapp for some kind of order confirmation, but, this can have various problems: the first one what you already see, you must leave the app in order to use the system browser. This is not a real problem to me, even more, if we can't go it working using the InAppBrowser plugin. But another additional problem can be that the user must have installed the Whastapp app in his phone.

So, maybe you can plan another possible way to confirm the user order? I can think in three possible alternatives at this moment. The first one can be to send an EMail to certain account. You can make an HTTP call to some of your server script with the right information and then send an EMail from the server to a certain EMail address. The second alternative that I can think is the usage of push notifications. Again, you can use an HTTP call to some of your server script in order to send a push notification. Who receives that push notification? Another app... who must be installed by the "manager of the orders".

Lastly maybe the "sms:" URL scheme can be used like described here (I am not tested it). The problem with this can be that probably we can't use the InAppBrowser plugin, in the same way that we can't use it with the "whatsapp:" URL scheme. The advantage can be that the "sms:" realy on the system SMS app, which is available by default, that is, the user no need to install it like in the case of the Whastapp app.

What do you think about it, Paolo? Note that the first two possible alternatives do not require that the user leaves the app at all, since you can do it by using HTTP calls to your server, so, you have the control all the time.

---

Hi David, thanks always for your interest

I understand the reasoning and share it. The idea of ​​using whatsapp was born for two reasons.

1) The shop has the certainty of the veracity of the sender's data (phone number), I understand that there are other means, but this is what I like best.

2) For the target that has the store, those who order online are assumed to have whatsapp (which in all cases is not a mandatory step, but it is explained that by doing so the order is faster)

3) The message he sends contains all the elements of the order, with the sms surely it would be too many characters ..

But is there a solution with listening events? of the type I create a button on the web page with an id or class, which when pressed closes the InAppBrowser, and at that point a button appears in the app to send the confirmation via whatsapp

Hello Paolo,

But is there a solution with listening events? of the type I create a button on the web page with an id or class, which when pressed closes the InAppBrowser, and at that point a button appears in the app to send the confirmation via whatsapp

I am not sure if can understand. If you open an URL in the system browser, yes, there is a way to make some kind of communication between the opened URL and the app. However, what I did not understand is that, if I am not wrong, you don't want to open an URL, but, a "special" URL with the "whatsapp:" scheme, which apparently have his own behaviour (open the Whastapp app). So I am not sure if can understand what you mean by "listening events".

If what you are thinking is to open a certain URL (a file, for example, "my-file.php") who receives the right arguments indicating the user's phone, the order details, etc., and then, in that "my-file.php" place a couple of buttons, one to open the Whatsapp, and another to close the opened window, then yes, it's possible to do something, that is, it's possible to place a button in "my-file.php" to close the opened window. But again, I am not sure if this is what you wanted or not.

On the other hand, if when you open the "whastapp:" URL in the system browser, then the system browser automatically opened Whatsapp... why you need to go ahead? I mean... if I am not wrong, what the user see is the Whatsapp app opened, and therefore can continue the order... then he can go back to the app if he wanted. Remember that when you opened the system browser your app is not closed, just placed at the background: it's still available for the user if he want to go back to the app.

---

I try to explain myself better.

1) at the beginning, the customer navigates the site and proceeds to order by browsing with inAppBrowser.

At the last step, in the web page (on the server) always navigated through the inAppBrowser, at the end of the order, find a WHATSAPP button, which when pressed must close the inAppBrowser and at that point there will be a view in the app with a native button of the app, to send the message via whatsapp. (which would work in this case)

Of course the best would be via the web button, also transfer the content of the past order in some way, but otherwise I could also create a simple message like "I confirm my order", in this way the shop would have truthful confirmation.

Can I create a listener event on the final page of the order, connected to the button, which closes the inAppBrowser when pressed? How?

Hello Paolo,

I am not sure if what you wanted is what is shown in this stackoverflow answer. I use that answer's code with good result in one of my apps. The idea is simple, we call to app.cordova.inAppBrowser.open and save a reference to the opened window, that is:

var winRef = app.cordova.inAppBrowser.open('https://www.yourdomain.com/your-page.php', '_system', 'location=yes'); winRef .addEventListener( "loadstop", function(){ var loop = window.setInterval(function(){ winRef .executeScript({ code: "window.shouldClose" }, function(values){ if(values[0]){ // The user has pressed the button winRef .close(); window.clearInterval(loop); } } ); },100); });

Therefore, inside "your-page.php", you can place a button and a "click" event listener for that button. In the "click" event listener the only thing that you must do is to set the variable "window.shouldClose" to true. So when the user click on that button the the code after "if(values[0])" will be executed: you can then close the "InAppBrowser" window and/or do anything else.

---

it worked perfectly! by the way without using the system browser! Now I can play with it for a while, this function may come in handy in other projects. Thanks David : )

Hello Paolo,

Glad to know that you got it. Anyway, take a look at the documentation of the InAppBrowser plugin. In particular to the available events, and, more in particular, to the "message" event. I did not test it (like I test the above code) but I think the "message" event can be a good thing to be considered.

---

hello David, I hope everything is fine, I went back to review this solution that I had implemented (which worked perfectly), only now I need to close the IN APP BROWSER the content of a variable from the web page (server) to the app.

Currently the code is as follows:

APP SIDE

winRef .addEventListener( "loadstop", function(){ var loop = window.setInterval(function(){ winRef .executeScript({ code: "window.shouldClose" }, function(values){ if(values[0]){ // The user has pressed the button winRef .close(); window.clearInterval(loop); } } ); },100); }); app.showView('view2');

SERVER SIDE

jQuery( "a#sendbtn" ).click(function() { var example= "Andrea" window.shouldClose="true"; });

for example purposes only; I would like to pass the contents of the Example variable to the app

Any solution, thanks

Hello Andrea,

I am not sure... since to me that appear something weird... I mean... the page that you run in the "in app browser" is not part of the app (are running in another context), so, probably you can't share variables "as is". So in principle I think there probably has not a solution or not an easy one.

Saying that, maybe you can try some possible things. For example, the below code take my attention:

var loop = window.setInterval(function(){ winRef .executeScript({ code: "window.shouldClose" },

Apparently you can get the value of "window.shouldClose" from the context of "executeScript", so, maybe you can use it to get the "example" variable value, at least if you define it as "window.example = 'my value';" That is, the idea is to execute the below code:

winRef .executeScript({ exampleValue: "window.example" }, function(values){ alert(values[0]); // Here is the value of window.example if I am not wrong } );

Another possible way can be this other approach. Looking at the below code:

winRef .addEventListener( "loadstop", function(){ var loop = window.setInterval(function(){ winRef .executeScript({ code: "window.shouldClose" }, function(values){ if(values[0]){ // The user has pressed the button winRef .close(); window.clearInterval(loop); } } ); },100); });

... again, "code" apparently can get the "window.shouldClose" variable value. So I can imagine a code like below:

winRef .addEventListener( "loadstop", function(){ var loop = window.setInterval(function(){ winRef .executeScript({ myVariablesObject: {"shouldClose": window.shouldClose, "example": window.example} }, function(values){ if(values[0].shouldClose){ // The user has pressed the button winRef .close(); window.clearInterval(loop); } alert(values[0].example); // Here can be the value of "example" } ); },100); });

You can try the below code and investigate what the "values" variable ("values[0]" in particular) contains: if I am not wrong, that must contain the object that we set in "myVariablesObject", which contains both variables: "window.shouldClose" and "window.example", in the appropriate object properties.

P.S. Again I am not sure, however, in the above code you can see that you access to the "winRef" variable (the reference of the window opened by the "in app browser"), so maybe can be possible to reach the "example" variable like this: "winRef.example".

---

something seems to go wrong, the close event is not executed alerts why the variable (myVariablesObject) is not called, the alert(values[0].example) is correct? in the meantime I'm trying

i tried to debug from android studio emulator: and among the various messages: [INFO: CONSOLE (81)] "Uncaught Error: executeScript requires exactly one of code or file to be specified" [INFO: CONSOLE (4)] "Uncaught ReferenceError: windows is not defined", I don't know if it can be useful
maybe this helps Pass variable

Hello Andrea,

Since in the original code "values[0]" stores a boolean value, I suppose that value is what the "window.shouldClose" stores. So in principle, if set an object to the "myVariablesObject", that object must be in "values[0]". But now I think I am wrong... we must take care about the executeScript documentation here.

Apparently this code cannot be executed "as is":

winRef .executeScript({ myVariablesObject: {"shouldClose": window.shouldClose, "example": window.example} },

According with the documentation we cannot change the "code" with "myVariablesObject". "code" is not an arbitrary thing... but must be "as is": "code". Apparently "code" must contain the code to be injected (executed?). The rare thing to me is that the "code" originally only contains a variable name... "window.shouldClose"... so I can't understand that...

Anyway, try with the below code:

winRef .executeScript({ code: {"shouldClose": window.shouldClose, "example": window.example} },

Just to see what happen... maybe the "code" can be a function, for example, who return an object like "{"shouldClose": window.shouldClose, "example": window.example}"... so try the above code "as is", and then try with something like below if the above don't work:

winRef .executeScript({ code: hereAFunctionNameThatReturnsTheObject() // {"shouldClose": window.shouldClose, "example": window.example} },

I hope you can get the idea that I am trying to explain. It's my fault to misunderstand how the "executeScript" works...

---

thanks David, for your usual participation,

now I check yours, but an easy way is to pass the contents of the variable instead of True hahaha;

your solution now I will check it to understand how to pass more variables, it is always useful

Hello Andrea,

I think you can got it. Just take in consideration how "executeScript" works. My fault was to assume that we can change the "code", but, we can't do that, because "code" means "what code is to be injected or executed (?)". So the point must be to prepare the right Javascript in "code".

Maybe this can work "as is":

code: {"shouldClose": window.shouldClose, "example": window.example}

But I am not sure... just must try it and see if in "value[0]" you can get that "object". If the above don't work, then maybe we can use the below:

code: hereAFunctionNameThatReturnsTheObject()

And of course in your page HTML you must have a function like:

function hereAFunctionNameThatReturnsTheObject () { return {"shouldClose": window.shouldClose, "example": window.example}; }

I think the above must work well. If we can directly pass the object to "code", then just do it. If not, then we can try with the function call. Since I am supposing that that function will be called and then the "value[0]" must contain the return of that function.

It's a question of try it and see if finally you can see it working as expected.

---

Hello David, honestly I could not get it to work, for now I am satisfied to take the single variable window.shouldClose = "true" and put in place of TRUE what I needed. In the future when I need multiple values ​​I will try to work a little harder. The important thing is to have arrived at the goal thanks to your good advice. Thank you

Hello Andreas,

If you get it working... can be ok... but my previous posts explain something that must work. If "code" specify a function, then what get in "value[0]" will be the function return... so that must work... maybe you have some time in order to re-read my previous post and try it in order to see if finally you can see it working as expected. Of course if you prefer to go ahead with your current solution it's also ok.

---