Home > Developer > Mobile Develop

Browser determines if the Ios/android client program is installed

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

 Category:Iphone Programming2013-08-26 10:38 1851 people read comments (2) favorite reports

Recently in a project, the project was formerly a website tailored for mobile browser. Now there is a need:

When users use mobile browser to browse the site, they will click on a button/hyperlink, click on this button to open the application installed on the computer, or if the computer does not install the application then open the store and open the program in the store search results page.

At the beginning of the iphone team people gave a solution, below is the implementation of the jump HTML + JavaScript source code.

[HTML]View Plaincopyprint?
  2. <html>
  4. <head>
  6. <meta name= "viewport" content= "width=device-width" /> /c1>
  8. </head>
  10. <body>
  12.         <h2 ><a id= "Applink1"  href= mtcmtc:// profile/116201417 ">open scheme (MTCMTC)  defined in iphone with  parameters </a> </h2>     
  14.         < H2><a id= "applink2"  href= unknown:// Nowhere ">open unknown with fallback to appstore </a></ h2>     
  16. <p><i>only works on iphone! </i></P>
  20. <script type="Text/javascript">
  22. To avoid the ' protocol not supported ' alert, fail must open another app.
  24. var appstore = "itms://itunes.apple.com/us/app/facebook/id284882215?mt=8&uo=6";
  26. function AppLink (fail) {
  28. return function () {
  30. var clickedat = +new Date;
  32. During tests on 3G/3GS This timeout fires immediately if less than 500ms.
  34. SetTimeout (function () {
  36. To avoid failing in return to Mobilesafari, ensure freshness!
  38. if (+new Date-clickedat < ) {
  40. window.location = fail;
  42. }
  44. }, 500);
  46. };
  48. }
  50. document.getElementById ("Applink1"). onclick = AppLink (AppStore);
  52. document.getElementById ("Applink2"). onclick = AppLink (AppStore);
  54. </Script>
  56. </Body>
  58. </html>

The principle is to add a settimeout method to the hyperlink Click event in the HTML page.

If in the iphone above 500ms, the native application can resolve the protocol and open the program, the callback method fails, if the native no application can resolve the protocol, or 500MS does not open a program, then execute settimeout inside the function, is to jump to Apple's itunes.


I use the same principle to deal with the Android JavaScript jump, found that if the machine does not register intent-filter for this protocol, then the Android built-in browser will deal with this protocol and immediately give a response (404, you Understand), Does not perform the function in the settimeout like the iphone, even if you change the 500ms to 0ms.

I started my google search journey and eventually found solution in a humble spot in StackOverflow.

Do not explain, first give the source code

Android inside Androidmanifest.xml file on the activity configuration, how to configure it does not express, limited expression capacity, please refer to developer.android.com


[HTML]View Plaincopyprint?
  2. <activity android:name=". UI. Uploadactivity " android:screenorientation="portrait ">
  4. <intent-filter>
  6.                  <data android:scheme= "http"  android:host= " 192.168.167.33 " android:port=" 8088 " android:path= "/mi-tracker-web/download.html" />     
  8. <action android:name="Android.intent.action.VIEW" />
  10. <category android:name="Android.intent.category.DEFAULT" />
  12. <category android:name="Android.intent.category.BROWSABLE" />
  14. </intent-filter>
  16. </activity>


The HTML page hyperlink to the application

[HTML]View Plaincopyprint?
    1. <a id="Applink1" href="http://192.168.167.33:8088/mi-tracker-web/download.html">
    2. Open application</a>


It is not difficult to see that the property representation of data in the filter configured in Androidmanifest.xml is all seen in the html.href below. Please note that these two paths are all consistent and cannot be differentiated, otherwise the Android system will not intercept this hyperlink.

Well, why do I say this solution can solve the demand we put forward, the answer is here:

If this app is installed on this machine,

Clicking on Applink1,browser in the HTML in Android browser redirects to the specified link, but because our app has a intent-filter configured in the Android OS, it's also a link for this. This means that the Android system now has two programs that can handle this link: One is the browser of the system, and the other is the activity that configures the intent-filter. Now click on this link, the system will pop up a choice: is to use browser or your designated activity open. If you choose your activity, the system will open your application, if you continue to choose to use browser, then there is no.

If the native wood has installed this application

Then this hyperlink in the HTML is very important around, this download.html inside can forward to the Android App Store

Download.jsp source code is as follows. Specifically why the request is download.html this address but access to download.jsp, do not explain, struts2 things.


[HTML]View Plaincopyprint?
  2. <%@ page language="java" contenttype="text/html; Charset=iso-8859-1 "
  4. pageencoding="iso-8859-1"%>
  6. <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd">
  8. <html>
  10. <head>
  12. <Meta http-equiv= "content-type" content= "text/html; Charset=iso-8859-1 ">
  14. <title>insert title here</title>
  16. </head>
  18. <body>
  20. <script type="Text/javascript">
  22. <span style="White-space:pre"> </span>window.location="  Market://search?q=com.singtel.travelbuddy.android ";
  24. </Script>
  26. </body>
  28. </html>

Alas, the writing is not good, I think I write it is not how to understand. Then the key points of the jump to say:

When defining Intent-filter in Androidmanifest.xml, the defined Scheme,host,port,path is a useful HTTP path, so that if the machine does not have activity defined intent-filter to capture this link, it This link is also redirected to the page that opens the Android marketplace and opens the store. Because every Android phone captures the market protocol (if the Android phone doesn't have a market store, it doesn't blame me), the system automatically opens the Marketplace Place store and enters the search page and displays the results based on the parameters.

Browser determines if the Ios/android client program is installed

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More