Open app if installed, open site if not.

MeTV

So, this morning I started off on a little project, thinking it would be nice & simple & straightforward - I was wrong!

What I'm looking to do, using JavaScript, is, is open the social media links on a website in the relevant apps if they're installed or as normal in the browser if they're not. I need this to be as cross-platform (not just Android phones and poxy Apple devices) and "silent" (with minimal to no interruption to the visitor) as possible.

A bit of pseudo-code to illustrate what I'm trying to achieve:

From a link structured like this:

<a data-applink="[I]scheme[/I]://[I]target[/I]" data-type="app" href="[I]uri[/I]">

I want to be able to run something like this:

if([I]Device.HasAppSupport[/I]&&[I]Device.HasURLSchemeSupport[/I]){
	var l=document.getElementsByTagName("a");
	for(var x=l.length;x--;){
		if(l[x].dataset.type=="app"){
			l[x].addEventListener("click",function(e){
				if([I]Device.AppInstalled[/I]){
					// [I]Open l[x].dataset.applink in app[/I]
				}else{
					// [I]Open l[x] in browser[/I]
				}
				e.preventDefault();
			},0);
		}
	}
}

(The code above is a deliberate over-simplification to help illustrate what I'm trying to do)

Like I said, I would have though that this is simple, but, after a good few hours with Google, I still can't pin it down. Am I wasting my time here or am I missing something completely?

Draco

Have a look at what thejournal.ie and adverts.ie do. As far as I know, they try and open the link first using an app URL. If the app isn't installed, the link will open in the browser. There isn't a direct way in JavaScript to detect if an app is installed or not.

A quick google suggests trying to open the url using AJAX first and then opening it properly.

Ballyv24

I think daft.ie does something similar

MeTV

Thanks, guys, but I don't see any social media links (or links that might behave in this manner) when viewing those sites in my phone.

I know, obviously, that you can't just check if an app is installed on a device - as I said, the code above was an over-simplification to illustrate what I'm trying to achieve

XML requests, nice as they would be in this instance, don't work with custom URL schemes.

techdiver

Draco wrote: »

Have a look at what thejournal.ie and adverts.ie do. As far as I know, they try and open the link first using an app URL. If the app isn't installed, the link will open in the browser. There isn't a direct way in JavaScript to detect if an app is installed or not.

Their implementation is shocking! Try clicking a thejournal.ie article from facebook on Android. It always re-directs to the play store. If you return back to the page you are presented with 2 options:

"Read article now on TheJournal.ie"
"Or just browse TheJournal.ie"

The first link continuously loads the play store and you can never access the article directly unless you request for the desktop site. the second link just brings you to the home page and you have to search for the article you are looking for.

oscarBravo

The "correct" way to do this on Android is to have the app include an intent-filter that includes

<data android:scheme="http" android:host="www.example.com">

In other words, you just have a target URL in the hyperlink; no javascript or other such. When you tap the link on a phone without the app installed, it opens the page in the browser. If the app is installed, tapping the link gives the option of opening the page in the browser or launching the app.

Presumably there are analogues on other platforms. I guess my point is that a web page shouldn't be trying to figure out how to launch apps on a multitude of devices; the devices themselves will usually provide a mechanism to launch an app when you request a particular type of URI from the browser.

Creamy Goodness

Please don't do this if you value your users of your site.

Vex Willems

Creamy Goodness wrote: »

Please don't do this if you value your users of your site.

+1 on this, hate it.

oscarBravo

I guess it depends on the quality of the app versus the site. I know I'm happy to have any maps.google.com URIs launch the Maps application on my phone rather than the much less useful mobile web site.

MeTV

Yeah, that was the logic I was using, Oscar. If a visitor has, say, the Facebook app installed, it (usually) provides a better experience than the mobile site and it's also less likely that they're logged in to Facebook's mobile site. By opening the relevant page in the app, they can start interacting with it immediately, without having to fiddle about with the log in.

I didn't realise that (on Android devices at least), the device can "intercept" the clicking of links to sites that have apps installed and offer the visitor the choice to open them in the relevant app, so that kind of renders what I'm trying to do slightly moot! I was only using Facebook to run my tests and, on my S3, clicking on a FB link doesn't offer any choice, it always takes me to the site, which is why I started down this route. I just tried with a Twitter link and it did indeed offer me a choice

Does anyone know if any other devices (Apple devices, Blackberrys, Windows Phones, tablets, smart TVs, etc.) behave in the same way?