I've been looking for a way to open a native iOS app from the browser.
I found a decent solution here: Is it possible to register a http+domain-based URL Scheme for iPhone apps, like YouTube and Maps?
This solution works great when you have the app installed. but when a user doesn't have this app installed - safari fires an error message which says "Safari cannot open the page because the address is invalid."
Is there a way to prevent this behaviour and instead to prompt the user to download the app?
Here is a solution that works for me:
var timeout;
function preventPopup() {
clearTimeout(timeout);
timeout = null;
window.removeEventListener('pagehide', preventPopup);
}
function openApp() {
$('<iframe />')
.attr('src', appurl)
.attr('style', 'display:none;')
.appendTo('body');
timeout = setTimeout(function() {
document.location = appstore;
}, 500);
window.addEventListener('pagehide', preventPopup);
}
use iframe.
$('<iframe />').attr('src', "appname://").attr('style', 'display:none;').appendTo('body');
For solving this and avoid no wanted iOS safari alert I've used a different approach handle also an iframe but without jquery and listener events. It works perfectly.
var iframe = document.createElement("iframe");
iframe.style.border = "none";
iframe.style.width = "1px";
iframe.style.height = "1px";
iframe.onload = function () {
document.location = alt;
};
iframe.src = nativeSchemaUrl; //iOS app schema url
window.onload = function(){
document.body.appendChild(iframe);
}
setTimeout(function(){
window.location = fallbackUrl; //fallback url
},300);
I'm using meta refresh as fallback because this works without javascript. This code works in iOS and Android.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="refresh" content="1; url=http://www.facebook.com">
<title>Redirecting..</title>
<script>
function tryOpenApp() {
var iframe = document.createElement("iframe");
iframe.style.border = "none";
iframe.style.width = "1px";
iframe.style.height = "1px";
iframe.src = "fb://feed/";
document.body.appendChild(iframe);
}
</script>
</head>
<body onload="tryOpenApp()">
</body>
</html>
Test http://static-pmoretti.herokuapp.com/deep-link/
The right way to do this is to use Smart App Banners:
https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html
If your app is not installed, the banner will let the user install it. If it is installed, it will open the app, and you have a way of specifying custom URL arguments to pass to the app.