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添加快捷方式到桌面
微博:@劉東寰