iOS添加快捷方式到桌面#
涉及：OpenUrl侣背、iOS shceme霹琼、Data URI Scheme焕阿、JS舔株、Socket#
功能：將應(yīng)用的某一個頁面或某一個功能以快捷方式形式添加到桌面，用戶點擊桌面圖標(biāo)饱岸，可以喚起應(yīng)用并打開對應(yīng)頁面或功能掺出。
原創(chuàng)文章，歡迎轉(zhuǎn)載分享 微博@劉東寰
背景
用戶在使用如微博苫费、淘寶汤锨、貼吧、百度地圖時百框，有些頁面打開頻率非常高闲礼，甚至某個應(yīng)用只為了這幾個單一的功能，這個時候铐维，可以考慮將對應(yīng)的功能頁面以快捷方式添加到桌面上位仁。
實現(xiàn)這個功能的基礎(chǔ)
因為沒有找到或沒有這個功能的開放API，因此只能借助Safari方椎，在Safari中聂抢，有一個功能叫：添加到主屏幕，而我們將使用這個入口去實現(xiàn)這個功能棠众。
Safari中添加到主屏幕琳疏，就是把當(dāng)前頁面的url以圖標(biāo)的形式添加到桌面，點擊該圖標(biāo)闸拿，還是打開Safari并打開對應(yīng)的url空盼，和我們想要的效果不一樣，繼續(xù)看下去新荤。
iOS之OpenUrl
OpenUrl(開放鏈接)
例如：
[[UIApplication sharedApplication] openURL:[NSURLURLWithString:@"tel://xxx"]];
在iOS中揽趾，如果我們要在應(yīng)用里喚起撥號應(yīng)用，會使用這么一種方式苛骨，"tel://" 就是撥號應(yīng)用在程序里注冊的scheme篱瞎，所有應(yīng)用都可以在程序里注冊scheme苟呐，這種scheme在整個手機(jī)里是通用的，第三方的分享也是依賴這種方式通過openURL:scheme的方式喚起自己的應(yīng)用俐筋。
那么如何注冊自己應(yīng)用的scheme牵素？網(wǎng)上關(guān)于這方面非常多，就貼個鏈接吧here.
OpenUrl在這個功能的利用就是：
- 通過OpenUrl喚起Safari澄者，讓Safari訪問一個指定頁面笆呆。
- Safari保存到桌面的圖標(biāo)，在點擊時通過OpenUrl喚起我們的應(yīng)用粱挡。（你可以在Safari地址欄輸入tel://xxx）
Safari打開怎么樣的頁面赠幕？
通過OpenUrl，我們可以讓應(yīng)用打開Safari并訪問一個頁面询筏。我們知道Safari添加到桌面是把當(dāng)前的URL添加到桌面榕堰，那么，當(dāng)我們點擊圖標(biāo)的時候也是訪問這個頁面屈留。而這個頁面在第一次被打開的時候需要顯示一些引導(dǎo)頁之類的，而在桌面被打開的時候卻需要調(diào)用一個scheme测蘑。這似乎不太可能灌危，我們接著往下看。
JS
對JS不是太熟悉碳胳，以下方法來自網(wǎng)絡(luò)
<script>
if (window.navigator.standalone == true)
{
var lnk = document.getElementById("你的帶scheme的<a>標(biāo)簽ID").click();
//通過你所知道的方式打開一個scheme勇蝙，上面這句話的鏈接標(biāo)簽如：<a href="tel://xxx">
}
else
{
document.getElementById("msg").innerHTML='<div style="font-size:12px">
可以插入引導(dǎo)頁</div>';
//這里你可以去加載你的引導(dǎo)頁
}
</script>
你可以試試通過Safari保存一個頁面到桌面，再打開這個頁面挨约，你會發(fā)現(xiàn)味混，前者是非全屏狀態(tài)，而通過快捷方式打開的Safari是全屏的诫惭。這正是一個突破口翁锡。
if (window.navigator.standalone == true)
判斷當(dāng)前頁面是否全屏，如果非全屏夕土，那么我們顯示引導(dǎo)頁馆衔，如果是全屏，我們就打開一個鏈接怨绣。到這里角溃，上一個問題就被解決了。
已經(jīng)可以實現(xiàn)這個功能了
現(xiàn)在你可以在服務(wù)器部署一個網(wǎng)頁實現(xiàn)這個功能了篮撑。但是减细，還是有缺點的，每次點擊快捷方式我們都需要訪問這個頁面赢笨，如果網(wǎng)絡(luò)狀態(tài)不好未蝌，那么是很大的延時驮吱，（比如xx貼吧目前的狀況）。
進(jìn)一步優(yōu)化之利用Data URI Scheme
我們希望這個頁面不依賴網(wǎng)絡(luò)树埠。在這個過程中試驗了多種方案糠馆，這里只貼我認(rèn)為最妥的一種。
做過前端的小伙伴可能說到這就明白了怎憋，Data URI Scheme（DATA－URI 是指可以在Web 頁面中包含圖片但無需任何額外的HTTP 請求的一類URI.）比如網(wǎng)頁里需要放一張圖片又碌，這張圖片會有一個地址，而圖片的獲取是需要訪問網(wǎng)絡(luò)的绊袋。但是通過DataURI毕匀，我們可以把圖片進(jìn)行base64編碼直接存儲在頁面中。
->
這里癌别，我們就要通過這種方式皂岔，把我們的網(wǎng)頁存儲在地址欄，首先展姐，我們將做好的頁面（含引導(dǎo)頁和跳轉(zhuǎn)scheme）通過base64編碼成DataURIScheme躁垛，接著，我們放入這樣一個新頁面的<meta>標(biāo)簽圾笨。這個新頁面的作用就是作為一個中間物教馆，所以其他可以不寫。
<meta http-equiv="refresh" content="0;URL= ‘your datauri’>
這個新頁面你需要部署到服務(wù)器擂达，接著應(yīng)用就打開這個頁面土铺，這個時候，頁面會自動刷新一次板鬓，你會發(fā)現(xiàn)悲敷，你編碼過的網(wǎng)頁就出現(xiàn)在了地址欄，是不是很神奇俭令。然后你把這個頁面添加快捷方式到桌面后德。斷開網(wǎng)絡(luò)，再試試打開這個快捷方式吧抄腔。
該項目的Demo: iOS添加快捷方式到桌面
微博：@劉東寰
