我不生產(chǎn)代碼，我只是代碼的搬運(yùn)工。
為了增強(qiáng)工具型App的運(yùn)營(yíng)能力，我們?cè)谏蟼€(gè)版本加強(qiáng)了產(chǎn)品的內(nèi)容功能。由運(yùn)營(yíng)的同學(xué)每天篩選、編輯一些高質(zhì)量的用車文章或交通信息推送給用戶。上線運(yùn)營(yíng)一段時(shí)間后發(fā)現(xiàn)，雖然文章List的整體位置處于首頁中下屏，部分小屏機(jī)型（如iPhone4s、iPhone5）甚至需要滑屏才能看到，但PV還是很可觀的。頁面的分享率(分享次數(shù)/PV)，在1%~2%左右。雖然不是很高，但是考慮到近期App的推廣預(yù)算縮水，我想在分享的文章頁上加一個(gè)推廣浮層，順便帶一點(diǎn)下載。
由于這個(gè)想法不算正式需求，而且效果無法評(píng)估（其實(shí)是沒啥底氣，1%的分享率再去帶下載效果不會(huì)很好，但聊勝于無?。?，所以就準(zhǔn)備自己來搞了。
實(shí)現(xiàn)邏輯很簡(jiǎn)單，對(duì)用戶瀏覽的文章頁面判斷：
- 是否在App的Web View中
- 如果是，則不顯示下載浮層
- 如果不是，則在頂部顯示一個(gè)下載浮層
- 用戶點(diǎn)擊浮層，下載安裝包
第一步，首先判斷用戶是在App中瀏覽文章，還是通過分享的鏈接打開的。方法就是對(duì)當(dāng)前瀏覽器（廣義）的UA（[User Agent](User Agent)）做標(biāo)識(shí)符匹配。因?yàn)?，為了便于后臺(tái)的統(tǒng)計(jì)分析，開發(fā)者一般會(huì)修改默認(rèn)的UA，添加一些自定義的標(biāo)記（比如，比如UA+版本號(hào)、項(xiàng)目名稱等）。我們通過正則表達(dá)式來匹配這些特殊標(biāo)記，就可以判斷出來是不是自己人。
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代碼在文章頁中插入了一張浮層圖片，點(diǎn)擊時(shí)觸發(fā)event執(zhí)行第二段的JS去下載安裝包；第三段的JS來完成判斷——是否是在App中打開文章頁，并且控制浮層圖片置頂顯示。
最后，測(cè)試效果如下圖。
本來到這里就應(yīng)該結(jié)束了，我可以滿懷期待地等待后臺(tái)統(tǒng)計(jì)結(jié)果。誰知道打開Android測(cè)試機(jī)一看，App中的文章居然也帶著下載浮層 ！天了嚕，為什么第2個(gè)JS中的判斷代碼在Android機(jī)上失效了？
一問Android的工程濕才知道，他當(dāng)初并沒有單獨(dú)為這個(gè)Web View設(shè)置自定義UA！當(dāng)我默默地把這條"bug"提交jira后，陷入了沉思···
由于沒有HotFix，下次發(fā)版之前這個(gè)bug是解決不了了。那么現(xiàn)在，我只能增加一項(xiàng)判斷來屏蔽掉所有的Android用戶了。想到我們的Android用戶要比iOS用戶多幾倍，我眼淚就流下來···
在網(wǎng)上搜了下如何通過UA來判斷蘋果系統(tǒng)，將上面的第二個(gè)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用戶不會(huì)在App中看到奇怪的下載提示了（通過isiOS判斷后，只有iOS的用戶可以看到這條下載浮層）。但是，一下子減少了70%的用戶，求心理陰影面積。
<small>注：以上代碼的部分變量名和url做了替換，僅作參考示例。</small>
