為了給某個網(wǎng)頁或者整個網(wǎng)站指定一個漂亮的桌面啟動圖標(biāo)，iOS Safari提供了兩個私有接口： apple-touch-icon 和 apple-touch-icon-precomposed。

Apple-touch-icon

設(shè)置方法

通過在頁面HTML的頭部添加 <link> 標(biāo)簽

<link rel="apple-touch-icon" href="touch-icon-iphone.png" /> 
<link rel="apple-touch-icon-precomposed" href="touch-icon-precomposed.png" /> 

這兩個標(biāo)簽都是用來指定桌面圖標(biāo)的，但兩者有個細微的區(qū)別，

• 通過 apple-touch-icon 添加的圖標(biāo)是會帶iOS圖標(biāo)統(tǒng)一的高光效果
• 通過 apple-touch-icon-precomposed 添加的圖標(biāo)則是設(shè)計原圖，不帶高光漸變效果的。

圖片大小

為了給不同的iOS設(shè)備指定其啟動圖標(biāo)，在iOS Human Interface Guide中提到，推薦以下四種尺寸：

相應(yīng)地，要指定不同分辨率的設(shè)備的圖標(biāo)，可以添加相應(yīng)的 <link> 標(biāo)簽序列，官方建議的順序是這樣的

<link rel="apple-touch-icon" href="touch-icon-iphone.png" /> 
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /> 
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" /> 
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" /> 

通過 <link> 的 <sizes> 屬性可以特別地聲明這個圖標(biāo)是為哪種分辨率設(shè)備準(zhǔn)備的，如果沒有指明 <sizes> 屬性的大小，則默認(rèn)值為57×57。

如果所有的 <link> 標(biāo)簽序列中都沒有符合官方推薦的最適尺寸的話，那么iOS會從所有比推薦的最適尺寸大的圖標(biāo)中選擇尺寸最小的那一個，如果所有的 <link> 標(biāo)簽序列中的圖標(biāo)都比當(dāng)前推薦的最適尺寸小的話，iOS會從這些圖片中自動選擇最大的那個來作為啟動圖標(biāo)。

特別地，如果整個頁面都沒有指定任何的 apple-touch-icon 的圖標(biāo)的話，iOS則會自動去網(wǎng)站根目錄尋找有 apple-touch-icon 和 apple-touch-icon-precomposed 前綴的圖標(biāo)文件。

圖片格式

用于設(shè)置成為桌面啟動圖標(biāo)的圖片文件，可以是以下三種類別

• 純靜態(tài)的圖片圖片的路徑可以絕對路徑、相對于當(dāng)前頁面的相對路徑以及相對于網(wǎng)站根目錄的路徑。目前發(fā)現(xiàn)不僅支持png格式的，jpg和gif也在支持的列表中，如：

  

   /files/uploadimg/20130522/1005102.png 

  但如果是動態(tài)gif圖片只會截取一幀（第一幀？）來顯示

• 包含圖片文件頭的HTTP REQUEST可以不是一個靜態(tài)的文件，而是由服務(wù)器返回的帶有圖片文件比如 image/png 文件頭的請求。就像我們常用的圖片
  占位圖工具 http://getimg.in 的圖片：

  

http://getimg.in/144x144tcat

這個的優(yōu)點是可以根據(jù)前端需要動態(tài)地返回不同的圖片，缺點是，每次新的圖片都需要請求服務(wù)器，從服務(wù)器下載

base64格式的圖片這是一個包含png文件頭的長字符串，它可以是一張從靜態(tài)圖片轉(zhuǎn)換的，也可以是從服務(wù)器返回的，還可以是canvas生成的。

data:image/png;base64,(xxxxxx)

#p#

更新桌面啟動圖標(biāo)

不完全動態(tài)的桌面圖標(biāo)

首先需要聲明的是，webapp不能像nativeapp一樣后臺推送，在沒打開前是不運行的，而webapp里所有的js邏輯都只有在頁面打開狀態(tài)下才能運行，所以動態(tài)修改桌面啟動圖標(biāo)的方法只有在每次點開后才能生效。

基于此，動態(tài)桌面圖標(biāo)的使用并不適合比如天氣、新聞、twitter等即時性很高、后臺主動推送的場景，僅僅適用于用戶每次手動打開后便更新內(nèi)容，更新完之后的icon能作為一個狀態(tài)的標(biāo)識供用戶參考，比如任務(wù)管理工具、記帳軟件等。

選擇canvas作為動態(tài)圖片來源

使用base64的優(yōu)點是，可以選擇由canvas來動態(tài)生成，并且不需要有網(wǎng)絡(luò)請求，直接在本地完成。

而且我們的場景非常特殊：僅iOS的Safari，所以完全可以不用考慮瀏覽器的支持度。

var canvas = document.createElement('canvas'); 
canvas.width = 144; 
canvas.height = 144; 
var context = canvas.getContext("2d"); 
var baseImg = canvas.toDataURL();     

通過js動態(tài)創(chuàng)建和修改指定桌面圖標(biāo)的 <link> 標(biāo)簽

桌面圖標(biāo)在頁面里的聲明僅僅存在 <link> 中，理論上我們只要動態(tài)修改 <link> 標(biāo)簽的圖片地址就能實現(xiàn)動態(tài)的圖標(biāo)。

首次從safari里將頁面添加主屏幕時，iOS會檢查頁面里的 <link> 標(biāo)簽，讀取圖片的地址然后生成啟動圖標(biāo)。并且這個標(biāo)簽只要在用戶執(zhí)行這步操作之前就有的，即不管是頁面模板里靜態(tài)本來存在的，還是通過js動態(tài)創(chuàng)建的，該方法一樣生效。

• 頁面中的link是默認(rèn)存在的

  

  http://av.cm/tick/test/DefaultLink.html

• 通過點擊觸發(fā)生成的link，仍然可以生成到桌面

  

  http://av.cm/tick/test/ClickAddLink.html

我們期望的場景是，用戶在webapp里進行了一項操作，這個操作更新了整個webapp的狀態(tài)，我們希望這個狀態(tài)的改變能在桌面的啟動圖標(biāo)里體現(xiàn)出來。

拿task工具來舉例，用戶在點開之前，桌面圖標(biāo)上顯現(xiàn)任務(wù)隊列里還有3個任務(wù)，當(dāng)添加了一個新的任務(wù)之后，桌面圖標(biāo)上的任務(wù)數(shù)字應(yīng)該變成4。當(dāng)所有的任務(wù)都被打勾完成之后，桌面圖標(biāo)也應(yīng)該反饋這樣的狀態(tài)，比如顯示0條任務(wù)或者其它鼓勵類的圖標(biāo)。

所以理論上，我們要做的就是在每次操作之后，通過js在一個canvas中繪出新的圖案，再將這個canvas轉(zhuǎn)化成base64的圖片，動態(tài)創(chuàng)建到一個 <link> 標(biāo)簽添加至head就行了。

但事實上并不是這樣。

webapp的桌面圖標(biāo)渲染

當(dāng)在webapp里創(chuàng)建了一個 <link> 再退出后，發(fā)現(xiàn)桌面的啟動圖標(biāo)并沒有像我們期望的那樣被更新。

經(jīng)過死乞白賴的測試后發(fā)現(xiàn)，在webapp里進行添加和修改的 <link> 標(biāo)簽并不能被iOS讀取和渲染到，雖然 <link> 標(biāo)簽在頁面里的確存在著，但并不會被更新到桌面。因為webapp里的圖標(biāo)是在body.onload的時候被渲染的。

是的，盡管這樣聽上去很不科學(xué)，但是他還是發(fā)生了。下面的兩個demo的功能都把webapp打開的次數(shù)畫進canvas，然后生成到桌面圖標(biāo)里，只不過第一個demo的添加方法是在 body.onload 時觸發(fā)，第二個是在用戶點擊操作時才觸發(fā)。

• body.onload 自動觸發(fā)

  

  http://av.cm/tick/test/BodyLoadSetIcon.html本頁面將在每次body.onload事件后讀出打開的次數(shù)，生成下面的圖片，并把這個圖片添加至head。先添加頁面至主屏幕，在webapp模式下打開再退出檢查桌面啟動圖標(biāo)。圖標(biāo)上的數(shù)字標(biāo)識出頁面被打開的次數(shù)，在每次打開再退出后圖標(biāo)上的數(shù)字將加1。

• 通過點擊操作添加link

  

  http://av.cm/tick/test/ClickSetIcon.html本頁面在載入的時頁面頭部并沒有l(wèi)ink標(biāo)簽，通過點擊操作讀出打開的次數(shù)，生成下面的圖片，并把這個圖片添加至head。先添加頁面至主屏幕，在webapp模式下打開再退出檢查桌面啟動圖標(biāo)。在每次打開再退出后圖標(biāo)上的數(shù)字始終沒有被修改。

既然已知圖標(biāo)是在 body.onload 時被渲染的，那么我們需要在每次操作之后都要進行一次reload操作，并且在body.onload的時候再生成圖片添加 <link> 標(biāo)簽。為了保證在每次頁面重載的時候狀態(tài)不丟失，需要把狀態(tài)保存起來，考慮到webapp特殊的使用場景和環(huán)境，使用LocalStorage就非常方便。

最終的邏輯

所以，更新桌面圖標(biāo)的方法都應(yīng)該綁定在 body.onload 上，整個流程看上去應(yīng)該這個樣子的：

1. 頁面載入（包括從桌面打開頁面時），讀取LocalStorage，根據(jù)LocalStorage轉(zhuǎn)換成狀態(tài)，通過canvas生成體現(xiàn)狀態(tài)的圖片并轉(zhuǎn)換成base64格式，創(chuàng)建 <link> 添加到 <head> 里
2. 在打開的頁面里進行操作，把操作完的狀態(tài)在到LocalStorage中，然后通過 location.reload() 重新載入一次頁面，執(zhí)行第一步。

基本上所有與更新Icon的關(guān)鍵邏輯都在 body.onload 時執(zhí)行完畢，其它的中間態(tài)都只是對狀態(tài)的更新。

Tick-Task

這里有一個簡單的DEMO，以webapp形式實現(xiàn)的任務(wù)工具。主要演示了上面提到的更新桌面啟動圖標(biāo)的邏輯。

http://av.cm/tick/

第一次添加到主屏幕時顯示的是從Safari里默認(rèn)的初始圖片（這里是一個燈泡），當(dāng)更新了任務(wù)列表之后，桌面上的啟動圖標(biāo)將會顯示任務(wù)列表里未完成的任務(wù)，除此之外：

• 當(dāng)在safari中打開時，根據(jù) navigation.standalone 判斷當(dāng)前網(wǎng)頁是否以webapp運行。如果不是則顯示添加到主屏幕的提示。
• 添加任務(wù)或者完成任務(wù)會將條目內(nèi)容存到LocalStorage，并且刷新頁面，根據(jù)所剩未完成條目數(shù)生成圖片添加到link。
• 使用Manifest保存全部靜態(tài)資源，保證每次頁面重載時的體驗，并且在離線狀態(tài)下仍然可用。
• 使用開源的頁面搖晃檢測js庫 – shake.js，完成條目后搖晃手機可以清除已完成任務(wù)，并播放聲音。

你還可以在github上查看詳細的代碼，并且如果愿意的話提出改進。

Try and enjoy it.

最后

webapp因為權(quán)限的原因，尚不能做到：

• webapp不能像nativeapp一樣后臺push，在沒打開前是不運行的，而webapp里所有的js邏輯都只有在頁面處理打開狀態(tài)下才能運行，所以動態(tài)修改桌面啟動圖標(biāo)的方法只有在每次點開后才能生效。
• 目前尚未找到像更改桌面圖標(biāo)一樣動態(tài)地更改標(biāo)題的方法
• 未找到給webapp添加氣泡的方法

但是，Apple在iOS設(shè)備的主屏幕上為webapp開了一扇窗戶，我們也許可以通過這扇窗為用戶帶來特別的體驗。