App not launching from Chrome browser - Navigation is blocked

stalin commented 8 years ago

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?

EddyVerbruggen commented 8 years ago

That's when clicking a link?

stalin commented 8 years ago

No.. It is when I try to open the app using javascript on page load of a web page.

EddyVerbruggen commented 8 years ago

Same issue when using a plain old link? Also, which Android version is this?

stalin commented 8 years ago

<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

klickagent commented 8 years ago

Same issue here. Seems that chrome on android now blocks opening other url schemes on page load :-1:

oudj001 commented 8 years ago

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!!

Nico-Nico-FR commented 8 years ago

Same issue here, Chrome locked the url...

Caine72 commented 8 years ago

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;

flastowizka commented 8 years ago

any solution ?

ghost commented 8 years ago

@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

blakek commented 7 years ago

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)

blakek commented 7 years ago

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!! 🎉

PaulMazzuca commented 7 years ago

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?

rogerhu commented 7 years ago

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>

muhammadfaizan commented 6 years ago

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 commented 6 years ago

^This doesn't work in Android's Chrome browser.

muhammadfaizan commented 6 years ago

@wbrickner yeah it stopped working for me as well, but i had luck for having it work.

wbrickner commented 6 years ago

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.

muhammadfaizan commented 6 years ago

@wbrickner that certainly does work most of the time.. :+1:
But still we can get blocked

wbrickner commented 6 years ago

Where in that process can you be blocked? This is a critical piece of infrastructure for my company. Please help me understand.

muhammadfaizan commented 6 years ago

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

temitope commented 5 years ago

@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.

Abdulrahmanh995 commented 5 years ago

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>

:)

sagg155 commented 4 years ago

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??

bennyhawk commented 4 years ago

Bump... Does anyone know if this issue has been resolved?

VivithaAlamur commented 4 years ago

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.

sjoerdloeve commented 4 years ago

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.

lorimay21 commented 3 years ago

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!

JV-TMCZ commented 3 years ago

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.

`

sjoerdloeve commented 3 years ago

@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.

johhansantana commented 3 years ago

@sjoerdloeve I tried setting the http scheme but it just goes to that url instead of opening the app like so http://deeplink

<intent-filter>
    <action android:name="android.intent.action.VIEW"/>
    <category android:name="android.intent.category.DEFAULT"/>
    <category android:name="android.intent.category.BROWSABLE"/>
    <data android:scheme="http"
          android:host="deeplink"/>
</intent-filter>

then in browser:

window.location.href = "http://deeplink";

doesn't work. Anything I'm missing here? If I do custom one like mycustomscheme://deeplink then it gets blocked in chrome (works on other browsers)

snehasis commented 3 years ago

Having the same issue and none of the workaround worked so far. It works if firefox is the default browser in Android but most of the Android devices default have Chrome.

Do we know if we have any alternative without doing any change on the Oaut2 providers ?

IbrohimIsroilov commented 3 years ago

Having the same issue and neither chrome intents nor "myapp://example" is not working only in chrome?

IbrohimIsroilov commented 3 years ago

@sjoerdloeve thank you setting up the http scheme and using chrome intent did the trick for me also!

phyr0s commented 2 years ago

@IbrohimIsroilov @sjoerdloeve can you put here how did you do?

Thanks

GabrielLasso commented 2 years ago

I created a page saying "You will be redirected to the app. If you are not, click here to be redirected"

And in chrome the user needs to click, but on iOS and firefox they are redirected automatically

EddyVerbruggen / Custom-URL-scheme

App not launching from Chrome browser - Navigation is blocked #156

Edited