Custom-URL-scheme
Custom-URL-scheme copied to clipboard
EddyVerbruggen
App not launching from Chrome browser - Navigation is blocked
When I try to open my Android app from mobile Chrome browser, it is not launching the app. Also, I got the following error message in the web console.
Navigation is blocked: mycoolapp://
But, this works like charm in mobile Firefox browser. Any idea how to get it resolved?
No.. It is when I try to open the app using javascript on page load of a web page.
Same issue when using a plain old link? Also, which Android version is this?
<script> $(document).ready(function() { window.location="mycoolapp://"; }) </script>
The above is the code that I'm using for opening up the native app from my web app.
it was working fine previously.
Cordova CLI: 5.4.1 ionic platform android - 4.1.1 Android version - 4.4
Same issue here. Seems that chrome on android now blocks opening other url schemes on page load :-1:
Having same issue here... I send a return url to my paymentprovider, they return my url in coolapp:// format, but it says ERR_UNKNOWN_URL_SCHEME ... anyone have an idea? Weird thing is, that it's working on firefox.. but samsung standard browser and chrome won't work..
Thanks!!
Instead of launching it as a custom-protocol. Try launching it as an Intent instead. This seem to be the main way to go on Android. E.g :
intent://#Intent;package=your_package_name;scheme=your_custom_url_schema;end;
@Caine72 launching it as an intent it works only on Browser for me.
On Chrome still does not work.
Anyone else on this one?
@EddyVerbruggen
For me, if you hide Chrome (e.g. press the home button), re-open chrome, and try the link again, the link works successfully. However, I always get the "Navigation is blocked" error when the page first loads. It's the weirdest thing...
(Edit: same for trying to access using an intent:// URI wit the scheme set)
Actually, I just solved my issue. I was trying to redirect the user on page load. Apparently Chrome blocks all requests to another URI scheme without the user initiating it. I added a button on my landing page and it works now!! 🎉
What would be the recommended way of launching an Android app from a redirect? For example, in Oauth2 flows, the Provider will do a browser redirect after authenticating. The goal would be to use a redirect to open the app. This would be similar to opening the App directly from the browser address bar. Any thoughts?
This navigation block was added to Chrome recently (https://bugs.chromium.org/p/chromium/issues/detail?id=459156). It seems like the world is moving towards native-app OAuth flows (https://tools.ietf.org/html/draft-ietf-oauth-native-apps-10). Google has phased out web-based OAuth flows (https://developers.googleblog.com/2016/08/modernizing-oauth-interactions-in-native-apps.html)
The only workaround is to use as a redirect URL the back-end, which can then issue the custom URL scheme (http://stackoverflow.com/questions/41524087/navigation-is-blocked-when-redirecting-from-chrome-custom-tab-to-android-app). I tried doing something similar on the front-end but you can only avoid the navigation block if it's a link instead of setting window.location:
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};
var token = getUrlParameter("oauth_token");
var verifier = getUrlParameter("oauth_verifier");
$('#oauth').attr('href', "oauth://cprest/?oauth_token=" + token + "&oauth_verifier=" + verifier);
});
</script>
</head>
<a id="oauth" href="">Link</a>
</html>
Try this code:
var redirect = function (location) {
var iframe = document.createElement('iframe');
iframe.setAttribute('src', location);
iframe.setAttribute('width', '1px');
iframe.setAttribute('height', '1px');
iframe.setAttribute('position', 'absolute');
iframe.setAttribute('top', '0');
iframe.setAttribute('left', '0');
document.documentElement.appendChild(iframe);
iframe.parentNode.removeChild(iframe);
iframe = null;
};
redirect(URL_HERE);
##Edited It gets blocked too. Sorry guys
@wbrickner yeah it stopped working for me as well, but i had luck for having it work.
What I ended up doing is attempting to detect the platform. If it's Andoid, show a button. The button has a listener which will redirect to the native schema url (e.g. "fb:// ..."), and then 100ms after that it will change the location to the mobile site (e.g. "https://facebook.com/ ..."). On iOS you do the same but don't wait for a button click.
@wbrickner that certainly does work most of the time.. :+1:
But still we can get blocked
Where in that process can you be blocked? This is a critical piece of infrastructure for my company. Please help me understand.
if your button redirects upon user interaction then its fine, but if you redirect it by clicking the button from your javascript then it might get blocked
@wbrickner if the redirect failure triggers a warning or a blocking modal by the browser then the timeout-based redirect could possibly not happen. If possible I think the server-side '302' redirect to the custom uri seems like the best option if you arent doing universal links or whatever is the current fragmented state of native deep linking world.
A little trick to achieve that:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Cool App</title>
</head>
<body>
<div id="redirect-div" onclick="navigate()">
<h1>Opening My Cool App...</h1>
</div>
</body>
<script type="text/javascript">
setTimeout(() => {
var div = document.getElementById('redirect-div');
div.click();
}, 1000);
function navigate() {
var url ="myCoolApp://mycooldomain.com";
window.location = url;
}
</script>
</html>
:)
This navigation block was added to Chrome recently (https://bugs.chromium.org/p/chromium/issues/detail?id=459156). It seems like the world is moving towards native-app OAuth flows (https://tools.ietf.org/html/draft-ietf-oauth-native-apps-10). Google has phased out web-based OAuth flows (https://developers.googleblog.com/2016/08/modernizing-oauth-interactions-in-native-apps.html)
The only workaround is to use as a redirect URL the back-end, which can then issue the custom URL scheme (http://stackoverflow.com/questions/41524087/navigation-is-blocked-when-redirecting-from-chrome-custom-tab-to-android-app). I tried doing something similar on the front-end but you can only avoid the navigation block if it's a link instead of setting window.location:
<html> <head> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { function getUrlParameter(name) { name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]'); var regex = new RegExp('[\\?&]' + name + '=([^&#]*)'); var results = regex.exec(location.search); return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' ')); }; var token = getUrlParameter("oauth_token"); var verifier = getUrlParameter("oauth_verifier"); $('#oauth').attr('href', "oauth://cprest/?oauth_token=" + token + "&oauth_verifier=" + verifier); }); </script> </head> <a id="oauth" href="">Link</a> </html>
How is this different from asking for user consent?? Is there any other way to launch app from deeplink without asking for user consent and launch the app as soon as my page gets launch??
We are also facing the same issue while opening the ionic app deeplink from the web browser .
Please let us know any solution for this.
Read this article: https://developer.android.com/training/app-links/deep-linking
Setting up an http scheme did the trick for me. You can still also keep mycoolapp:// for button clicks.
I have also encountered this issue now in Chrome android and Edge android browsers. It is working fine in Mozilla android and Safari iOS. Do you all have any other suggestions? I would really like to redirect the page on load instead of on button click. Thank you!
Read this article: https://developer.android.com/training/app-links/deep-linking
Setting up an http scheme did the trick for me. You can still also keep mycoolapp:// for button clicks. @sjoerdloeve Do you mean that you find a way to programatically call http(s) scheme deep link? How? My understanding is, that new(er) browsers (at least chrome) blocks "non-user-initiated" navigation links - that is a security feature. So, Deep link to both custom/http scheme works for me from ahref and button. Because it is a user action who initiated the navigation. But I have no way to call it programatically.
So, anybody know how to push data (attr=value) from webpage to application on target device? Anyhow? Thank you.
`
`
@JV-TMCZ Yes, it's possible to click on a HTTPS link that directly opens the app if you have it installed. I'm using this plugin for the custom URL scheme and the universal links plugin for the HTTP(S) linking.
Check out this plugin and the documentation to set it up: https://github.com/eldadfux/cordova-plugin-universal-links
For iOS I use location.href on the HTML page to automatic trigger a confirm box to the user that ask if you would like to open the app.