Reading Time: 2 minutesAt work, while the developments of IOS and Android mobile apps were taking place, I was asked to show a small screen to mobile visitors in order for informing them that they can launch the application or install, you may simply see the situation below. The application is a J2EE application, but i do display a small screen to notify user about the mobile app depending on the device fetched.
Then initially I’ve designed and coded the backend and frontend to catch the mobile devices, and show a nice gui. Hereby I’ll be sharing the complete end-to-end solution. Let’s get started with how to implement a nice gui you observe in the above screen,
javascript to catch mobile devices:
<script type="text/javascript">
function iosDeviceLauncher() {
document.location = 'macfit://';
setTimeout(
function() {
document.location = 'https://itunes.apple.com/tr/app/macfit/id1129766662';
}, 2500);
}
var userAgent = navigator.userAgent.toLowerCase();
var deviceIsAndorid = userAgent.match(/android/);
var deviceIsIos = userAgent.match(/(iphone|ipod|ipad)/);
if (deviceIsAndorid) {
$('.androidDevice').show();
} else if (deviceIsIos) {
$('.iosDevice').show();
}
</script>
index.xhtml
<div id="androidDeviceContent" style="display: none;"
class="androidDevice">
<img src="/images/macfit_mobile_logo.png" height="80px" width="80px"
style="float: left;" />
<div class="mobileAppContent">
#{msg.template_macfit_title} <br /> #{msg.mobile_app_android_1}
</div>
<div class="mobileAppLink">
<a
href="intent://macfit.adesso.com/#Intent;package=com.adesso.macfit;scheme=http;end;">#{msg.mobile_app_run_on_app}</a>
</div>
</div>
<div id="iosDeviceContent" style="display: none;" class="iosDevice">
<img src="/images/macfit_mobile_logo.png" height="80px" width="80px"
style="float: left;" />
<div class="mobileAppContent">
#{msg.template_macfit_title} <br /> #{msg.mobile_app_ios_1}
</div>
<div class="mobileAppLink">
<a href="#" onclick="iosDeviceLauncher()">#{msg.mobile_app_run_on_app}</a>
</div>
</div>
Android Part
<intent-filter>
<action android:name="android.intent.action.VIEW"></action>
<category android:name="android.intent.category.DEFAULT"></category>
<category android:name="android.intent.category.BROWSABLE"></category>
<data android:scheme="http" android:host="macfit.adesso.com"></data>
</intent-filter>
The easiest part was android I would frankly say, so first of all when visitors tap on the launch the app or if it is not installed, it will forward the visitor to Google Play store to install the app easy peasy.
IOS Part
IOS was a challenging part for me I had to look for a possible solution, IOS itself for now as I conducted a long search, does not have any ability to run the app if installed, if not then open the application on the store to be installed. As you study the JQuery file I used a solution to launch the app, wait for 2500 ms for user action, if it falls then the visitor is forwarded to the Apple store in order for installing the application.
References
http://stackoverflow.com/questions/1108693/is-it-possible-to-register-a-httpdomain-based-url-scheme-for-iphone-apps-like/1109200#1109200
The Complete Tutorial on iOS/iPhone Custom URL Schemes
https://paul.kinlan.me/launch-app-from-web-with-fallback/
