美文网首页
h5唤起App的原理

h5唤起App的原理

作者: RiverSouthMan | 来源:发表于2020-07-15 15:06 被阅读0次

文章简述

唤起App的场景在前端开发中并不陌生。市面上有提供成熟的解决方案,Openinstall、应用宝、微信开放标签等...

image.png

目录

  • 唤起场景
  • 唤起方式
  • URL Scheme
  • Universal Links
  • 参考文章

唤起场景

归纳一下我们唤起App的一些场景。针对不同场景,唤起App的解决方案也有不同。

  1. 手机浏览器唤起App
  2. 第三方App内webview唤起App。(微信、QQ、手百)

唤起方式

不同的唤起方式有各自的局限:唤起App方案

URL Scheme
广泛使用
APP需要注册自己的URL Scheme,用来唯一标识一个App
Scheme格式:<scheme域名>://<path>?<params>=<value>

Universal Links
iOS9+系统
唯一性
很好的兼容性
Universal Link是通过标准的http/https协议链接唤起App;若未安装App,访问此通用链接,可以自定义页面

URL Scheme

URL Schemes 是什么?通过对比网页链接来理解。

URL Schemes 有两个单词:

URL,我们都很清楚,http://www.apple.com 就是个 URL,我们也叫它链接或网址;
Schemes,表示的是一个 URL 中的一个位置——最初始的位置,即 ://之前的那段字符。比如 http://www.apple.com 这个网址的 Schemes 是 http。

根据我们上面对 URL Schemes 的使用,我们可以很轻易地理解,可以像定位一个网页一样,用一种特殊的 URL 来定位一个应用甚至应用里某个具体的功能。


image.png

安卓自定义Scheme
Android应用/组件间通信有一种方式是intent,应用可以注册intent filter声明自己对什么样的intent感兴趣,其它应用发送intent时通过系统级广播传递过来,如果与预先注册的intent filter匹配,应用将收到该intent(无论应用是否正在运行,都会被“唤醒”,也就是隐式启动Activity),取出intent携带的数据,做进一步处理。

就是这样,通过系统广播拿到一次起来的机会,例如在manifest里静态注册intent filter声明自定义scheme:

<activity android:name=".MainActivity">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />

        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>

    <!--注册scheme-->
    <intent-filter>
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <!--BROWSABLE指定该Activity能被浏览器安全调用-->
        <category android:name="android.intent.category.BROWSABLE"/>
        <!--声明自定义scheme,类似于http, https-->
        <data android:scheme="hoho"/>
    </intent-filter>
</activity>

actioncategorydata都必须完全匹配才能获得intent,这里声明了2个category,只有在intent同时含有这2个category时才算匹配,而android.intent.category.DEFAULT是默认的,有实际意义的是android.intent.category.BROWSABLE,表示允许通过浏览器启动该activity(呼起App)。后续的data限定了触发条件,当scheme为hoho时才匹配,例如浏览器访问hoho://abc,能够匹配成功,App就起来了。

IOS自定义Scheme
在iOS 系统中,安装了一个app后,如果这个app有URL Scheme的话,安装完成后会在系统中注册该URL Scheme,这样别的app或者浏览器就可以通过URL Scheme来打开该app。

image.png

WebView Scheme白名单
WebView作为页面容器,可以过滤/拦截页面请求,以安卓为例:

class MyWebClient extends WebViewClient {

    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
        if (url.startsWith("hoho://")) {
            return null;
        }

        return super.shouldInterceptRequest(view, url);
    }

    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
        String scheme = request.getUrl().getScheme();
        if (scheme.equals("hoho")) {
            return null;
        }

        return super.shouldInterceptRequest(view, request);
    }
}

对于满足过滤条件的,拦截掉,所以在微信里无法呼起App,因为不在白名单里,被拦截下来,没有交给系统广播。现在微信提供了开放标签唤起App的能力。

Universal Link

官方文档

Universal Link(通用链接)是Apple在iOS9推出的一种能够方便的通过传统HTTPS链接来启动APP的功能,可以使用相同的网址打开网址和APP。当你的应用支持Universal Link(通用链接),当用户点击一个链接是可以跳转到你的网站并获得无缝重定向到对应的APP,且不需要通过Safari浏览器。如果你的应用不支持的话,则会在Safari中打开该链接。

实现通用链接不难, 但首先必须遵守一些先决条件。如下:

  • 有一个注册的域名

  • 通过 SSL 访问域名

  • 上传 apple-app-site-association 文件。
    appID是公司开发者账号的小组id和包名id,中间用.隔开
    paths是在项目中的的.entitlements文件中域名后支持的路径,*表示全路径

image.png
  • 在 APP 里处理通用链接
    代码中接收来自其他外部url点击,并且在 AppDelegate 里支持通用链接


    image.png

    当 userActivity 是 NSUserActivityTypeBrowsingWeb 类型, 则意味着它已经由通用链接 API 代理。这样的话, 它保证用户打开的 URL 将有一个非空的 webpageURL 属性。

总结如图


image.png

参考文章

https://www.jianshu.com/p/136fd75ab05b
http://www.ayqy.net/blog/android-scheme%E5%91%BC%E8%B5%B7app/
https://www.jianshu.com/p/39a090338cd1
http://www.cocoachina.com/articles/13321
个人学习转载,若有冒犯请留言删除

相关文章

  • h5唤起App的原理

    文章简述 唤起App的场景在前端开发中并不陌生。市面上有提供成熟的解决方案,Openinstall、应用宝、微信开...

  • H5唤起App

    概述 DAU和新增是产品的两项重要指标, DAU,一般来源是用户自主打开、PUSH、H5唤起、付费等途径,以自主打...

  • H5唤起APP

  • H5唤起App

    最近总接到落地页的需求,落地页的职责主要是引流,有以下几种类型1、引导已经下载App的用户打开App2、引导未下载...

  • h5唤起APP

    https://web.dev/get-installed-related-apps/[https://web.d...

  • H5 唤起 APP 及下载

    一般 H5 常见的引导页,为已安装 app 的用户唤起 app,未安装 app 的用户引导下载 app 一、简介 ...

  • H5打开第三方地图APP

    实现思路: H5页面弹出弹窗选择 选择后跳转对应地图的H5页 让地图的H5页唤起各自的APP

  • 如何设计APP唤起落地页,促进用户增长?

    一般APP主要通过分享页面/链接到外部,再在外部通过H5/浏览器进行唤起,我将这些设计好的H5/浏览器页面称为唤起...

  • iosH5和APP之间的通信

    缘由是一个需求: 用户在没有下载APP的前提下,浏览了H5,在H5页面唤起到AppStore下载页面,下载APP后...

  • H5唤起APP代码

    app-id 就是你的AppStore上的id 号,affiliate-data 与 app-argument 是...

网友评论

      本文标题:h5唤起App的原理

      本文链接:https://www.haomeiwen.com/subject/berdhktx.html