I want to click a link that launches an app on Android. However, if the app is not installed, by default Android redirects to the Play store. I don't want this.
What I want is to be able to redirect to a custom webpage if the app is not installed. iOS seems to support this by using setTimeouts but according to this page https://vhudyma-blog.eu/open-mobile-application-from-the-browser/ there is no similar flow offered for Android. Thank you for your help.
if (isAndroid) {
const url =
"intent://instagram.com/#Intent;scheme=https;package=com.instagram.android;end";
// open the app
// if the app isn't installed, it seems we just go to the play store
window.location.replace(url);
} else if (isIOS) {
// go to the app
window.location.replace("instagram://");
// open the app store on a timeout. this will happen but not be seen if instagram has opened
setTimeout(() => {
window.location.replace(
"https://apps.apple.com/us/app/instagram/id389801252"
);
}, 10000);
} else {
// we're not in ios or android so just go to the website
window.location.replace("https://instagram.com");
}
You might have a little luck with getInstalledRelatedApps()
const list = await navigator.getInstalledRelatedApps();
Here is an article about it: https://web.dev/get-installed-related-apps/
Even though it might not be too wildly supported.
In iOS using Safari Browser, an alert "Open with xyz app" is showing before redirect on app if app installed and an alert "Invalid address" then "Open with app store" if app not installed.
Is there a way to redirect on app if installed otherwise on app store without showing any alert? Like yelp.com?
Currently I am trying it using java script but it is showing an alert.
document.location.href = "myapp://url?url=" + encodeURIComponent(window.location.href);// "myapp://?url=" + encodeURIComponent(window.location.href);
setTimeout(function () {document.location.href = "appstoreurl";}, 2000);
Can anyone help me to resolve this issue?
Yes you can.
For this you need to setup Universal Links.
You should read the documentation here:
https://developer.apple.com/library/content/documentation/General/Conceptual/AppSearch/UniversalLinks.html
The way you are doing it is "deprecated" since iOS 9
When opened in Messenger or Facebook, my custom deep link does not open my native app anymore but shows the App Store instead, while it's still working effectively in Safari, SMS, Whatsapp apps...
Flow is pretty standard :
user clicks on an url redirecting to a web page opening the App Store if scheme_based url fails - code snippet:
var loadedAt = +new Date;
setTimeout(
function() {
if (+new Date - loadedAt < 2000){
window.location = appstoreFail;
}
}
,25);
//Try launching the app using URL schemes
window.open(appUrlScheme,"_self");
Any idea why Facebook is not recognizing app scheme urls? Did they change anything? Facebook or Messenger are opening a web view, so there might be something with it but I've the feeling it was working before and stoped working recently...
Thank you very much for your suggestion, or any workaround to open a native app from Facebook/Messenger!
Lucas
Facebook can do whatever they want with any network request in their app and it seems that they choose to block non-http requests in recent versions of their app...
The app is built using the ionic framework.
Its been installed on a new device that's using Android 4.4.
Based on this question I used this code to reload the page:
$scope.reloadRoute = function() {
$window.location.reload();
}
This does not appear to work in Android 4.4+
I have tried the other suggestions from that answer, but they do not work for our case.
I tried this:
location.href = location.origin;
It doesn't work. I need it to reload.
So I'm looking to launch a mobile app when a web page is landed on. I've seen this done and all is great there (see code below with Facebook and Pandora as an example). But I'm looking for a logic check to route the user one way or the other depending upon the successful or unsuccessful launch of the app. It was said in a previous solution that you cannot use a link to check the user's mobile device to see if an app is installed, but I keep thinking that there might be a way to see if the user's app was successfully launched after-the-fact and route them based on that.
Using the code below, if the app is launched, the web page falls away, if you will (disappears into the background while the app takes center stage). If, however, the app isn't installed on the mobile device, then the web page stays up and you get an error (can't recall off-hand which error). But it seems to me that receipt of this error should be able to trigger a re-routing to a specific URL of your choice. Not at the server-level, but at the code-level. In other words... if the app launches, then grats... enjoy! But if the page loads with an error, then it redirects instantly to say, the app download page on Apple or Google (depending upon the OS detected).
Does anyone have a suggestion as to how to make this happen? Essentially one piece of code that is looking for the trigger error and reacting to that as a way to A) launch the app from a page load (link) B) open the app store in a browser to download the app if the app wasn't successfully launched.
This is my first foray into Stack, but I have found the community very helpful over the years.
<script type="text/javascript"> // <![CDATA[
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
if ( isMobile.Android() ) {
document.location.href = "fb://profile";
}
else if(isMobile.iOS())
{
document.location.href="pandora://";
}
</script>
What you're talking about is called Deferred Deep Linking in terms of App Links. If you were coding an app that wanted to utilize this, there are iOS guides and Android ones. Overall, there doesn't seem to be a standard implementation for all scenarios, however, there is a pretty simple "roll-your-own" implementation that is similar to what you're attempting.
(from another SO answer)
<script type="text/javascript">
window.onload = function() {
// Deep link to your app goes here
document.getElementById("l").src = "my_app://";
setTimeout(function() {
// Link to the App Store should go here -- only fires if deep link fails
window.location = "https://itunes.apple.com/us/app/my.app/id123456789?ls=1&mt=8";
}, 500);
};
</script>
<iframe id="l" width="1" height="1" style="visibility:hidden"></iframe>
As a commentor said above, use an iframe so you can keep processing code even if your window.location fails. Then, set up a simple setTimeout with a reasonable fallback time. You don't need to catch any error messages or response headers. If the app didn't launch, then a website will.
Just thought to add, since you want A) Launch App from link and upon failure B) Go to store to download the app.
A Cross-Platform solution you can use rather than rolling your own as an alternative, I'd suggest trying Firebase Dynamic Links (works on both Android and iOS) and its free.
It also has the benefit of providing your app the link information, like if you put in the link an article ID (from your news website example), then the app can load up that article upon launch, and it persists even if the user has to install the app from the store, when launched it will open to that article you specified in the link.
In addition, Dynamic Links work across app installs: if a user opens a Dynamic Link on iOS or Android and doesn't have your app installed, the user can be prompted to install it; then, after installation, your app starts and can access the link.
https://firebase.google.com/docs/dynamic-links
With very little code you can add the ability for a user to click a link on your mobile web and be taken to the corresponding page in your app, even if they have to go to the App Store or Google Play Store to install it first!
https://firebase.google.com/docs/dynamic-links/use-cases/web-to-app