Apps

Web-to-app interoperability: Launch your Android app from the web

With rich apps and the web blending more every day, Kyle Miller is certain you'll find a use case for this technique of how to launch your Android app from the web.
Android and iOS allow installed applications to respond to custom URIs from the web. Since I'm not as familiar with iOS, I will only cover how Android allows this to work, and how you can use this technique to your advantage.

There are several use cases for allowing your app to handle custom URIs. The first one I'll cover is simply launching your application.

Launching your application from the web

A common trend is for companies to include a link to download their rich application on its website. One way you could handle a link like this is to launch the rich application if the user already has it installed, or direct them to the market so they can download it.

First, you need to decide what URI you are going to use to achieve this. My natural tendency was to come up with a custom URI that, chances are, only your application will recognize, e.g., appname://get.my.app. However, after doing some research, I found a comment from a Google Engineer (or so the comments seem to indicate) on Stack Overflow that strongly recommended against this approach. He states:

"Please DO NOT use your own custom scheme like that!!! URI schemes are a network global namespace. Do you own the "anton:" scheme world-wide? No? Then DON'T use it."

Instead, he recommends using a URI of a website that you own, and I think this makes a lot of sense. After all, most legitimate apps on the market have a website counterpart, so why not take advantage of it?

Let's assume your application's website is http://yourapp.com. I recommend using a "/get/" URI from your website. You'll want to make your Android application respond to this URI from the web. This is achieved by assigning an intent-filter in your application's Manifest XML file, as such:

<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="yourapp.com"

android:path="/get/" />

</intent-filter>

The VIEW action and BROWSABLE category are both needed so your activity can respond to web URIs. The data element is necessary to have the activity respond to the particular URI I mentioned previously, and that element's attributes should be fairly self-explanatory.

The only thing left to do is to create a landing page such as "/get/index.html" on your site that will redirect the user to the appropriate app store to download your app. The following simple script could be used:

<script>

if( navigator.userAgent.match(/android/i) ) {

// redirect to the Android Market

}

else if( navigator.userAgent.match(/iPhone/i) ) {

// redirect to iTunes

}

</script>

Now that everything is in place, you can create a link that will launch your app or redirect the user to the market if your app is not installed:

<a href="http://yourapp.com/get/">Download our App!</a>

Communicating with your app

You could take this technique a step further to communicate data from the web to your application.

Let's assume you want to be able to have a user click a link on your website that automatically composes an SMS for them on their phone. This time, instead of using the ‘path' attribute in the data tag of the intent-filter, we can use the pathPrefix attribute.

<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="yourapp.com" android:pathPrefix="/sms/" />

</intent-filter>

The pathPrefix attribute will allow your app to respond to links such as:

<a href="http://yourapp.com/sms/5554443333/hello">Compose SMS</a>

Next, you can add the following code to the onCreate method of the activity you applied the intent-filter to:

List<String> path = getIntent().getData().getPathSegments();

Uri uri = Uri.parse("smsto:" + path.get(1));

Intent intent = new Intent(Intent.ACTION_SENDTO, uri);

intent.putExtra("sms_body", path.get(2));

startActivity(intent);

As you can see from the code above, we start by getting an array of the path segments of the URI that was captured by the intent-filter. In this case, the array would look like this:

["sms", "5554443333", "hello"]

Now it's just a matter of crafting the intent using the path segments array and launching the intent.

Conclusion

The example I provide in this post is fairly basic, but I hope it will help you apply the same logic to solve your own problem. With rich apps and the web becoming more of a blend every day, I'm sure you will eventually find a use case for this technique.

About

Kyle is a senior software engineer specializing in web/Android development living in Austin TX. He's a self-professed "gadget freak" whose passion for mobile devices drove him to jump into the mobile industry in 2010. He enjoys the fast-paced nature ...

4 comments
palex1988
palex1988

Hi Kyle, please help me.

I have my website xxxxxx.com. When a user enter on my website with mobile, and click to a link, i want to start his sms application. It's that possible ? How can i do that ? Where i need to put this

<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="yourapp.com" android:pathPrefix="/sms/" />

</intent-filter>

? On my server ?

bharatkumar.kona
bharatkumar.kona

Hi Kyle Miller, This article is really helpful. I have couple of doubts on this. It will be great if you can clarify them.


If we use http://yourapp,com/get instead of custom URI, will the phone recognize this as http protocol and give the option of opening this Using a browser installed on the device. I guess it will show the options of whether to open the link using Google Chrome(installed on device) or our Application.


let me know if my question makes sense.


Thanks

Bharat

bharatkumar.kona@gmail.com

vipulkhandelwal
vipulkhandelwal

Hi, How can I launch facebbok app from any button on my web page, is it possible, if yes how can i acheive this. Please reply.

theVot
theVot

That's very interesting! thanks for sharing! I'd like to see/test a living example of that.. Do you know any android app with this feature? thank you in advance!