网页打开app

喜欢ヅ旅行 2022-05-27 06:37 253阅读 0赞

先声明一下关于ios中9.0打开方式的文章来自博客：[IOS9通用链接（universal link）][IOS9_universal link]

## 前言 ##

对于一个完备的互联网产品而言需要有app端与web端两个不同前端，对于产品而言很多都希望能够将wap页上的用户引向native app上这就要求前端工程师们为网页提供各种入口去打开app，今天我们就聊一聊app的打开方式（有错误的地方还请高手指正）。

## 常规打开 ##

对于app打开而言最常规的打开就是通过url scheme的方式去打开你的app，如下的

myapp://
    myapp://open
    myapp://type=1&id=2sdeo223lwe

这些抛出都是以url的方式进行抛出，app捕捉到这些抛出去做相应的处理，本文对app的处理不做详细描述，app开发请自行谷歌百度。对于前端而言抛出的方式也有很多，而最理想的方式是通过iframe的src对其进行链抛出，来！说的在多都没有代码来的清晰，请看下面。

首先我们需要有一个iframe：

//实际上就是新建一个iframe的生成器 var createIframe=(function(){ var iframe; return function(){ if(iframe){ return iframe; }else{ iframe = document.createElement('iframe'); iframe.style.display = 'none'; document.body.appendChild(iframe); return iframe; } } })()

之后我们还需要一个url scheme:

//生成一个url scheme,假设我们约定的scheme是myApp://type=1&id=iewo212j32这种形式的 var baseScheme = "myApp://" var createScheme=function(options){ var urlScheme=baseScheme; for(var item in options){ urlScheme=urlScheme+item + '=' + encodeURIComponent(options[item]) + "&"; } urlScheme = urlScheme.substring(0, urlScheme.length - 1); return encodeURIComponent(urlScheme); }

这种scheme形式的其实不是最好的,根据我们踩过的坑，觉得约定为与http协议相近可能更好一些，具体的协议需要前端人员自己去和app端人员约定。

ok万事具备，iframe有了，urlScheme也有了，该去打开app了

以上就是你要打开scheme的主要代码了，好吧，实际上不只是打开app，还要实现未打开的时候跳到下载页去。其中安卓实际上无论有没有打开都会跳到下载页去，而ios........好吧!按照网上的说法是浏览器失焦后会挂起脚本，呵呵，这是多老的ios版本的表现了，实际上现在的ios已经没有这么做，有些版本会跟安卓的表现一样，而有些则是直接跳转根本不会去打开，还有打开的时候那个恶心的系统弹窗是什么鬼。好吧，实际上至此你会发现，ios9.0以上的有些打不开直接跳，有些打得开还会有允许弹窗，而微信则是无论如何都打不开，实际上微信会在他的浏览器里拦截掉所有未经其允许的scheme包括app store，那么接下来我们要解决这些问题。

## 通用链接 ##

针对ios9及以上的打不开问题，实际上ios9提供了更好的解决方案————通用链接。

什么是Universal Links(通用链接)?

这是iOS9推出的一项功能，如果你的应用支持Universal Links(通用链接)，那么就能够方便的通过传统的HTTP链接来启动APP(如果iOS设备上已经安装了你的app，不需要额外做任何判断等)，或者打开网页(iOS设备上没有安装你的app)。或许可以更简单点来说明，在iOS9之前，对于从各种从浏览器，Safari、UIWebView或者 WKWebView中唤醒APP的需求，我们通常只能使用scheme。

以上来自网上关于通用链接的介绍，对于前端简单点讲就是你访问一个http的url，如果这个url带有你提交给开发平台的配置文件中匹配规则的内容，ios系统会去尝试打开你的app，如果打不开，系统就会在浏览器中转向你要访问的链接。很好的一个属性，因为通过这个属性在ios9上我们能够绕过微信的拦截从而打开app。

以下是ios开发人员要做的百度搜索结果第一条[ios中实现通用链接][ios]：

而我们要做的真的很简单，实际上我们只需要抛出链接就好了（实际上博主只是来骗经验的）。在此之前请准备好与主站不同的域名，比如主站www.xxxx.com，你们可以准备好open.xxxx.com的域名作为重定向用。好吧！实际上通用链接有一个很坑的属性，必须是异域打开，而且如果你提交的是你主站的链接，你打开你的主站你会发现网站上方会挂着一个难看的灰条转向appstore中你们的app，没错，就是ios系统干的这个事，具体的其他注意事项可以参考这篇文章[IOS9通用链接（universal link）][IOS9_universal link]。

那么接下来我们的代码得做好更改

//增加通用链接的生成, var baseScheme = "myApp://", baseLink="http://m.xxxx.com?"; var createScheme=function(options,isLink){ var urlScheme=isLink?baseLink:baseScheme; for(var item in options){ urlScheme=urlScheme+item + '=' + encodeURIComponent(options[item]) + "&"; } urlScheme = urlScheme.substring(0, urlScheme.length - 1); return isLink?urlScheme:encodeURIComponent(urlScheme); }

然后对抛出做

实际上就只需要更改这么点，最重要的是app端接入通用链接，注意抛出的链接不要跟主站同域即可，之后就是不断的调试，自己去踩坑吧，记得绑定域名，这个对域名具有一定的依赖性。

## 微信中打开 ##

至此只有微信是打不开的，实际上腾讯系的产品都是打不开的，包括qq浏览器。

对于微信中有两种方式：

*  一种简单的方式就是弹窗告诉用户让他去浏览器中打开——在技术之外的办法
 *  还有一种方式就是应用宝

是的如果是微信就去打开你的app对应的应用宝，应用宝会去检测你的app是否存在有则去打开，但只是去打开。实际上腾讯的应用宝对于开发者在功能上做的比想象中的要强大，你在应用宝的微下载中配置申请你的applink与app store的链接,之后你只要在你的链接参数中带上`android_schema="myApp://"`就在应用宝中打开app中的特定功能，如果忽略应用宝的页面跟自己scheme打开没有太大区别，具体的操作可以查看应用宝的说明。简而言之，腾讯的产品中都去借助应用宝这个平台去执行你需要的操作。在此就不贴代码了，只要判断浏览器如果是微信或者是qq就去跳你的应用宝链接就行。

## 总结 ##

实际上单纯打开app非常简单，目前无论安卓还是ios都能够很好的支持scheme，当然腾讯系产品除外，实际上百度浏览器也会拦截scheme（我觉得真是奇了葩！！！微信这种尚能理解，一个浏览器居然擅自去拦截scheme）目前对百度浏览器还没有什么很好的办法，可以尝试是否能够通过百度应用市场去解决。如果是希望打开app同时又要打开下载页，那么ios9及以上就得用通用链接去解决，重点就是这个通用链接。

# IOS9通用链接（universal link） #

Jun 27, 2016

IOS9以上版本新增了通用链接的功能。最近在项目中正好有用到，并在开发过程中遇到了很多坑。因此对其进行总结，以供大家参考，如有疏漏，求留言指证～～

## 应用场景 ##

在WAP页面中点击某个按钮。

*  用户装了APP，直接打开APP对应页面；
 *  没有装APP，跳转到WAP下载页；

## URL Scheme实现方案 ##

<table style="border-spacing:0px;margin:0px;padding:0px;width:760px;"> 
 <tbody> 
 <tr style="margin:0px;padding:0px;width:760px;border-collapse:collapse;"> 
 <td style="padding:0px;margin:0px;width:760px;border-collapse:collapse;"><pre style="font-family:Consolas, Monaco, Menlo, Consolas, monospace;font-size:13px;background:rgb(248,245,236);margin-bottom:0px;padding:30px 14px 10px;">var iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);

if(userAgent.match(/(iPhone|iPod|iPad);?/i)){
 
	//抛出schemes,打开app对应页面
 	window.location.href = "apps custom url schemes";

 	//由于部分ios中打开app后，WAP页面会被挂起，定时器不会被执行。因此可以做下优化：
 	//WAP页重新被聚焦后，如果超过1s，认为APP被打开了，重新聚焦时就不必再跳转到APP下载页
	var loadDateTime = Date.now();
	window.setTimeout(function () {
 
	 var timeOutDateTime = Date.now();
	 if (timeOutDateTime - loadDateTime &lt; 1000) {
 
	 window.location.href = "app下载页面";
	 }
	}, 25);
}else{
 
	//抛出schemes,打开app对应页面
	iframe.src = "apps custom url schemes"

	//跳转下载页
	setTimeout(function () {
 
	 window.location.href = "app下载页面";
	}, 500);
}
</pre></td> 
 </tr> 
 </tbody> 
</table>

以上代码原理是：

*  如果安装了APP，抛出的URL Scheme可以被app解析，则打开该APP，并由APP跳转到对应的页面；
 *  如果未安装APP，没有应用程序可以解析该协议，则在500ms以内执行定时器里的函数，打开WAP端的下载页面。

### apps custom url schemes是什么 ###

apps custom url schemes 是WAP端和APP端约定好的一个协议URL，如：web2app://。和正常的URL一样，除了protocol部分外，也可以有host、path及参数，如：web2app://openapp?type=1&id=12。具体要看各端约定，不过个人建议最好还是按照URL的组成规范来定义scheme，不然会引入由于URL不规范而导致的各种编码问题。

首先在，APP里会配置好预定好的URL Scheme协议，

每当WAP页打开协议URL，系统便会打开该APP，然后根据URL协议后面的部分，执行后续逻辑（比如打开WAP页对应的APP页面）。

### URL Scheme存在的问题 ###

*  IOS9.0以上弹确认框的问题。
    
    在IOS9.0以上版本中，WAP端打开协议URL，如果已安装APP，会弹出如下图所示的确认框。  
    
    
      
    ![openapp.png][]  
      
    大部分情况下，用户点击“打开”APP之前，页面直接刷新跳转到WAP下载页，导致打开APP失败。这就是IOS9.0以上不能用scheme实现需求的主要原因。如果手机上未安装APP，WAP端打开协议URL，会弹出无效URL的弹窗，也会影响用户体验。
 *  跳转下载页问题。
    
    由于跳转到下载页由前端定时器触发，在所有的andriod机以及部分IOS机器上，打开APP后，WAP页还是会被定时跳转到下载页。

## 通用链接实现方案 ##

在IOS9.0以上开始支持通用链接，接下来详细解析一下用通用链接实现该功能的方案。

### apple-app-site-association文件 ###

apple-app-site-association是IOS中一个JSON格式的“通用链接”配置文件，在其paths键中设置通用链接的具体规则。

IOS端，在Xcode的capabilities里添加域名（b.com，为通用链接的域名）。这样在第一次启动APP时，APP会从 [https://b.com/apple-app-site-association][https_b.com_apple-app-site-association] 下载这个配置文件并交由IOS系统管理。该配置文件必须通过SSL的方式请求，所以，b.com必须支持SSL访问。

![ios_applinks.jpg][]

### 实现原理 ###

用通用链接实现的原理如下图所示。在服务器a.com上部署WAP页以及APP下载页，在b.com上署“后端重定向服务”以及“ios通用链接的配置文件”。

![20180413105348624][]

当WAP页打开如下通用链接时：[http://b.com/open/…，][http_b.com_open] 如果已经安装了APP，且该链接和APP在apple-app-site-association中配置的规则一致，则打开该APP，并由APP进行后续处理（打开应用内的某个页面）；如果ios上没有安装APP，则系统不会对该链接进行特殊处理，直接在浏览器中打开，后端的重定向服务会将该链接重定向到下载页“[http://a.com/mobile/app”，][http_a.com_mobile_app] 代码如下：

### 几个坑 ###

1.  WAP页面的域（a.com）和抛出的通用链接的域（b.com）必须不一样。如果同域，抛出的通用链接在很多情况下会被系统忽略，就算已安装APP，也打不开并且直接重定向到下载页。（至少在IOS9.\*的版本中遇到了这个问题）。
2.  通用链接在微信webview中的BUG。  
    微信webview中打开WAP页，该WAP页通过设置loaction.href抛出通用链接打开APP。之后从APP重新返回到该webview页面，并用微信进行分享。
    
     *  期待结果：分享出在webview中展示的WAP页。
     *  实际结果：发现最终分享出去的是APP下载页。
     *  原因分析：虽然在装了APP的情况下，不会在webview中打开该通用链接刷新到下载页，但是location.href这个全局变量已被更改，微信的默认分享的链接是location.href所指链接。该BUG的具体原因及解决方案将在以后的文章中进行详细分析。

[IOS9_universal link]: http://fegirl.com/2016/06/27/IOS9%20%E9%80%9A%E7%94%A8%E9%93%BE%E6%8E%A5%EF%BC%88universal%20link%EF%BC%89/
[ios]: http://www.jianshu.com/p/c2ca5b5f391f
[openapp.png]: http://fegirl.com/image/openapp.png
[https_b.com_apple-app-site-association]: https://b.com/apple-app-site-association
[ios_applinks.jpg]: http://fegirl.com/image/ios_applinks.jpg
[20180413105348624]: /images/20220527/838b9d211aaa4eec88fd63d7cb8f9e7a.png
[http_b.com_open]: http://b.com/open/%E2%80%A6%EF%BC%8C
[http_a.com_mobile_app]: http://a.com/mobile/app%E2%80%9D%EF%BC%8C