We Keep Coding

Using branch.io to redirect to app in javascript

So, we have a mobile download site that we want to bypass if the user already has our app installed, and open our app. We are using the branch javascript code to try to accomplish this task. We have our branch key where I have 'my_branch_key', and we copied the rest of the code below directly out of the branch instructions. And, of course, it is failing to redirect our mobile users. I imagine the problem is the lack of some sort of app identifier in the code, but we could not find any instructions on where to add that. Anyone know what we're missing and where we need to add it. Any advice would be greatly appreciated.
// load the Branch SDK file
(function(b,r,a,n,c,h,_,s,d,k){if(!b[n]||!b[n]._q){for(;s<_.length;)c(h,_[s++]);d=r.createElement(a);d.async=1;d.src="https://cdn.branch.io/branch-latest.min.js";k=r.getElementsByTagName(a)[0];k.parentNode.insertBefore(d,k);b[n]=h}})(window,document,"script","branch",function(b,r){b[r]=function(){b._q.push([r,arguments])}},{_q:[],_v:1},"addListener applyCode banner closeBanner creditHistory credits data deepview deepviewCta first getCode init link logout redeem referrals removeListener sendSMS setIdentity track validateCode".split(" "), 0);
branch.init('my_branch_key');
// define the deepview structure
branch.deepview(
{
'channel': 'mobile_web',
'feature': 'deepview',
data : {
'source': 'website'
}
},
{
'open_app': true
}
);
Additional info: We noticed an oddity when trying to test this, for a couple of our iPhone users, it seems to work perfectly, but for the rest of the iPhone users and all the android users it still fails to redirect.

Alex with Branch.io here: the automatic open_app: true setting actually doesn't work in iOS 9 with Safari, due to some changes Apple made to Universal Links in iOS 9.3. This is a fairly recent change, so our docs haven't been updated quite yet. It's annoying, I agree...
The best workaround is to put a button on the page with deepviewCta(). Visitors will have to click it to open the app. We realise this is not ideal, but it's the best option for Apple's current system.
The other option you can try is enabling your own domain for Universal Link. That way whenever a URL at your domain is clicked, your app will launch immediately and the site will never even be loaded.

Deeplinking mobile browsers to native app - Issues with Chrome when app isn't installed

I have a webpage, lets call it entry.html.
When a user enters this page, a javascript code (see below) is attempting to deep-link the user to the native iOS / Android app.
If the deep-link fails (probably if the app isn't installed on device), user should "fall back" to another page- lets call it fallback.html.
here is the javascript code that is running on entry.html:
$(function(){
window.location = 'myapp://';
setTimeout(function(){
window.location = 'fallback.html';
}, 500);
});
this is a standard deep-linking method that is recommended all over the network; try to deep-link, and if the timeout fires it means that deep-link didn't occur- so fallback.
this works fine, as long app is installed on device.
but if the app isn't installed, this is the behaviour when trying to deep-link:
Mobile Safari: I see an alert message saying "Safari cannot open this page..." for a moment, and then it falls-back properly to fallback.html- which is the expected behaviour.
Mobile Chrome is my problem.
when the app isn't installed, browser is actually redirected to the myapp:// url, which is of course, invalid- so i get a "not found" page, and fall-back doesn't occur.
Finally- my question is:
How can I fix my code so FALL-BACK WILL OCCUR on mobile Chrome as well? just like mobile Safari?
note: i see that LinkedIn mobile website does this properly, with Safari & Chrome, with or without the app installed, but i couldn't trace the code responsible for it :(
note2: i tried appending an iframe instead of window.location = url, this works only on Safari, mobile Chrome doesn't deep-link when appending an iFrame even if app is installed.
Thanks all!
UPDATE:
i found a decent solution, and answered my own question. see accepted answer for my solution.

for whoever is interested, i managed to find a decent solution to solve these issues with deeplinking Chrome on Android.
i abandoned the myapp:// approach, i left it functioning only in cases of an iOS device.
for Android devices, i'm now using intents which are conceptually different than the myapp:// protocol.
I'm mainly a web developer, not an Android developer, so it took me some time to understand the concept, but it's quite simple. i'll try to explain and demonstrate MY solution here (note that there are other approaches that could be implemented with intents, but this one worked for me perfectly).
here is the relevant part in the Android app manifest, registering the intent rules (note the android:scheme="http" - we'll talk about it shortly):
<receiver android:name=".DeepLinkReceiver">
<intent-filter >
<data android:scheme="http" android:host="www.myapp.com" />
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.BROWSABLE"/>
<category android:name="android.intent.category.DEFAULT"/>
</intent-filter>
</receiver>
now, after this is declared in the app manifest, i'm sending myself an email with "http://www.myapp.com" in the message.
when link is tapped with the Android device, a "chooser" dialog comes up, asking with which application i want to open the following? [chrome, myapp]
the reason this dialog came up upon tapping on a "regular" url, is because we registered the intent with the http scheme.
with this approach, the deeplink isn't even handled in the webpage, it's handled by the device itself, when tapping a matching link to an existing intent rule defined in the Android app manifest.
and yes, as i said, this approach is different by concept than the iOS approach, which invokes the deeplink from within the webpage, but it solves the problem, and it does the magic.
Note: when app isn't installed, no chooser dialog will come up, you'll just get navigated to the actual web page with the given address (unless you have more than 1 browser, so you'll need to choose one... but lets not be petty).
i really hope that this could help someone who's facing the same thing.. wish i had such an explanation ;-)
cheers.

It is very important to make sure that when you try to open a deeplink URL with JavaScript that the URL is properly formatted for the device and browser. (If you do not use the appropriate deeplink URL for the browser/platform, a user may be redirected to a “Page Not Found”, which is what you experience.)
Now you must note that Chrome on Android has a different URL format than the old standard Android browser 1! You need to annotate the deep links using href="android-app://" in the HTML markup of your web pages. You can do this in the section for each web page by adding a tag and specifying the deep link as an alternate URI.
For example, the following HTML snippet shows how you might specify the corresponding deep link in a web page that has the URL example://gizmos.
<html>
<head>
<link rel="alternate"
href="android-app://com.example.android/example/gizmos" />
...
</head>
<body> ... </body>
For more details, see the references here:
https://developer.chrome.com/multidevice/android/intents
https://developers.google.com/app-indexing/webmasters/server
https://developer.android.com/training/app-indexing/enabling-app-indexing.html#webpages
And here's a deep link testing tool for Android: https://developers.google.com/app-indexing/webmasters/test.html
Hope that helps.
1 Since the old AOSP browser was replaced by chromium, this is now the default way to handle deep links for recent Android versions. Nonetheless, Android still requires a conditional soltion, because older OS versions still use the AOSP browser.

I have created a Javascript plugin, which supports most of the modern browsers on mobile. But it requires to have deep linking landing pages to be hosted on cross domain(different than universal link url) to work on ios9 Facebook using universal linking. There is also different way to get that working on the Facebook iOS9 using Facebook SDK. I am sharing this if anyone might find this helpful. Currently it does not fallback option, but if falls back to the App Store.
https://github.com/prabeengiri/DeepLinkingToNativeApp

I am Using this Code to for deeplinking.
If the app is installed the app will open up..
If the app is not installed then this remains as it is..
If you wish to add any other condition for app no install then just uncomment the setTimeout code .
<script>
var deeplinking_url = scootsy://vendor/1;
$(document).ready(function(){
call_me_new(deeplinking_url);
});
var call_me_new = function(deeplinking_url){
if(deeplinking_url!=''){
var fallbackUrl ='http://scootsy.com/';
var iframe = document.createElement("iframe");
var nativeSchemaUrl = deeplinking_url;
console.log(nativeSchemaUrl);
iframe.id = "app_call_frame";
iframe.style.border = "none";
iframe.style.width = "1px";
iframe.style.height = "1px";
iframe.onload = function () {
document.location = nativeSchemaUrl;
};
iframe.src = nativeSchemaUrl; //iOS app schema url
window.onload = function(){
document.body.appendChild(iframe);
}
//IF the App is not install then it will remain on the same page.If you wish to send the use to other page then uncomment the below code and send a time interval for the redirect.
/*
setTimeout(function(){
console.log('Iframe Removed...');
document.getElementById("app_call_frame").remove();
window.location = fallbackUrl; //fallback url
},5000);*/
}
};
</script>

setTimeout(function () { if (document.hasFocus()) { window.location = 'URL WILL BEHERE';} }, 2000);
window.location = 'app://';
Need to check document.hasFocus() here because if app is open then playstore url is also open in browser

I also had similar issue, there is a possible alternative for this. If the app is not installed on user's device we can redirect that to some other url.To know more about it Check Here
Example:
Take a QR code

In my case its working fine in opera and chrome browser my deeplink url is
"intent://contentUrl + #Intent;scheme=" +envHost +;package="+envHost+";end";
For other browser create iframe and append the url.
Note -: iframe url append having issue with old device and in firefox its opening app dialog .

Google Drive API, can't open standard sharing dialog via JS (x-frame-options error)

I have a JavaScript app which uses the Google Drive API. I read how to open a standard sharing dialog here: https://developers.google.com/drive/web/manage-sharing
<head>
...
<script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
<script type="text/javascript">
init = function() {
s = new gapi.drive.share.ShareClient('<MY_APP_ID>');
s.setItemIds(["<MY_FILE_ID>"]);
}
window.onload = function() {
gapi.load('drive-share', init);
}
</script>
</head>
<body>
<button onclick="s.showSettingsDialog()">Share</button>
</body>
Seems like I do everything right, when I click my share button, the dialog starts loading but it can't be loaded.
In the console I see:
Refused to display 'https://drive.google.com/share?...' in a frame
because it set 'X-Frame-Options' to 'SAMEORIGIN'.
I've googled this error and I've seen that there are some similar questions in SO and other sites, but they don't help. I guess Google doesn't allow itself to be in a frame in a not-google-site (cause of "SAMEORIGIN").
What can I do to open sharing dialog in my app?

The "Launching the Google Drive sharing dialog in your app" page here states:
The URL of the page that launches the dialog must have the same origin
as the Open URL registered for the app.
If you then look at the instructions to "Configure the Drive SDK" here, you can see that the "Open URL" section reads:
There are two important things to keep in mind for the Open URL:
Make sure you give a fully qualified domain name for Open URL -- localhost won't work.
The URL must belong to you. After the app registration is complete, you'll need to verify your ownership of this URL in order to create a
Chrome Web Store listing. For more information, see Site Verification.
Hence your page which is launching the dialog does not have the same origin as the Open URL registered for the app in you Google Drive SDK settings. So to fix your problem correct the Open URL so that it has the correct URL i.e. a URL with the same origin as the Open URL. Note that you can change the Google Drive SDK settings via https://console.developers.google.com/project.
As well as making sure the Open URL is set correctly. You'll also need to substitute your Drive SDK app ID for 'MY_APP_ID'. You can find the App ID by following these instructions:
Goto https://console.developers.google.com
Click your project
Click "APIs and auth" on the left
Click the "Drive SDK" settings cog icon
The "App ID" can then be found under the "Google Drive SDK" title e.g. App ID: 47XXXXXXXX3

The problem was solved thanks to this answer https://stackoverflow.com/a/20742994/1185123
dan-man says in his answer:
Client ID You can find this in the Google Cloud Console - see above.
Mine is a 12 digit number, so yours will probably be too.
Mine client id looks like
175564412906-ui22fsaghkvkkj09j2bprku55m8k3d0d.apps.googleusercontent.com
I've used this id in
s = new gapi.drive.share.ShareClient('<MY_APP_ID>');
After reading the answer, I tried to use only first 12 digits of my client id. I didn't expect it to work, I was just desperate. But the strange thing, it works perfectly!
If somebody can explain why it works and why nothing about this is said in the documentation — you are welcome to answer!

Why does Cordova 2.7.0 JS seemingly no longer work on remote pages?

Background
I'm attempting to upgrade an iOS app built on Cordova 2.0 to version 2.7.
It's basically a welcome screen that points to a remote search engine (please withhold comments about app validity and likely approval, as we're past that), and we were using the ChildBrowser plugin to enable opening links in a sub browser so as not to trap the user in the Cordova webview.
Cordova 2.7 has a feature called InAppBrowser I am hoping to use instead of ChildBrowser. InAppBrowser does essentially the same thing, aside from missing a button to open in Safari.
Problem
The existing app's remote webpages include the Cordova JS (as well as that for the ChildBrowser plugin) and it works fine for opening links in the sub browser.
My test Cordova 2.7 app doesn't seem to load the Cordova JS correctly when it's being loaded from a remote web page.
I tried using this exact same HTML on the embedded start page and a remote start page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://mydomain.com/mobile/cordova-2.7.0.js"></script>
</head>
<body>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
alert("Ready!!");
}
</script>
</body>
</html>
To test this as the embedded start page, I put this line in config.xml:
<content src="index.html" />
When I run the app, I promptly get the "Ready!" alert.
To test this as the remote start page (I'm aiming to link to the remote page in the final app, I am just using it as the start page for testing. The result is the same if I link from the embedded page.), I put this line in config.xml:
<content src="http://mydomain.com/mobile/index.php" />
When I run the app, I just get the blank screen and no alert.
Further, in cordova-2.7.0.js L. 6255, I changed
console.log('deviceready has not fired after 5 seconds.');
to
alert('deviceready has not fired after 5 seconds.');
With that change, running the app using the remote start page causes the blank page, and then after five seconds, I get the alert "deviceready has not fired after 5 seconds.". So this tells me Cordova JS is not starting correctly. Needless to say, I can't get InAppBrowser to launch links in the sub browser on the remote site, but I can get it working just fine on the embedded start page.
Anyone have any ideas of where to go from here? This is a pretty simplistic example, so I'm assuming this is a Cordova settings problem or a change in the functionality. I appreciate any thoughts, thanks!

Yes, something broke in 2.7 - related to our cordova-cli work. See: https://issues.apache.org/jira/browse/CB-3029
The fix is to add an empty file called "cordova_plugins.json" in your root folder.

I had a similar problem relating to upgrading to Cordova 2.7. However my problem was all my console.logs stopped firing when running the app. I couldn't figure out why for the life of me this was happening. I thought it was because I upgraded jquery.mobile. That wasn't it. I then thought it was an .htaccess issue, that wasn't it either. It turns out, it was Cordova 2.7 that was causing this problem.
I did try adding the .json file on my server, that did not fix the issue.
The fix was going into the 2.7 source and commenting out the following code:
/*comment out this as it is breaking console.logs
var xhr = new context.XMLHttpRequest();
xhr.onload = function() {
// If the response is a JSON string which composes an array, call handlePluginsObject.
// If the request fails, or the response is not a JSON array, just call finishPluginLoading.
var obj = this.responseText && JSON.parse(this.responseText);
if (obj && obj instanceof Array && obj.length > 0) {
handlePluginsObject(obj);
} else {
finishPluginLoading();
}
};
xhr.onerror = function() {
finishPluginLoading();
};
xhr.open('GET', 'cordova_plugins.json', true); // Async
xhr.send();
*/
Replace entire block with a call to the following function:
finishPluginLoading();
My logs are now working again. Only took me 3 days scratching my head.
Hope this helps someone with a similar problem.

If you embed Cordova in the external web page, there will be no way to open the InAppBrowser from within your hybrid app, so Cordova will not be able to load. This is because the InAppBrowser requires Cordova to be fully loaded and initialized before it can be used to fetch a remote page. You need to use your HTML page that you have, with the <script type="text/javascript" src="http://mydomain.com/mobile/cordova-2.7.0.js"></script> as the main entry point for your app. Then you can use the InAppBrowser to open up your remote page. (You could probably do this in the onDeviceReady(), not sure if it would "flash" the page first though.) I don't think the remote page should have any Cordova code in it at all. I'm not sure if it would be possible to even interact with Cordova from the remote page due to the Same Origin Policy (probably you could use features of the InAppBrowser to inject "bridge" code though to get around this.)

As Shazron mentioned the problem is the issue with the file"cordova_plugins.json".
To solve the problem not changing the code you can create the "cordova_plugins.json" file in the root folder and insert a content between quotation marks inside this file.
Mine for example has the following content:
"Just a dummy file required since Cordova 2.6.0"

create a file cordova_plugins.json that contains {}. then go to cordova-2.7.0.js and comment this line require('cordova/channel').onNativeReady.fire(); then when development done, add it back

Like me if you are using Cordova 5.1.1 and want to access native functionality after redirect then copy cordova.js, cordova_plugins.js and plugins folder which is at \platforms\platform_name\assets\www\ and put them on server, finally reference cordova.js inside your html. After every plugin add make sure to update these files and folder.

Sending msg and post on own wall function no longer work

I created social feeds functions(sending msg to friends and posting on own wall) using javascript SDK and graph API in Facebook 2-3 months ago for my apps. It was working perfectly when I created but now, when I visit my app and try to use them again, it no longer works. It's so strange since I never touched that code after I implemented them. I even tried to copy and pasting exact sample javascript code given in Facebook document and it didn't work either. Even after I re-write my code, it still doesn't work either. I have no idea what is wrong. Anyone face similar problem with javascript SDK? Thanks in advance.
Hi,
The code is here: Sorry for late reply.
<script src='http://connect.facebook.net/en_US/all.js'></script>
<script>
FB.init({
appId : 'id',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
<script>
function share_wall() {
// calling the API ...
var obj = {
method: 'feed',
link: 'https://apps.facebook.com/id/',
name: 'test',
description: 'blalala'
};
FB.ui(obj);
}
</script>

I realized I actually have the same problem as you =\ Go to your app settings and make the additional configuration under Basic Settings.
If your domain is http://inspiration.nyp.edu.sg
If you are working on localhost
"Symptoms"
Previously, your JavaScript SDK functions were working fine. Now, executing your JavaScript SDK functions prompts you either an API Error Code 191 or an error.
Your PHP SDK functions are working fine.
Your JavaScript SDK functions work fine when you run your application as App on Facebook, but does not when you run your application as a Page Tab.
(For my case, the last date I checked was 7 August 2012 and my JavaScript SDK functions were working fine. It was until 3 September 2012 when I checked them again, then I encountered the errors mentioned above.)
I highly recommend everyone to check their Page Tab application's JavaScript SDK functions such as feed dialog, apprequests and etc.