YogendraChauhan/index.html

## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>App Redirection</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <script>
  function openApp()
	{
		//see if our window is active
		window.isActive = true;
		$(window).focus(function() { this.isActive = true; });
		$(window).blur(function() { this.isActive = false; });

	    // For desktop browser, remember to pass though any metadata on the link for deep linking
	    var fallbackLink = 'your website url';
	    // Simple device detection
	    var isiOS = navigator.userAgent.match('iPad') || navigator.userAgent.match('iPhone') || navigator.userAgent.match('iPod'),
	        isAndroid = navigator.userAgent.match('Android'), isWindow = navigator.userAgent.match('Windows Phone');
	        // Mobile
	        if (isiOS || isAndroid || isWindow) {
	      		// Load our custom protocol in the iframe, for Chrome and Opera this burys the error dialog (which is actually HTML)
	      		// for iOS we will get a popup error if this protocol is not supported, but it won't block javascript

	      		var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
				if (isMobile) {
					var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
					var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
					if (isChrome){
						window.location  = 'custom-protocol://my-app';
					}else
					{
						document.getElementById('loader').src = 'custom-protocol://my-app';
					}
				}

	      		// The fallback link for Android needs to be https:// rather than market:// or the device will try to
	      		// load both URLs and only the last one will win. (Especially FireFox, where an "Are You Sure" dialog will appear)
	      		// on iOS we can link directly to the App Store as our app switch will fire prior to the switch
	      		// If you have a mobile web app, your fallback could be that instead.
	      		      fallbackLink = isAndroid ? 'https://play.google.com/store/apps/details?id=com.mycompany.myapp' :
                                 'itms-apps://itunes.apple.com/app/my-app/idxxxxxxxx?mt=8' ;
	    	}

	    	// Now we just wait for everything to execute, if the user is redirected to your custom app
	    	// the timeout below will never fire, if a custom app is not present (or the user is on the Desktop)
	    	// we will replace the current URL with the fallbackLink (store URL or desktop URL as appropriate)
	    	window.setTimeout(function (){
	    		if (window.isActive) {
	    			window.location.replace(fallbackLink);
	    		}
	    	}, 1000);
		    /*
		      Q&A
	      	I have a native desktop app as well, how do I link to a custom protocol handler on the desktop?
	        IE Only: http://msdn.microsoft.com/en-us/library/ms537512.aspx#Version_Vectors
	        All Other Browsers: Use a custom plugin like iTunes does: http://ax.itunes.apple.com/detection/itmsCheck.js
	    	*/
  		};

  		window.onload = function()
  		{
  			var button = document.getElementById("button");
  			button.onclick = function()
  			{
  				openApp();
  			};
  		};
  </script>
  <style type="text/css">
  	#button
  	{
  		border:1px solid #7c5b2b; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
		 background-color: #a67939; background-image: -webkit-gradient(linear, left top, left bottom, from(#a67939), to(#845108));
		 background-image: -webkit-linear-gradient(top, #a67939, #845108);
		 background-image: -moz-linear-gradient(top, #a67939, #845108);
		 background-image: -ms-linear-gradient(top, #a67939, #845108);
		 background-image: -o-linear-gradient(top, #a67939, #845108);
		 background-image: linear-gradient(to bottom, #a67939, #845108);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#a67939, endColorstr=#845108);
  	}
  </style>
</head>
<body>
  <!-- iframe used for attempting to load a custom protocol -->
  <iframe style="display:none" height="0" width="0" id="loader"></iframe>
  <div class="button" id="button" type="openApp">Open App</div>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>App Redirection</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
	<script>
	function openApp()
	{
	//see if our window is active
	window.isActive = true;
	$(window).focus(function() { this.isActive = true; });
	$(window).blur(function() { this.isActive = false; });

	// For desktop browser, remember to pass though any metadata on the link for deep linking
	var fallbackLink = 'your website url';
	// Simple device detection
	var isiOS = navigator.userAgent.match('iPad') \|\| navigator.userAgent.match('iPhone') \|\| navigator.userAgent.match('iPod'),
	isAndroid = navigator.userAgent.match('Android'), isWindow = navigator.userAgent.match('Windows Phone');
	// Mobile
	if (isiOS \|\| isAndroid \|\| isWindow) {
	// Load our custom protocol in the iframe, for Chrome and Opera this burys the error dialog (which is actually HTML)
	// for iOS we will get a popup error if this protocol is not supported, but it won't block javascript

	var isMobile = /iPhone\|iPad\|iPod\|Android/i.test(navigator.userAgent);
	if (isMobile) {
	var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
	var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
	if (isChrome){
	window.location = 'custom-protocol://my-app';
	}else
	{
	document.getElementById('loader').src = 'custom-protocol://my-app';
	}
	}

	// The fallback link for Android needs to be https:// rather than market:// or the device will try to
	// load both URLs and only the last one will win. (Especially FireFox, where an "Are You Sure" dialog will appear)
	// on iOS we can link directly to the App Store as our app switch will fire prior to the switch
	// If you have a mobile web app, your fallback could be that instead.
	fallbackLink = isAndroid ? 'https://play.google.com/store/apps/details?id=com.mycompany.myapp' :
	'itms-apps://itunes.apple.com/app/my-app/idxxxxxxxx?mt=8' ;
	}

	// Now we just wait for everything to execute, if the user is redirected to your custom app
	// the timeout below will never fire, if a custom app is not present (or the user is on the Desktop)
	// we will replace the current URL with the fallbackLink (store URL or desktop URL as appropriate)
	window.setTimeout(function (){
	if (window.isActive) {
	window.location.replace(fallbackLink);
	}
	}, 1000);
	/*
	Q&A
	I have a native desktop app as well, how do I link to a custom protocol handler on the desktop?
	IE Only: http://msdn.microsoft.com/en-us/library/ms537512.aspx#Version_Vectors
	All Other Browsers: Use a custom plugin like iTunes does: http://ax.itunes.apple.com/detection/itmsCheck.js
	*/
	};

	window.onload = function()
	{
	var button = document.getElementById("button");
	button.onclick = function()
	{
	openApp();
	};
	};
	</script>
	<style type="text/css">
	#button
	{
	border:1px solid #7c5b2b; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
	background-color: #a67939; background-image: -webkit-gradient(linear, left top, left bottom, from(#a67939), to(#845108));
	background-image: -webkit-linear-gradient(top, #a67939, #845108);
	background-image: -moz-linear-gradient(top, #a67939, #845108);
	background-image: -ms-linear-gradient(top, #a67939, #845108);
	background-image: -o-linear-gradient(top, #a67939, #845108);
	background-image: linear-gradient(to bottom, #a67939, #845108);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#a67939, endColorstr=#845108);
	}
	</style>
	</head>
	<body>
	<!-- iframe used for attempting to load a custom protocol -->
	<iframe style="display:none" height="0" width="0" id="loader"></iframe>
	<div class="button" id="button" type="openApp">Open App</div>
	</body>
	</html>