How do I redirect to a custom URI scheme or show some content if not supported?
Long story short: Is it possible to redirect the visitor to a custom URI scheme or show some content if this scheme is not supported?
In my particular case, I am creating a mobile app that registers a custom URI scheme so that users can invite other users to certain actions in the app by sending links via SMS or email.
The links point to my server (running PHP on Apache) and the server redirects visitors to the correct schema. This works fine until all redirect pages are complete, but I would like to show some content in case the email is opened on a computer or other device that doesn't have my application installed.
I've tried to achieve this with these Javascript tricks , and also serving both the location header and content from a PHP script on the server. Nothing works. I also tried using the tag <meta http-equiv="Location" content="myscheme://testing">
on the page, but did nothing.
Some people have suggested using the user agent nuance to find out if a client is using a mobile or desktop browser. I already do this, as well as pre-check, but it still leaves the option to open the link on a mobile device that doesn't have my app installed and these people will be left with a blank page.
Is there a way to achieve this, or am I out of luck?
source to share
Revised version, original at the bottom:
To keep things fast and clean, I decided to keep the redirect page that way. Also, I decided that the redirect page shouldn't stay in the browser history to avoid endless purple buttons . So 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 several attempts, I found that it is actually possible with Javascript. I just had to make it a little easier than mine:
<!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 is what I need. This unfortunately throws an error in the Javascript console where the redirect cannot be done, but I guess I'll just have to live with that.
source to share
If you want a different, free and much simpler solution that doesn't require constant configuration on your server to support different browsers, check out branch.io . The links have all this code, but if you are using the SDK you can even get the post path setting for the URI (for new users). Links support Facebook AppLinks, Twitter Flashcards and pretty much everything out of the box.
You can use toolbar, API or SDK to create links. In your case, the SDK is most suitable for custom prompts. Here's an example of how to create a link and set up redirect endpoints:
JSONObject dataToInclude = new JSONObject();
try {
// customize the display of the Branch link
dataToInclude.put("$og_title", "Joe 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 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());
}
}
});
source to share
In your php script, you can check the user agent to see if there is a desktop or mobile browser. In case it is a desktop browser, you will redirect the user to the http application.
"Updated answer": I think you cannot, please see this facebook thread: https://developers.facebook.com/docs/applinks/android
But, I think you could create your deeplinking using the "http" scheme with your network like: " http://example.com/ ", so the mobile will intercept this URL as a deep link and open the app, not just browser: https://developer.android.com/training/app-indexing/deep-linking.html
source to share