Back variables from InAppBrowser - javascript

im using cordova 2.5.0 and I have problems to communicate a new window with my app with the InAppBrowser. It is possible to send back information from a page opened with InAppBrowser plugin to my cordova app.

This used to be a little involved (like polling or custom urls), but since inAppBrowser 3.0.0 you can use AllowedSchemes with the customscheme event. This is not documented yet, but can be used as follows.
To your config.xml, add
<preference name="AllowedSchemes" value="myscheme" />
with the following code in your Cordova app:
function onCustomScheme(e) {
if (e.url.match(/^myscheme:\/\/message\b/)) {
var q = parseQueryString(e.url);
console.log("Got foo message: " + q.text);
}
}
url = "https://my.example.com/";
app = cordova.InAppBrowser.open(url, "_blank");
app.addEventListener("customscheme", onCustomScheme, false);
Then from the website opened in the inAppBrowser, you can embed a link like this, which shows the message hi there in the console if you follow it.
Test
This won't work with Cordova 2.5 (it looks like you'll need at least 3.1), but as 8 is out now, it's probably a good idea to upgrade anyway.

Related

IONIC Cordova retrieve InAppBrowser URL

I am creating an Ionic 3 application, I need to get the URL from the frame generated from inAppBrowser.
The frame is created here :
var browser = this.inAppBrowser.create("http://apache.org", "_blank", "location=no,clearsessioncache=yes,clearcache=yes");
browser.on('loadstop').subscribe(function(event) {
browser.show();
console.log(event.url);
});
I use the apache website for testing purposes but the url is meant to change as the user goes through the webpage, that is why I'm trying to retrieve it through an event.
My problem is that the "event.url" property keeps returning "null".
Version : IONIC 3.2.0 ; Cordova 8.0.0
Many thanks for whoever will help me!
FIX : I found the solution, the desktop browser is always returning null, I tried on a android simulator and it works !
Thanks for your answers.

Branch.io Cordova API - init() fails on Android Device

I'm having problems getting Branch.io to work in a Cordova powered Android app. I have a landing page that parses the data from branch.io deep links and forwards the user to the correct page. My javascript for this page contains:
function onDeviceReady() {
console && console.log("Device Ready");
initBranch();
}
function initBranch() {
branch.init(<branchKey>, function(err, data) {
console && console.log("branch init error: " + err);
//then the parsing and forwarding follows - omitted here
}
I then created a Branch.io deep link to this landing page in the web api and tested it in chrome which works.
Then i tried to move to the Cordova app...
I followed this guide to prepare the app for branch.io:
https://dev.branch.io/recipes/quickstart_guide/cordova/ (I installed the plugin and adapted the Manifest file.)
But when i try to open the same link that worked in chrome on my Android device the app opens correctly and the landing page loads, but i'm not forwared. Instead i see the following error in logcat:
I/chromium(19382): [INFO:CONSOLE(22)] "Device Ready"
[...]
I/chromium(19382): [INFO:CONSOLE(29)] "branch init error: Error: API request /v1/open missing parameter device_fingerprint_id"
Can anyone tell me what i'm doing wrong? I'm just getting to know Cordova and Branch.io so it's probably something small i'm overlooking.
Thanks,
Lif
A colleague of mine figured it out:
Branch.io creates an entry branch_session in the local storage of the android device. On my device this session was corrupted somehow and the device_fingerprint_id was empty:
{"session_id":"198413861345316824","identity_id":"198398707320770300","device_fingerprint_id":null,"browser_fingerprint_id":null,"link":"<link>","data":"{\"+is_first_session\":false,\"+clicked_branch_link\":false}"}
After clearing the local storage* the session was freshly created, and now looks like this:
{"session_id":"198413861345316824","identity_id":"198398707320770300","device_fingerprint_id":"118176839880411216","browser_fingerprint_id":null,"link":<link>,"data":"{\"+is_first_session\":false,\"+clicked_branch_link\":false}"}
And now deep linking works.
Kr,
Lif
* To clear the local storage i used chrome://inspect --> inspect webview, go to resources tab, choose "local storage" and the the correct url, then remove all values.

Phonegap Developer storing files in development on cache

I'm developing a Phonegap application using Phonegap Developer for Android. And I have a big problem: after I change some file, like index.html, or some.js, some.css, some.png... it doesn't works on app. Basically the application reload and I get same old file.
I tried use four fingers to reload, and three fingers to back to application home, and connect again. I tried inspect via desktop and force location.reload(true). Nothing. The unique solution is force close Phonegap Developer and open it again.
Even if I put something like some.js?$timestamp, it doesn't works, because index.html is cached too. I guess that this cache is cleaned time in time, but I don't know how much. And some changes I need test imediatly.
don't know if this is the same issue I had two days ago, but the simptoms are like you described. I finally solved it upgrading phonegap. Maybe it's not the best solution, but it worked for me.
$ sudo npm update -g phonegap
You can check a similar answer here : PhoneGap disable caching
document.addEventListener('deviceready', onDeviceReady);
function onDeviceReady()
{
var success = function(status) {
alert('Message: ' + status);
}
var error = function(status) {
alert('Error: ' + status);
}
window.cache.clear( success, error );
}

Not able to launch a pdf file in inappbrowser in android

I have a requirement to show a pdf in inappbrowser when user clicks on a link. It is working fine in ios but not working on android. I am using IBM worklight for my project. Below is the code I have used:
window.open("pdfURL","_blank","location=yes");
In ios the inappbrowser launches and displays the pdf but in android the inappbrowser is launches but no content is displayed
Unlike iOS, which has a built-in PDF viewer - Android's webview does not have PDF viewer built-in.
This is why it is going to fail in Android.
You have 2 choices in Android:
View the file using Google Docs by storing the file at a remote server and redirecting the user like so: window.open(encodeURI('https://docs.google.com/gview?embedded=true&url=http://www.your-server.com/files/your_file.pdf'), '_blank', 'location=yes,EnableViewPortScale=yes');
Or use a Cordova plug-in. For example this one (you can search in Google for more). For this, you'll need to learn how to create Cordova plug-ins in Worklight.
You can read more options here: Phonegap InAppBrowser display pdf 2.7.0
Try using
window.open('pdfURL',"_system","location=yes,enableViewportScale=yes,hidden=no");
where using _system will download the file and open it in the system's application like Chrome or other PDF viewers.
Use uriEncodeComponent(link) and https://docs.google.com/viewer?url= link
Doc, Excel, Powerpoint and pdf all supported.
Use the cordova in app browser.
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
window.open = cordova.InAppBrowser.open;
}
$("body").on("click",function(e){
var clicked = $(e.target);
if(clicked.is('a, a *'))
{
clicked = clicked.closest("a");
var link = clicked.attr("href");
if(link.indexOf("https://") !== -1)
{
if(true) //use to be able to determine browser from app
{
link = "http://docs.google.com/viewer?url=" + encodeURIComponent(link) + "&embedded=true";
}
window.open(link, "_blank", "location=no,toolbar=no,hardwareback=yes");
return false;
}
}
});
Using google drive viewer seems like a good quick option.
But moving forward they may change or depreciate their API and you will have to find a new way to support this.
Also security is another consideration here as your file is publicly available and downloadable.
I had a similar situation in a recent project and we solved it by using: pdf.js
This is a JS based PDF parser with a good set of reader functionalities.. its not as smooth as a native one but did the job for us.
It's main advantage is that we had the control over the codes and were able to open files from the device file system.
If you want to go for a more native like in-app route, then as #Idan Adar mentioned a native library + cordova plugin is the way to go.
Try this code it's working fine for me.
var inAppBrowserRef;
var target = "_system";
var options = "location=yes,hidden=no,enableViewportScale=yes,toolbar=no,hardwareback=yes";
inAppBrowserRef = cordova.InAppBrowser.open(url, target, options);
It's working for me
window.open(link, "_blank","location=yes");

Phonegap 3.0 Angular.js unable to use InAppBrowser

I'm working on a project based on PhoneGap 3.0 and Angular.js. I try to use InAppBrowser with the following controller :
function AccueilCtrl($scope,$window) {
$scope.openUrl = function() {
var ref = $window.open('http://www.google.fr', '_blank', 'location=yes');
};
}
I call this function, in a view, with :
<a ng-click="openUrl()">Open Page</a>
I followed insctructions, and used the cli version of PhoneGap 3.0 :
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
phonegap build ios
But when I launch the app, either in simulator, or on a real device, the window does not show nav bars at all, it's just full screen. Replacing "_blank" with "_system" doesn't change anything, Safari does not launch.
Do you think this is a bug in PhoneGap or Angular, or am I missing something? How can I debug or trace to find what's wrong? Thx

Categories

Resources