To put it short: Is it possible to redirect a visitor to a custom URI scheme, or show some content if that scheme is not supported?
My particular use case is that I'm creating a mobile app that registers a custom URI scheme so that users can invite other users to certain actions within the app by sending links via SMS or e-mail.
The links point to my server (running PHP on Apache), and the server redirects the visitors to the proper scheme. This works perfectly as long as that's all the redirect page does, but I'd like to be able to show some content in case the e-mail is opened on a computer or some other device that doesn't have my app installed.
I've tried to achieve this with these Javascript tricks as well as serving both a Location header and the content from the PHP script on the server. Neither works. I also tried using a <meta http-equiv="Location" content="myscheme://testing"> tag on the page, but that didn't do anything either.
Some people have suggested using user-agent sniffing to see whether the client is using a mobile or a desktop browser. I am already doing this as well as a preliminary check, but it still leaves the possibility the link is opened on a mobile device that doesn't have my app installed, and those people would be left with an empty page.
Is there some way to achieve this, or am I out of luck?
Revised version, original at the bottom:
To keep things quick and clean, I decided to keep the redirect page as just that. Furthermore I figured that the redirect page shouldn't stay in the browser's history to avoid never-ending back-button fiascos. Thus I ended up with this version:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Redirecting...</title>
<script>
var redirectToApp = function() {
setTimeout(function appNotInstalled() {
window.location.replace("http://example.com/app-not-installed");
}, 100);
window.location.replace("myscheme:someaction");
};
window.onload = redirectToApp;
</script>
</head>
<body></body>
</html>
Original answer:
After some more fiddling I found that this is in fact possible with Javascript. I just had to make it a bit simpler than what I had:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to my app</title>
<script>
var redirectToApp = function() {
document.location = 'myscheme:someaction';
};
window.onload = redirectToApp;
</script>
</head>
<body>
You don't have the app installed.
</body>
</html>
This does exactly what I need. It does unfortunately cause an error in the Javascript console when the redirect can't be done, but I guess I'll just have to live with that.
If you want another, free and much simpler solution that doesn't involve constant tweaking on your server to support different browsers, check out branch.io. The links have all of this code in them, but if you use the SDK, you can even receive the URI path post install (for new users). The links support Facebook AppLinks, Twitter cards and pretty much everything out of the box.
To create links, you can use the dashboard, API or SDKs. In your case, the SDK is most suitable for user to user invites. Here's an example on how to create a link and customize the redirect endpoints:
JSONObject dataToInclude = new JSONObject();
try {
// customize the display of the Branch link
dataToInclude.put("$og_title", "Joe's My App Referral");
dataToInclude.put("$og_image_url", "https://s3-us-west-1.amazonaws.com/myapp/joes_pic.jpg");
dataToInclude.put("$og_description", "Join Joe in My App - it's awesome");
// customize the desktop redirect location
dataToInclude.put("$desktop_url", "http://example.com/app-not-installed");
} catch (JSONException ex) { }
Branch branch = Branch.getInstance();
branch.getShortUrl("text_message", Branch.FEATURE_TAG_SHARE, "share_screen", dataToInclude, new BranchLinkCreateListener() {
@Override
public void onLinkCreate(String url, Branch.BranchError error) {
if (error == null) {
// show the link to the user or share it immediately
} else {
Log.i("MyApp", error.getMessage());
}
}
});
In your php script you could check user agent to see if a desktop or mobile browser. In case that would be a desktop browser then you will redirect the user to http application.
"Updated answer":
I think that you can't, please see this facebook flow:
https://developers.facebook.com/docs/applinks/android
But, I think that you could create your deeplinking using the scheme "http" with your web as:
"http://example.com/" so mobile intercept that url as a deep linking and open your application instead of only the browser: https://developer.android.com/training/app-indexing/deep-linking.html
