Implement WebApp Direct-adjust Nativeapp

Original http://www.baidufe.com/item/3444ee051f8edb361d12.html

Try a small demo, from the WebApp directly on the Android Native app, including the application has been installed and not installed, or quite interesting, record something:

First, add <intent-filter/> to the <activity/> label in Androidmanifest.xml, as follows:

<!--用这个Activity专门处理本App调起的情况--><activity android:name="com.baidufe.shemedemo.SchemeActivity"          android:label="@string/app_name">    <!--要想在别的App上能成功调起App，必须添加intent过滤器-->    <intent-filter>        <!--协议部分，随便设置-->        <data android:scheme="baidufe"/>        <!--下面这几行也必须得设置-->        <category android:name="android.intent.category.DEFAULT"/>        <action android:name="android.intent.action.VIEW"/>        <category android:name="android.intent.category.BROWSABLE"/>    </intent-filter></activity>

Second, receive and process the URI request in schemeactivity, implement jump to different native app page, get URI can be implemented in activity through Getintent (). GetData (), Demo:

// 尝试获取WebApp页面上过来的URLUri uri = getIntent().getData();if (uri != null) {    StringBuffer sb = new StringBuffer();    // 完整的url信息    sb.append("url: " + uri.toString());    // scheme部分    sb.append("\nscheme: " + uri.getScheme());    // host部分    sb.append("\nhost: " + uri.getHost());    // 访问路劲    sb.append("\npath: ");    List<String> pathSegments = uri.getPathSegments();    for (int i = 0; pathSegments != null && i < pathSegments.size(); i++) {        sb.append("/" + pathSegments.get(i));    }    // Query部分    sb.append("\nquery: ?" + uri.getQuery());      tv.setText(sb.toString());}

Third, on the WebApp page, use the following methods:

<!-- 注意这里的href格式 -- ><ahref="baidufe://schemedemo/get/info?id=10000">open baidufe android app</a>

The link above seems to see the link is not the same, baidufe://this protocol is registered to the Android app, the entire format is our custom, of course, can also be changed to any appearance, such as: com.baidufe://a/b/c. However, the format of this URI needs to be defined in advance, otherwise it cannot be matched in schemeactivity. In Schemeactivity, you can get to this URI, and fragment parse, and then start a different activity, to jump from WebApp to the different pages of the native app.

Of course, there is another way, through the registration service, and through the Serversocketchannel to bind a port, such as 9999, after the service is started, you can webapp in the http://127.0.0.1:9999 Access, of course, according to the different implementation of the service, you can add a certain path and query, such as: http://127.0.0.1:9999/dealIntent?intent=....&callback= .... This approach is more flexible than scheme, but the downside is obvious: the service is in a startup state and power consumption is a must.

Original http://www.baidufe.com/item/cc592a4b3382eed8ec6e.html

Often there are scenarios where the native-app we develop need to be promoted in Web-app, such as a large banner image at the top of the page, or a QR code. But often we are directly to promote the image plus a download link (in the APP store). So let's simulate how the user steps:

1, the first time users visit Web-app

A, click Banner, go to the App Store in the corresponding app download page

b, the app download page prompts: Install; user Click Install

C, after the installation is complete, the app download page prompts: Open; user continues to click Open

D, the user normal use of the app

2, the user second visit web-app

A, click Banner, go to the App Store in the corresponding app download page

b, the app download page prompt: Open, user directly click Open

c, the user normal use of the app

3, the user third, the fourth time 、...、 nth visit Web-app, the operation steps with 2

Can be seen, whether it is click Banner or scan QR code, for users who have installed the native app, this experience is very bad.

Better experience is: click Banner (or scan the QR code), the program to determine whether the current system is installed native app, if not installed, then automatically jump to the App Store download page, or directly open the native app.

On iOS, to add an app to the big banner, in fact, only need to add a <meta> tag within the

<meta name= ' Apple-itunes-app ' content= ' app-id= your App-id ' >

For example, add a Baidu bar native app Big banner, with the following string of code:

<metaname=‘apple-itunes-app‘content=‘app-id=477927812‘>

And for the click Link, can open directly, the following code to achieve. Prerequisites: You need to know your app to open the protocol, such as Paste app, the agreement is: com.baidu.tieba://, the: weixin://, and so on ...

<!-- a标签的链接，设置为对应的下载链接；点击打开的动作，在click事件中注册 --><a href="https://itunes.apple.com/cn/app/id477927812" id="openApp">贴吧客户端</a><script type="text/javascript">    document.getElementById(‘openApp‘).onclick = function(e){        // 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为        // 否则打开a标签的href链接        var ifr = document.createElement(‘iframe‘);        ifr.src = ‘com.baidu.tieba://‘;        ifr.style.display = ‘none‘;        document.body.appendChild(ifr);        window.setTimeout(function(){            document.body.removeChild(ifr);        },3000)    };</script>

Of course, if you are designing a two-dimensional code, you can use the following code:

<!-- a标签的链接，设置为对应的下载链接；点击打开的动作，在click事件中注册 --><a href="https://itunes.apple.com/cn/app/id477927812" id="openApp" style="display: none">贴吧客户端</a><script type="text/javascript">    document.getElementById(‘openApp‘).onclick = function(e){        // 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为        // 否则打开a标签的href链接        var ifr = document.createElement(‘iframe‘);        ifr.src = ‘com.baidu.tieba://‘;        ifr.style.display = ‘none‘;        document.body.appendChild(ifr);        window.setTimeout(function(){            document.body.removeChild(ifr);        },3000)    };    document.getElementById(‘openApp‘).click();

Which one to use depends on your actual scene!

Implement WebApp Direct-adjust Nativeapp