我不生產(chǎn)代碼壤短，我只是代碼的搬運工设拟。
為了增強工具型App的運營能力，我們在上個版本加強了產(chǎn)品的內(nèi)容功能久脯。由運營的同學每天篩選纳胧、編輯一些高質(zhì)量的用車文章或交通信息推送給用戶。上線運營一段時間后發(fā)現(xiàn)帘撰，雖然文章List的整體位置處于首頁中下屏跑慕，部分小屏機型（如iPhone4s、iPhone5）甚至需要滑屏才能看到摧找，但PV還是很可觀的核行。頁面的分享率(分享次數(shù)/PV)，在1%~2%左右蹬耘。雖然不是很高芝雪，但是考慮到近期App的推廣預算縮水，我想在分享的文章頁上加一個推廣浮層综苔，順便帶一點下載惩系。
由于這個想法不算正式需求位岔，而且效果無法評估（其實是沒啥底氣，1%的分享率再去帶下載效果不會很好堡牡，但聊勝于無笆闾А），所以就準備自己來搞了晤柄。
實現(xiàn)邏輯很簡單擦剑，對用戶瀏覽的文章頁面判斷：
- 是否在App的Web View中
- 如果是，則不顯示下載浮層
- 如果不是芥颈，則在頂部顯示一個下載浮層
- 用戶點擊浮層惠勒，下載安裝包
第一步，首先判斷用戶是在App中瀏覽文章浇借，還是通過分享的鏈接打開的乳幸。方法就是對當前瀏覽器（廣義）的UA（[User Agent](User Agent)）做標識符匹配滋早。因為槐雾，為了便于后臺的統(tǒng)計分析宰衙，開發(fā)者一般會修改默認的UA，添加一些自定義的標記（比如闯估，比如UA+版本號灼舍、項目名稱等）。我們通過正則表達式來匹配這些特殊標記涨薪，就可以判斷出來是不是自己人骑素。
Talk is cheap show me the code.
<p>
<img id="landing"
src="http://sample.com/g2/M00/95/1A/wKjmqlcscRuAQboOAADafTTt8bg1116180"
style="position:fixed;width:100%;left:0;top:0;display:none;"
onclick="app_landing();"/>
</p>
<script>
function app_landing() {
location.;
}
</script>
<script>
if (navigator.userAgent.toLowerCase().match(/thisapp/) == null) {
var banner = document.getElementById('landing');
banner.onload = function() {
document.getElementsByTagName('body')[0].style.marginTop = banner.height + 'px';
};
banner.style.display = 'inline';
}
</script>
第一段HTML代碼在文章頁中插入了一張浮層圖片，點擊時觸發(fā)event執(zhí)行第二段的JS去下載安裝包刚夺；第三段的JS來完成判斷——是否是在App中打開文章頁献丑，并且控制浮層圖片置頂顯示。
最后侠姑，測試效果如下圖创橄。
本來到這里就應(yīng)該結(jié)束了莽红，我可以滿懷期待地等待后臺統(tǒng)計結(jié)果妥畏。誰知道打開Android測試機一看，App中的文章居然也帶著下載浮層 安吁！天了嚕醉蚁，為什么第2個JS中的判斷代碼在Android機上失效了？
一問Android的工程濕才知道鬼店，他當初并沒有單獨為這個Web View設(shè)置自定義UA网棍！當我默默地把這條"bug"提交jira后，陷入了沉思···
由于沒有HotFix妇智，下次發(fā)版之前這個bug是解決不了了滥玷。那么現(xiàn)在捌锭，我只能增加一項判斷來屏蔽掉所有的Android用戶了。想到我們的Android用戶要比iOS用戶多幾倍罗捎，我眼淚就流下來···
在網(wǎng)上搜了下如何通過UA來判斷蘋果系統(tǒng)，將上面的第二個JS修改如下：
<script>
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (navigator.userAgent.toLowerCase().match(/driverhelper/) == null && isiOS) {
var banner = document.getElementById('aves-landing');
banner.onload = function() {
document.getElementsByTagName('body')[0].style.marginTop = banner.height + 'px';
};
banner.style.display = 'inline';
}
</script>
好了拉盾，現(xiàn)在Android用戶不會在App中看到奇怪的下載提示了（通過isiOS判斷后桨菜，只有iOS的用戶可以看到這條下載浮層）。但是捉偏，一下子減少了70%的用戶倒得，求心理陰影面積。
<small>注：以上代碼的部分變量名和url做了替換夭禽，僅作參考示例霞掺。</small>
