H5唤起APP实践指南

应用场景

H5唤醒APP常见的应用场景是在一些活动页面引导用户进行下载或打开APP以达到推广引流的作用。一般有以下两种情况：

引导已下载APP用户打开APP，提升用户体验，用户粘性
引导未下载APP用户去下载APP，推广引流，增加用户量

方案介绍

1、URL Scheme

简介

相信大家都知道 URL，例如https://www.baidu.com就是一个URL。

在 ??/ 之前的部分就称为 URL Scheme。

也就是说https://www.baidu.com的 URL Scheme 就是 https。

简单来说，URL Scheme 就是一个可以让 app 相互之间可以跳转的协议。

就像给服务器资源分配一个 URL，以便我们去访问它一样，我们同样也可以给手机APP分配一个特殊格式的 URL，用来访问这个APP或者这个APP中的某个功能(来实现通信)。APP得有一个标识，好让我们可以定位到它，它就是 URL 的 Scheme 部分。

语法

URI = scheme:[//authority]path[?query][#fragment]
// 其中授权信息包含以下部分，具体查看[wiki](https://en.wikipedia.org/wiki/URL)
authority = [userinfo@]host[:port]

例子

微信：weixin://
支付宝：alipay://
淘宝：taobao://
其他自定义Scheme：yxstock://yx.stock.app/pathname?key1=value1&key2=value2

2、Intent

安卓原生Chrome浏览器在18之前的版本支持URL Scheme，25之后版本功能做了变化，不再支持通过设置iframe src属性来唤醒APP。例如，即使安装了APP，设置

也无法打开APP。需要实现谷歌官方提供的 intent: 语法，或者实现让用户通过自定义手势来打开APP。

语法

intent:  
   HOST/URI-path // Optional host  
   #Intent;  
      package=\[string\];  
      action=\[string\];  
      category=\[string\];  
      component=\[string\];  
      scheme=\[string\];  
   end;

具体的解析详情可以查看源码。

同样地，可以在end;字符串前面添加一个跳转失败后的地址：

S.browser_fallback_url=[encoded_full_url]

当APP无法唤起的时候，将会跳转到上面给到的地址。

例子

下面是打开 Zxing 二维码扫描 APP 的 intent例子：

intent:  
   //scan/  
   #Intent;  
      package=com.google.zxing.client.android;  
      scheme=zxing;  
   end;

可以通过以下方式来唤起APP：

 Take a QR code

3、Universal Link

Universal Link是什么

Universal Link 是苹果在 WWDC2015 上为 iOS9 引入的新功能，通过传统的 HTTP 链接即可打开 APP。如果用户未安装 APP，则会跳转到该链接所对应的页面。

为什么要使用 Universal Link

传统的 Scheme 链接有以下几个痛点：

在 ios 上会有确认弹窗提示用户是否打开，对于用户来说唤端，多出了一步操作。若用户未安装 APP ，也会有一个提示窗，告知我们 “打不开该网页，因为网址无效”
传统 Scheme 跳转无法得知唤端是否成功，Universal Link 唤端失败可以直接打开此链接对应的页面
Scheme 在微信、微博、QQ浏览器、手百中都已经被禁止使用，使用 Universal Link 可以避开它们的屏蔽（截止到 18年8月21日，微信和QQ浏览器已经禁止了 Universal Link，其他主流APP未发现有禁止）

如何让 APP 支持 Universal Link

简单概述配置方法，具体详细配置可以查看官方文档。

拥有一个支持 https 的域名
在开发者中心，Identifiers 下 AppIDs 找到自己的 App ID，编辑打开 Associated Domains 服务。打开工程配置中的 Associated Domains ，在其中的 Domains 中填入你想支持的域名，必须以 applinks: 为前缀
配置 apple-app-site-association 文件，文件名必须为 apple-app-site-association ，不带任何后缀
上传该文件到你的 HTTPS 服务器的 根目录 或者 .well-known 目录下

唤起方式

通过前面的介绍，我们可以发现，无论是 URL Scheme 还是 Intent 或者 Universal Link ，他们都算是 URL ，只是 URL Scheme 和 Intent 算是特殊的 URL。所以我们可以拿使用 URL 的方法来使用它们。

1、iframe


</code></pre>
<p>优点：支持URL Scheme情况下，在未安装 app 的情况下，不会去跳转错误页面。</p>
<p>缺点：部分系统兼容性问题，不支持URL Scheme。例如，安卓系统原生浏览器25版本后则不支持iframe唤醒APP。</p>
<h2 id="2、a标签">2、a标签</h2>
<pre><code class="language-javascript"><a href="intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;end"> Take a QR code </a>
</code></pre>
<h2 id="3、windowlocation">3、window.location</h2>
<p>URL Scheme 在 ios 9+ 上诸如 safari、UC、QQ浏览器中， iframe 均无法成功唤起 APP，只能通过 window.location 才能成功唤端。</p>
<p>当然，如果我们的 app 支持 Universal Link，ios 9+ 就用不到 URL Scheme 了。而 Universal Link 在使用过程中，在 qq 中，无论是 iframe 导航 还是 a 标签打开 又或者 window.location 都无法成功唤端，一开始我以为是 qq 和微信一样禁止了 Universal Link 唤端的功能，其实不然，百般试验下，通过 top.location 唤端成功了。</p>
<h1 id="唤起异常处理">唤起异常处理</h1>
<p>如果在APP未安装情况下唤醒失败，则需要做下处理，可以是跳转下载页， 或者ios 跳转 App Store。Android Intent 和Universal Link 自身机制允许它们唤端失败后直接导航至相应的页面，但URL Scheme则无法做到，需要通过hack手段来判断唤醒状态来做处理：</p>
<pre><code class="language-javascript">const handleClickOpenApp = () => {
            let isWakeApp = false
            // if viewport is changed, that means app have been waked up.
            document.addEventListener('visibilitychange', () => {
                isWakeApp = true
            })
            // if app is installed then wake up.
            go('usmart-global://stock.app')
            // if app fails to wake up,then go to download page.
            setTimeout(() => {
                if (!isWakeApp) {
                    handleClickDownloadApp()
                }
            }, 2000)
        }

const go = (url: string) => {
            if (!url) return
            window.location.href = url
        }
</code></pre>
<p>APP 如果被唤起的话，页面就会进入后台运行，会触发页面的 visibilitychange 事件。如果触发了，则表明页面被成功唤起。没有唤醒则定时器2秒后跳转到相应的落地页作为兜底处理。</p>
<h1 id="最佳实践">最佳实践</h1>
<p>为了兼容不同终端，建议url Scheme、Intent、Universal Link 一起使用??。</p>
<h1 id="参考链接">参考链接</h1>
<p>Android Intents with Chrome - Chrome Developers</p>
<p>Support Universal Links</p>
<p>掘金</p>
<p>h5唤起app | 愚人码头</p>
						  
					  </div>
						<!--conend-->
							<div class="p-2"></div>

						<div class="arcinfo my-3 fs-7 text-center">
							
							
			<a href='/t/etagid48104-0.html' class='tagbtn' target='_blank'>Hybrid</a>							
						



						</div>
						
						<div class="p-2"></div>

						

						
					</div>
					<div class="p-2"></div>
					<!--xg-->
					<div class="lbox p-4 shadow-sm rounded-3">
						<div class="boxtitle"><h2 class="fs-4">相关</h2></div>
						
<hr>				
						
			<div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-434434.html">IdentityServer（11）- 使用Hybrid Flow并添加API访问控制</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-373816.html">Ionic开发Hybrid App问题总结</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-355337.html">HybridSN代码修改</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-314132.html">Proj EULibHarn Paper Reading: FuSeBMC v4: Smart Seed Generation for Hybrid Fuzzi</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-236183.html">Office365 Exchange Hybrid No.02 环境准备</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div>            
            
            <!---->
                                    
           <!---->
  			
						

					</div>
					<!--xgend-->
				</div>

				<div class="col-lg-3 col-12 p-0 ps-lg-2">
					<!--box-->									
					<!--boxend-->
					<!--<div class="p-2"></div>-->

					<!--box-->
									<div class="lbox p-4 shadow-sm rounded-3">
					
									   <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div>
										<div class="clearfix"></div>
										<ul class="m-0 p-0 fs-7 r-tag">
										</ul>
									

										
										<div class="clearfix"></div>
									</div>
					<!--box end-->

					
				</div>

			</div>
		
		
		
		</div>	

</main>
						<div class="p-2"></div>
<footer>
<div class="container-fluid p-0 bg-black">
	<div class="container p-0  fs-8">
	<p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p>
	</div>	
</div>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</footer>
		
<script src="/skin/bootstrap.bundle.js"></script>

</body>
</html>