iOS新增快捷方式到桌面#

涉及：OpenUrl、iOS shceme、Data URI Scheme、JS、Socket#

功能：將應用的某一個頁面或某一個功能以快捷方式形式新增到桌面，使用者點選桌面圖示，可以喚起應用並開啟對應頁面或功能。

原創文章，歡迎轉載分享 微博@劉東寰

---

背景

使用者在使用如微博、淘寶、貼吧、百度地圖時，有些頁面開啟頻率非常高，甚至某個應用只為了這幾個單一的功能，這個時候，可以考慮將對應的功能頁面以快捷方式新增到桌面上。

---

實現這個功能的基礎

因為沒有找到或沒有這個功能的開放API，因此只能藉助Safari，在Safari中，有一個功能叫：新增到主螢幕，而我們將使用這個入口去實現這個功能。

Safari中新增到主螢幕，就是把當前頁面的url以圖示的形式新增到桌面，點選該圖示，還是開啟Safari並開啟對應的url，和我們想要的效果不一樣，繼續看下去。

---

iOS之OpenUrl

OpenUrl(開放連結)

例如：

[[UIApplication sharedApplication] openURL:[NSURLURLWithString:@"tel://xxx"]];

在iOS中，如果我們要在應用裡喚起撥號應用，會使用這麼一種方式，"tel://" 就是撥號應用在程式裡註冊的scheme，所有應用都可以在程式裡註冊scheme，這種scheme在整個手機裡是通用的，第三方的分享也是依賴這種方式通過openURL:scheme的方式喚起自己的應用。

那麼如何註冊自己應用的scheme？網上關於這方面非常多，就貼個連結吧here.

OpenUrl在這個功能的利用就是：

1. 通過OpenUrl喚起Safari，讓Safari訪問一個指定頁面。
2. Safari儲存到桌面的圖示，在點選時通過OpenUrl喚起我們的應用。（你可以在Safari位址列輸入tel://xxx）

---

Safari開啟怎麼樣的頁面？

通過OpenUrl，我們可以讓應用開啟Safari並訪問一個頁面。我們知道Safari新增到桌面是把當前的URL新增到桌面，那麼，當我們點選圖示的時候也是訪問這個頁面。而這個頁面在第一次被開啟的時候需要顯示一些引導頁之類的，而在桌面被開啟的時候卻需要呼叫一個scheme。這似乎不太可能，我們接著往下看。

---

JS

對JS不是太熟悉，以下方法來自網路

<script>
if (window.navigator.standalone == true)
{
    var lnk = document.getElementById("你的帶scheme的<a>標籤ID").click();
    //通過你所知道的方式開啟一個scheme，上面這句話的連結標籤如：<a href="tel://xxx">
}
else
{
    document.getElementById("msg").innerHTML='<div style="font-size:12px">
    可以插入引導頁</div>';
    //這裡你可以去載入你的引導頁
}
</script>

你可以試試通過Safari儲存一個頁面到桌面，再開啟這個頁面，你會發現，前者是非全屏狀態，而通過快捷方式開啟的Safari是全屏的。這正是一個突破口。

if (window.navigator.standalone == true)

判斷當前頁面是否全屏，如果非全屏，那麼我們顯示引導頁，如果是全屏，我們就開啟一個連結。到這裡，上一個問題就被解決了。

---

已經可以實現這個功能了

現在你可以在伺服器部署一個網頁實現這個功能了。但是，還是有缺點的，每次點選快捷方式我們都需要訪問這個頁面，如果網路狀態不好，那麼是很大的延時，（比如xx貼吧目前的狀況）。

進一步優化之利用Data URI Scheme

我們希望這個頁面不依賴網路。在這個過程中試驗了多種方案，這裡只貼我認為最妥的一種。

做過前端的小夥伴可能說到這就明白了，Data URI Scheme（DATA－URI 是指可以在Web 頁面中包含圖片但無需任何額外的HTTP 請求的一類URI.）比如網頁裡需要放一張圖片，這張圖片會有一個地址，而圖片的獲取是需要訪問網路的。但是通過DataURI，我們可以把圖片進行base64編碼直接儲存在頁面中。

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

這裡，我們就要通過這種方式，把我們的網頁儲存在位址列，首先，我們將做好的頁面（含引導頁和跳轉scheme）通過base64編碼成DataURIScheme，接著，我們放入這樣一個新頁面的<meta>標籤。這個新頁面的作用就是作為一箇中間物，所以其他可以不寫。

<meta http-equiv="refresh" content="0;URL= ‘your datauri’>

這個新頁面你需要部署到伺服器，接著應用就開啟這個頁面，這個時候，頁面會自動重新整理一次，你會發現，你編碼過的網頁就出現在了位址列，是不是很神奇。然後你把這個頁面新增快捷方式到桌面。斷開網路，再試試開啟這個快捷方式吧。

---

該專案的Demo: iOS新增快捷方式到桌面

微博：@劉東寰