iOS添加快捷方式到桌面

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在這個功能的利用就是:

  1. 通過OpenUrl喚起Safari澄者,讓Safari訪問一個指定頁面笆呆。
  2. 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編碼直接存儲在頁面中。

![](http://xxxx/xx.png)
->
![](http://upload-images.jianshu.io/upload_images/1971004-4e4b821f981fd216.png)

這里癌别,我們就要通過這種方式皂岔,把我們的網(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添加快捷方式到桌面

微博:@劉東寰

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末探遵,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子妓柜,更是在濱河造成了極大的恐慌箱季,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件棍掐,死亡現(xiàn)場離奇詭異藏雏,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進(jìn)店門掘殴,熙熙樓的掌柜王于貴愁眉苦臉地迎上來赚瘦,“玉大人,你說我怎么就攤上這事奏寨∑鹨猓” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵病瞳,是天一觀的道長揽咕。 經(jīng)常有香客問我,道長套菜,這世上最難降的妖魔是什么亲善? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮逗柴,結(jié)果婚禮上蛹头,老公的妹妹穿的比我還像新娘。我一直安慰自己戏溺,他們只是感情好渣蜗,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著旷祸,像睡著了一般耕拷。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上肋僧,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天斑胜,我揣著相機(jī)與錄音控淡,去河邊找鬼嫌吠。 笑死,一個胖子當(dāng)著我的面吹牛掺炭,可吹牛的內(nèi)容都是我干的辫诅。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼涧狮,長吁一口氣:“原來是場噩夢啊……” “哼炕矮!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起者冤,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤肤视,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后涉枫,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體邢滑,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年愿汰,在試婚紗的時候發(fā)現(xiàn)自己被綠了困后。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片乐纸。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖摇予,靈堂內(nèi)的尸體忽然破棺而出汽绢,到底是詐尸還是另有隱情,我是刑警寧澤侧戴,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布宁昭,位于F島的核電站,受9級特大地震影響救鲤,放射性物質(zhì)發(fā)生泄漏久窟。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一本缠、第九天 我趴在偏房一處隱蔽的房頂上張望斥扛。 院中可真熱鬧,春花似錦丹锹、人聲如沸稀颁。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽匾灶。三九已至,卻和暖如春租漂,著一層夾襖步出監(jiān)牢的瞬間阶女,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工哩治, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留秃踩,地道東北人。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓业筏,卻偏偏與公主長得像憔杨,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子蒜胖,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容