浏览器唤起app

浏览器唤起app【deep link】

在实习的过程中，涉及到了这个模块，学习下。
浏览器是不可能预知到本地是安装了某个app的，不能通过浏览器来预知本地是否安装，浏览器通过URL scheme打开app的，一个app可以设置一个或者多个打开自己的url scheme。
浏览器尝试打开url scheme ,利用settimeout 和iframe来进行打开，window.hidden来判断唤起成功与否。

URL Scheme 通用

由协议名， 路径， 参数组成。

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

打开方式

1. window.location.href跳转
2. iframe跳转
3. 使用a标签跳转

判断是否成功唤醒

<template>
  <div class="open_app">
      <div class="open_btn" @click="open">打开腾讯微博</div>
  </div>
</template>
<script>
let timer
export default {
    name: 'openApp',
    methods: {
        watchVisibility() {
            window.addEventListener('visibilitychange', () => {
                // 监听页面visibility
                if(document.hidden) {
                    // 如果页面隐藏了，则表示唤起成功，这时候需要清除下载定时器
                    clearTimeout(timer)
                }
            })
        },
        open() {
            timer = setTimeout(() => {
              // 没找到腾讯微博的下载页，这里暂时以淘宝下载页代替
                window.location.href = 'http://apps.apple.com/cn/app/id387682726'
            }, 3000)
            window.location.href = 'TencentWeibo://'
        }
    }
}
</script>
<style lang="less">
.open_app_title {
    font-size: (20/@rem);
}
.open_btn{
    margin-top:(20/@rem);
    padding:(10/@rem) 0;
    border-radius: (8/@rem);
    background: salmon;
    color: #fff;
    font-size: (16/@rem);
}
</style>

• 兼容性好
• 无法判断是否唤起成功，如果没有安装对应的app，跳转之后没有反应，通过定时器来引导用户跳转到应用商店，不同的跨端实现不同，一般这是为3000ms比较合适。
• 存在url scheme劫持的风险，如果一个app注册了scheme，会跳转到这个app里面。
• 容易被屏蔽，app可以很容易的屏蔽跳转，比如微信就发生了屏蔽。

Universal Link(ios)

通过https协议来打开。

window.location.href =  '链接'

• 唤端的时候没有弹窗提示是否打开，提升用户体验
• 无需关心用户是否安装对应的app，对于没有安装的用户，点击链接就会打开对应的安装页面。
• 只能在ios使用，用户主动触发

App link（android）

app links让用户点击一个普通web链接的时候，可以打开指定app的页面。避免页面唤醒app时的选择浏览器选项框。

Chrome intents(android）

如果 APP 已安装，则通过配置的 URI SCHEME 打开 APP。
如果 APP 未安装，配置了 fallback url 的跳转 fallback url，没有配置的则跳转应用市场。