bigo-frontend / blog

👨🏻‍💻👩🏻‍💻 bigo前端技术博客
https://juejin.cn/user/4450420286057022/posts
MIT License
129 stars 9 forks source link

【bigo】【运营专题】短信召回用户 #45

Open luohanwen opened 3 years ago

luohanwen commented 3 years ago

场景


多数APP的卸载量在提高,各家面临的情况大同小异。流失的用户需要召回,短信引流是相对有效的方式之一。

产品要求:


相关技术

一、web唤起app技术


web调起app技术常见的有三种 URL Schema,universal link(ios), app links(android);经调研 URL Schema无法在短信中调起app,universal link 和 app links可以。下面详细介绍下三种技术。

1.URL Scheme

首先解释下scheme,我们看URL的组成:

[scheme:][//authority][path][?query][#fragment]

https://www.baidu.com 来举例,scheme就是https,也就是url的开头部分来定义url的类型。我们可以通过给app分配一个指定scheme开头的url,通过这个url可以在浏览器中直接唤起app的某个功能。

常见app的URL Scheme

微信 支付宝 淘宝 微博
weixin:// alipay:// taobao:// sinaweibo://


缺点:

2. universal link

universal link是苹果在ios 9后推出的通用链接技术,前端可以通过访问普通的https链接打开app,如果未安装app会正常访问https链接内容。

优点:


贴图说明下universal link的业务使用流程


UniversalLinks_OverviewDiagram_20200807.png

3.app links


app links是android 6.0后推出的技术,功能和universal link类似,这里不细说了。

三者对比对比.webp


二、链接尽可能的短


1.使用短链服务(不可行)

让链接尽可能短,我们很容易想到使用短链服务。短链服务是指,我们输入一个长链接短链服务会返回一个比较短的链接给我们使用。我们访问短链接的时候会重定向到我们的原始长链接。 但是这种服务不适合我们的场景,我们使用了universal link 和 app links,这两种技术都要求在域名根目录能访问到指定的配置文件。使用短链服务的时候,短链根域名下并没有对应的配置文件,实现不了直接唤起app的功能。

2.申请短域名并配合运营后台

为了实现跳转到app不同的功能,我们一般会在链接后面拼接参数来指定具体的功能场景,这样一来整个链接就会比较长。


最终链接形式如: z.short.com/5f2ac8dd

具体实现


我们梳理下整体流程


1. 运营后台实现

这个就是普通的保存配置功能,根据app需要的参数自行设计表结构,最终生成一个标识id供app查询具体参数。

2. universal link

前端需要处理的到这里就结束了,客户端的处理有兴趣的可以搜下客户端的处理。

注意点:

3.app links

[
  {
    "relation": [
      "delegate_permission/common.handle_all_urls"
    ],
    "target": {
      "namespace": "android_app",
      "package_name": "com.ss.android.ugc.aweme",
      "sha256_cert_fingerprints": [
        "D7:81:1E:C4:16:6F:EA:6C:C7:20:BA:66:69:9D:C8:4B:58:4A:C9:E6:98:66:13:A7:6D:4E:43:D8:CB:E3:2B:27"
      ]
    }
  }
]

relation 可以指定哪些path可以唤起app,其它内容让客户端同事提供

4 z.short.com/5f2ac8dd 访问到web下载页


因为单独申请了个域名做短信召回功能,所以可以不考虑其它扩展将所有访问不到的链接全部解析到下载页,能访问到的静态资源正常访问。

这里直接使用try_files指令配置nginx

nginx location配置如下

location / {
   try_files $uri $uri/ /download.html;
}

对try_files指令的解析:
这个指令功能是这样,在收到访问请求的时候,先测试$uri是不是文件,再测试是不是目录,如果是继续访问,如果不是,则调用内部的重定向指令,在这个配置里是重定向到/download.html

5. web下载页使用URL Scheme技术兜底


点击下载尝试唤起app,如果没唤起app,则进行下载。我们无法判断app是否被唤起,换个hack思路实现下。

当app被成功唤起时,我们的web页面会变成隐藏状态,假如执行唤起3秒后我们的页面不处于隐藏状态我们就认为没有成功唤起app,执行下载逻辑,代码实现如下

function openApp(deeplink, downloadUrl) {
  window.location.href = deeplink;

  setTimeout(() => {
    const isHidden = document.hidden || document.webkitHidden;
    if (typeof isHidden !== 'undefined') {
      if (!isHidden) {
        window.location.href = downloadUrl;
      }
    } else {
      window.location.href = downloadUrl;
    }
  }, 3000);
}

结语


短信召回用户的相关内容就讲完了,希望对碰到这种业务场景的同学有所帮助