iOS Web App的icon教程全攻略
為了給某個網頁或者整個網站指定一個漂亮的桌面啟動圖標，iOS Safari提供了兩個私有接口： apple-touch-icon 和 apple-touch-icon-precomposed。
Apple-touch-icon
設置方法
通過在頁面HTML的頭部添加 <link> 標簽
- <link rel="apple-touch-icon" href="touch-icon-iphone.png" />
- <link rel="apple-touch-icon-precomposed" href="touch-icon-precomposed.png" />
這兩個標簽都是用來指定桌面圖標的，但兩者有個細微的區別，
- 通過
apple-touch-icon添加的圖標是會帶iOS圖標統一的高光效果 - 通過
apple-touch-icon-precomposed添加的圖標則是設計原圖，不帶高光漸變效果的。
圖片大小
為了給不同的iOS設備指定其啟動圖標，在iOS Human Interface Guide中提到，推薦以下四種尺寸：
| iOS設備 | 最適尺寸(px) |
|---|---|
| iPhone 和 iTouch | 57 x 57 |
| retina iPhone 和 retina iTouch | 114 x 114 |
| iPad | 72 x 72 |
| retina iPad | 144 x 144 |
相應地，要指定不同分辨率的設備的圖標，可以添加相應的 <link> 標簽序列，官方建議的順序是這樣的
- <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> 屬性可以特別地聲明這個圖標是為哪種分辨率設備準備的，如果沒有指明 <sizes> 屬性的大小，則默認值為57×57。
如果所有的 <link> 標簽序列中都沒有符合官方推薦的最適尺寸的話，那么iOS會從所有比推薦的最適尺寸大的圖標中選擇尺寸最小的那一個，如果所有的 <link> 標簽序列中的圖標都比當前推薦的最適尺寸小的話，iOS會從這些圖片中自動選擇最大的那個來作為啟動圖標。
特別地，如果整個頁面都沒有指定任何的 apple-touch-icon 的圖標的話，iOS則會自動去網站根目錄尋找有 apple-touch-icon 和 apple-touch-icon-precomposed 前綴的圖標文件。
圖片格式
用于設置成為桌面啟動圖標的圖片文件，可以是以下三種類別
- 純靜態的圖片圖片的路徑可以絕對路徑、相對于當前頁面的相對路徑以及相對于網站根目錄的路徑。目前發現不僅支持png格式的，jpg和gif也在支持的列表中，如：
/files/uploadimg/20130522/1005102.png但如果是動態gif圖片只會截取一幀（第一幀？）來顯示
- 包含圖片文件頭的HTTP REQUEST可以不是一個靜態的文件，而是由服務器返回的帶有圖片文件比如
image/png文件頭的請求。就像我們常用的圖片
占位圖工具 http://getimg.in 的圖片：
http://getimg.in/144x144tcat
這個的優點是可以根據前端需要動態地返回不同的圖片，缺點是，每次新的圖片都需要請求服務器，從服務器下載
base64格式的圖片這是一個包含png文件頭的長字符串，它可以是一張從靜態圖片轉換的，也可以是從服務器返回的，還可以是canvas生成的。
data:image/png;base64,(xxxxxx)
#p#
更新桌面啟動圖標
不完全動態的桌面圖標
首先需要聲明的是，webapp不能像nativeapp一樣后臺推送，在沒打開前是不運行的，而webapp里所有的js邏輯都只有在頁面打開狀態下才能運行，所以動態修改桌面啟動圖標的方法只有在每次點開后才能生效。
基于此，動態桌面圖標的使用并不適合比如天氣、新聞、twitter等即時性很高、后臺主動推送的場景，僅僅適用于用戶每次手動打開后便更新內容，更新完之后的icon能作為一個狀態的標識供用戶參考，比如任務管理工具、記帳軟件等。
選擇canvas作為動態圖片來源
使用base64的優點是，可以選擇由canvas來動態生成，并且不需要有網絡請求，直接在本地完成。
而且我們的場景非常特殊：僅iOS的Safari，所以完全可以不用考慮瀏覽器的支持度。
- var canvas = document.createElement('canvas');
- canvas.width = 144;
- canvas.height = 144;
- var context = canvas.getContext("2d");
- var baseImg = canvas.toDataURL();
通過js動態創建和修改指定桌面圖標的 <link> 標簽
桌面圖標在頁面里的聲明僅僅存在 <link> 中，理論上我們只要動態修改 <link> 標簽的圖片地址就能實現動態的圖標。
首次從safari里將頁面添加主屏幕時，iOS會檢查頁面里的 <link> 標簽，讀取圖片的地址然后生成啟動圖標。并且這個標簽只要在用戶執行這步操作之前就有的，即不管是頁面模板里靜態本來存在的，還是通過js動態創建的，該方法一樣生效。
- 頁面中的link是默認存在的
http://av.cm/tick/test/DefaultLink.html
- 通過點擊觸發生成的link，仍然可以生成到桌面
http://av.cm/tick/test/ClickAddLink.html
我們期望的場景是，用戶在webapp里進行了一項操作，這個操作更新了整個webapp的狀態，我們希望這個狀態的改變能在桌面的啟動圖標里體現出來。
拿task工具來舉例，用戶在點開之前，桌面圖標上顯現任務隊列里還有3個任務，當添加了一個新的任務之后，桌面圖標上的任務數字應該變成4。當所有的任務都被打勾完成之后，桌面圖標也應該反饋這樣的狀態，比如顯示0條任務或者其它鼓勵類的圖標。
所以理論上，我們要做的就是在每次操作之后，通過js在一個canvas中繪出新的圖案，再將這個canvas轉化成base64的圖片，動態創建到一個 <link> 標簽添加至head就行了。
但事實上并不是這樣。
webapp的桌面圖標渲染
當在webapp里創建了一個 <link> 再退出后，發現桌面的啟動圖標并沒有像我們期望的那樣被更新。
經過死乞白賴的測試后發現，在webapp里進行添加和修改的 <link> 標簽并不能被iOS讀取和渲染到，雖然 <link> 標簽在頁面里的確存在著，但并不會被更新到桌面。因為webapp里的圖標是在body.onload的時候被渲染的。
是的，盡管這樣聽上去很不科學，但是他還是發生了。下面的兩個demo的功能都把webapp打開的次數畫進canvas，然后生成到桌面圖標里，只不過第一個demo的添加方法是在 body.onload 時觸發，第二個是在用戶點擊操作時才觸發。
- body.onload 自動觸發
http://av.cm/tick/test/BodyLoadSetIcon.html本頁面將在每次body.onload事件后讀出打開的次數，生成下面的圖片，并把這個圖片添加至head。先添加頁面至主屏幕，在webapp模式下打開再退出檢查桌面啟動圖標。圖標上的數字標識出頁面被打開的次數，在每次打開再退出后圖標上的數字將加1。
- 通過點擊操作添加link
http://av.cm/tick/test/ClickSetIcon.html本頁面在載入的時頁面頭部并沒有link標簽，通過點擊操作讀出打開的次數，生成下面的圖片，并把這個圖片添加至head。先添加頁面至主屏幕，在webapp模式下打開再退出檢查桌面啟動圖標。在每次打開再退出后圖標上的數字始終沒有被修改。
既然已知圖標是在 body.onload 時被渲染的，那么我們需要在每次操作之后都要進行一次reload操作，并且在body.onload的時候再生成圖片添加 <link> 標簽。為了保證在每次頁面重載的時候狀態不丟失，需要把狀態保存起來，考慮到webapp特殊的使用場景和環境，使用LocalStorage就非常方便。
最終的邏輯
所以，更新桌面圖標的方法都應該綁定在 body.onload 上，整個流程看上去應該這個樣子的：
- 頁面載入（包括從桌面打開頁面時），讀取LocalStorage，根據LocalStorage轉換成狀態，通過canvas生成體現狀態的圖片并轉換成base64格式，創建
<link>添加到<head>里 - 在打開的頁面里進行操作，把操作完的狀態在到LocalStorage中，然后通過
location.reload()重新載入一次頁面，執行第一步。
基本上所有與更新Icon的關鍵邏輯都在 body.onload 時執行完畢，其它的中間態都只是對狀態的更新。
Tick-Task
這里有一個簡單的DEMO，以webapp形式實現的任務工具。主要演示了上面提到的更新桌面啟動圖標的邏輯。
http://av.cm/tick/
第一次添加到主屏幕時顯示的是從Safari里默認的初始圖片（這里是一個燈泡），當更新了任務列表之后，桌面上的啟動圖標將會顯示任務列表里未完成的任務，除此之外：
- 當在safari中打開時，根據
navigation.standalone判斷當前網頁是否以webapp運行。如果不是則顯示添加到主屏幕的提示。 - 添加任務或者完成任務會將條目內容存到LocalStorage，并且刷新頁面，根據所剩未完成條目數生成圖片添加到link。
- 使用Manifest保存全部靜態資源，保證每次頁面重載時的體驗，并且在離線狀態下仍然可用。
- 使用開源的頁面搖晃檢測js庫 – shake.js，完成條目后搖晃手機可以清除已完成任務，并播放聲音。
你還可以在github上查看詳細的代碼，并且如果愿意的話提出改進。
Try and enjoy it.
最后
webapp因為權限的原因，尚不能做到：
- webapp不能像nativeapp一樣后臺push，在沒打開前是不運行的，而webapp里所有的js邏輯都只有在頁面處理打開狀態下才能運行，所以動態修改桌面啟動圖標的方法只有在每次點開后才能生效。
- 目前尚未找到像更改桌面圖標一樣動態地更改標題的方法
- 未找到給webapp添加氣泡的方法
但是，Apple在iOS設備的主屏幕上為webapp開了一扇窗戶，我們也許可以通過這扇窗為用戶帶來特別的體驗。
