mip-extensions
mip-extensions copied to clipboard
mipengine
mip-app-banner 从浏览器调起App技术方案
组件升级前的问题
覆盖调起场景较少，不支持iOS9+ Universal Link， 应用宝链接，安卓AppLink，安卓Chrome Intent调起方式。
修改后主要功能：
- 判断平台，使用平台方法调起App
- 调起失败后打开App下载链接
- 支持基本的iOS+Andriod scheme调起，扩展支持微信应用宝，IOS Universal Link调起，安卓AppLink，安卓Chrome Intent调起方式。
技术方案
schema调起，app下载页必须填写，应用宝，iOS UL，AppLink调起选填。- 不考虑组件外调起，如“查看更多”、“语音搜索”调起
- 不考虑页面加载时主动调起，要求用户主动点击后调起。
- pc上不触发调起操作，打开下载页。
调起逻辑
附：iOS Safari 原生应用安装调起 Banner（能够检测应用是否安装！）
上线后使用方法
新版本
<head>
<!--基本schema调起-->
<meta name="apple-itunes-app" content="app-id=xxxx, app-argument=medium://xxxx">
<link rel="manifest" href="xxxx/manifest">
</head>
<mip-app-banner id="my-app-banner">
<!--配置更多方法调起，字段待定-->
<script type="application/json">
{
"universalLink": "https://a.apple.com/baidubox", // iOS universa lLink 链接
"appLink" : "https://a.andioid.com/baidubox", // 安卓 app Link 链接
"chromeIntent" : "Intent://a.andioid.com/baidubox", // 安卓 chrome Intent 链接
"yybIOS": "", // iOS 应用宝链接
"yybAndroid": "" // 安卓应用宝链接
"downloadIOS": "" // iOS 调起失败后下载链接
"downloadAndroid": "" // 安卓调起失败后下载链接
}
</script>
<button open-button>打开app</button>
</mip-app-banner>
@xuexb 是必须的, 用于在ls中储存用户关闭过这个浮层。下次不再显示 https://github.com/mipengine/mip-extensions/blob/5a87938cfa8d6a8aa7c743f4b11e4beb12f88735/src/mip-app-banner/mip-app-banner.js#L66
针对mip组件要求填写manifest，调起/下载安卓app的操作。有以下调研：
应用现状
目前大部分应用厂商并没有使用 manifest.json，直接采用 schema mipapp://openindex 的方式调起。
manifest的使用确实是一个web规范，在w3c-Web Manifest和火狐文档-Manifest可见，谷歌开发者中心-App Install Banner也有指导文档。
MIP 现状
MIP 目前要求开发者按照这种格式填写 manifest.json 文件：
根据谷歌开发者中心-App Install Banner文档，需要具备short_name，png图标，start_url等配置才可以显示原生banner。
仅按照 MIP 现有配置，缺少必要信息，是不能调起系统Banner的。
解决方案
1. 使用标准 manifest.json，优先使用系统 Banner。
按照火狐文档-Manifest 要求开发者在manifest.json中配置更多属性。优先使用安卓实现的系统banner。
好处：
- 符合w3c规范，有文档可查（虽然manifest.json一开始主要用作web app添加到主屏）
- 浏览器原生banner，稳定性比较好。
坏处：
- 需要站长多余维护一个文件。
- manifest文件想pwa过渡，强制要求支持https。而MIP目前并不强制要求https内容。
2. 自定义 MIP 组件配置，使用 MIP 组件banner
在属性中配置对应操作，按照属性值调起App、跳转下载链接。如下：
<mip-app-banner id="my-app-banner" layout="nodisplay">
<script type="application/json">
{
"android_open": "mipapp://open?"
"android_download" : "http://a.mipapp.com/download"
}
</script>
<button open-button>打开app</button>
</mip-app-banner>
好处：
- 减少一个文件的维护，接入简单。
- 不需要开发者配置支持 HTTPs
坏处：
- 非标准用法，单纯为了组件使用方便。
是否可以优先使用标准做法，在某些浏览器下 fallback 到第二种？或者我们干脆两种都提供，站长自己选择实现哪种。但是在支持install banner的浏览器中第一种仍然应该优先展示。
id 用于在ls中储存用户关闭过这个浮层。下次不再显示
我理解提示次数限制是MIP技术的需求，而非站长需求。那么这样的实现是
- 不可靠的，比如站长完全可以经常变ID
- 让站长困惑的，站长并无这个需求，不知为啥要写一个id
是否有更鲁棒的实现方式
优先使用标准做法，在某些浏览器下 fallback 到第二种
@harttle 这个提议也是我打算做的。iframe下不一定能出现系统banner，还是需要自己实现的。
提示次数限制是MIP技术的需求，而非站长需求。
这个实现确实有点怪，比如某app如果要求每2d，4d，8d，16d提醒用户下载app，既不打扰用户，又有提醒作用，目前这种方式就做不到。要不，给个配置？
<mip-app-banner id="my-app-banner" layout="nodisplay">
<script type="application/json">
{
"notice-cycle": "0" // 只提醒一次，关闭后再也不提醒
"notice-cycle": "1" // 每天提醒一次
"notice-cycle": "2^n" // 2d，4d，8d，16d这种提醒……
}
</script>
<button open-button>打开app</button>
</mip-app-banner>
横幅样式讨论
现状
目前 mip-app-banner 组件的横幅强制贴在页面下方，且使用position:fixed属性:
https://github.com/mipengine/mip-extensions/blob/5a87938cfa8d6a8aa7c743f4b11e4beb12f88735/src/mip-app-banner/mip-app-banner.less#L6-L8
这样写会有以下问题：
- iframe + iOS系统 + 内嵌页position: fixed定位问题（mip-fixed组件解决的问题）
- iOS系统横幅是贴顶的（而Android是贴底的），有的需求将提示横幅嵌入到页面中，不悬浮展示。
- 强制增加关闭按钮（用户体验考虑），开发者不可选择，也不可移除，只能通过css样式覆盖。
修改方法
MIP通常不提供样式，只提供交互。不应该限制组件的展现位置。
- 去掉position样式, 如有 贴顶/贴底 需求，可以将组件嵌入在mip-fixed中使用。
- 删除强制关闭按钮，mip-fixed有对应关闭功能。
