我曾在《讓W(xué)eb App和Native App的無(wú)聊之爭(zhēng)消停會(huì)兒吧，看看那些明智的Web技術(shù)解決方案》中講到過(guò)第一個(gè)選擇純粹Web App路線的主流新聞媒體——Financial Times（金融時(shí)報(bào)）。FT產(chǎn)品主管曾說(shuō)過(guò)，開(kāi)發(fā)Web面臨幾個(gè)主要挑戰(zhàn)：1. 目前Web App領(lǐng)域的開(kāi)發(fā)文檔、測(cè)試工具都很稀缺，需要自己開(kāi)發(fā)測(cè)試工具來(lái)測(cè)試性能；2. 不同的瀏覽器性能差別很大，使得圖片和視頻呈現(xiàn)效果不一且可能出現(xiàn)一些Bug；3. 許多用戶都是首次接觸Web App，需要為用戶做好使用指南；4. 做好離線功能（支持預(yù)覽、離線訪問(wèn)、內(nèi)容的收藏、下載等）。
最近，在Orlando FL上，Andrew Betts分享了他們?cè)贔inancial Times上離線功能的一些設(shè)計(jì)原則：
1. 依靠多種形式的存儲(chǔ)在客戶端上的各類數(shù)據(jù)：Cookies、 localStorage、IndexedDB、AppCache和Files API，并且每個(gè)本地存儲(chǔ)解決方案之間是相互獨(dú)立的。盡量精簡(jiǎn)Appcache中保存的內(nèi)容，例如最基本的Javascript、CSS和HTML，只要它能夠支持Web App啟動(dòng)就足夠了，后面的工作就交給AJAX和 eval來(lái)完成，把它們保存在localStorage中。
2. 從訂閱列表中下載最新的文章（使用JSON格式），當(dāng)整個(gè)內(nèi)容下載成功后，清空數(shù)據(jù)庫(kù)中已有的內(nèi)容，然后調(diào)用將最新下載的文章存入數(shù)據(jù)庫(kù)。最后使用jQuery并調(diào)用一個(gè)模板將文章的標(biāo)題顯示在訂閱列表中。
3. 每當(dāng)更新文章列表時(shí)，其中的每個(gè)條目都會(huì)被重新下載，所以可以將部分內(nèi)容存于瀏覽器緩存中，這樣可以快速填充AppCache。同時(shí)可以利用JavaScript API監(jiān)控AppCache的可用空間并精細(xì)的指定哪些內(nèi)容是需要被重新下載的。
4. 將App的主要功能模塊與Web頁(yè)面完全分離，例如那些翻頁(yè)、前進(jìn)和后退的功能。這樣，應(yīng)用啟動(dòng)時(shí)只需要在這些模塊的基礎(chǔ)上加載內(nèi)容的緩存就行了。而那些需要頻繁使用的緩存一定要保存在localStorage中。
5. Mozilla建議將 AppCache的格式更改為JSON并通過(guò)網(wǎng)絡(luò)控制其加載，而Google正在開(kāi)發(fā)一個(gè)全新的API，能夠在JavaScript 中創(chuàng)建一個(gè)導(dǎo)航控制器，此控制器設(shè)定不同緩存加載的優(yōu)先級(jí)，你也可以在其中自定義緩存加載規(guī)則。
6. IE和FireFox以不同的方式管理 AppCache，在設(shè)計(jì)時(shí)需要考慮這些差異。
7．不同瀏覽器之間對(duì)緩存的大小有很大的不同，一定要確保文章表單有足夠的空間供App保存離線閱讀的文章。
8．JavaScript使用UTF-16編碼，其每個(gè)字符占兩個(gè)字節(jié)，而如果用ASCII碼（每個(gè)字符占一個(gè)字節(jié)）轉(zhuǎn)化，將能夠節(jié)省一倍的空間。
相關(guān)閱讀：
讓W(xué)eb App和Native App的無(wú)聊之爭(zhēng)消停會(huì)兒吧，看看那些明智的Web技術(shù)解決方案
“Web App和Native App誰(shuí)才是未來(lái)？”這類的討論幾乎成了移動(dòng)互聯(lián)網(wǎng)的月經(jīng)話題。這兩天，又有朋友跟我說(shuō)到“Native App必死”的論調(diào)，我并不贊同他的觀點(diǎn)，理由很簡(jiǎn)單：雖然我們都知道Native App有許多缺點(diǎn)——客戶端的開(kāi)發(fā)工作量大；軟件升級(jí)和維護(hù)比較麻煩；每次版本更新都需要向官方市場(chǎng)提交審核；開(kāi)發(fā)者需要針對(duì)不同的操作系統(tǒng)和不同分辨率的終端進(jìn)行適配開(kāi)發(fā)工作；服務(wù)器端要支持多客戶端，難于擴(kuò)展。但目前為止，其性能和用戶體驗(yàn)都很難被Web App取代。同時(shí)，Web App還有其他的一些弱點(diǎn)——服務(wù)器端的開(kāi)發(fā)工作量大，邏輯復(fù)雜；需要在更多設(shè)備上進(jìn)行測(cè)試；前端技術(shù)還未標(biāo)準(zhǔn)化；難使用設(shè)備的特性（傳感器、GPS定位、本地文件系統(tǒng)等）。所以，我認(rèn)為這兩種解決方案各有千秋，并不存在“誰(shuí)將戰(zhàn)勝誰(shuí)”的問(wèn)題。
雖然討論“誰(shuí)才是未來(lái)”的話題毫無(wú)意義，但我比較關(guān)心另一個(gè)話題：在當(dāng)前狀況下，針對(duì)不同的公司規(guī)模，面向不同的應(yīng)用領(lǐng)域，該如何做技術(shù)選型？我們看到，HTML5技術(shù)雖然已經(jīng)火熱許久，但真正利用HTML5技術(shù)構(gòu)建的成功的App相較于Native App而言可謂微乎其微，所以我認(rèn)為看看那些利用HTML5技術(shù)成功的案例是幫助我們思考這個(gè)問(wèn)題最簡(jiǎn)單的方法。
我想說(shuō)的第一個(gè)案例是Financial Times（金融時(shí)報(bào)）的FT Web App，它是第一個(gè)選擇純粹Web App路線的主流新聞媒體。我一直認(rèn)為，就目前而言，最適合嘗試Web App的應(yīng)用領(lǐng)域就是在線媒體，因?yàn)槠涮匦耘cWeb App的優(yōu)勢(shì)十分貼合：用戶動(dòng)作簡(jiǎn)單（無(wú)非是閱讀、收藏、評(píng)論這幾樣核心功能）、注重內(nèi)容呈現(xiàn)、無(wú)需做太多的視覺(jué)效果、面臨最多的跨平臺(tái)問(wèn)題、與服務(wù)器關(guān)系密切、需要快速的操作體驗(yàn)、輕量且易于更新。還有非常重要的一點(diǎn)，媒體的核心價(jià)值在于其內(nèi)容，而在當(dāng)今為內(nèi)容付費(fèi)的成功案例都稀缺的情況下，用戶是絕對(duì)不會(huì)為這類App的下載付費(fèi)，而開(kāi)發(fā)一個(gè)Native App需要花費(fèi)較高的成本，我認(rèn)為對(duì)于許多為變現(xiàn)發(fā)愁小型媒體而言，這種做法是不太明智的。
FT產(chǎn)品主管在談到他們的Web App時(shí)，除了對(duì)其以上特性的溢美之詞外，也分享了他們面臨的幾個(gè)主要挑戰(zhàn)：1. 目前Web App領(lǐng)域的開(kāi)發(fā)文檔、測(cè)試工具都很稀缺，需要自己開(kāi)發(fā)測(cè)試工具來(lái)測(cè)試性能；2. 不同的瀏覽器性能差別很大，使得圖片和視頻呈現(xiàn)效果不一且可能出現(xiàn)一些Bug；3. 許多用戶都是首次接觸Web App，需要為用戶做好使用指南；4. 做好離線功能（支持預(yù)覽、離線訪問(wèn)、內(nèi)容的收藏、下載等），他們?cè)诠俜讲┛蚑utorial: How to make an offline HTML5 web app, FT style中分享了詳盡的解決方案。
第二個(gè)案例是LinkedIn的iPad App，與FT不同的是，LinkedIn并不是一個(gè)完全的Web App。而是一個(gè)95%的工作由HTML5技術(shù)解決，剩下5%的工作（據(jù)說(shuō)只有界面）是依靠Native App完成的，它實(shí)際上可以被成為是一個(gè)Hybrid App。
LinkedIn之所以選擇在iPad上利用HTML5技術(shù)開(kāi)發(fā)應(yīng)用是因?yàn)橄噍^于其他的移動(dòng)設(shè)備，iPad擁有更強(qiáng)大的處理器性能，能夠讓HTML5技術(shù)發(fā)揮良好的特性，保證整個(gè)App的體驗(yàn)和響應(yīng)速度。其負(fù)責(zé)人在接受VentureBeat的采訪時(shí)分享了一些他們的經(jīng)驗(yàn)：專注于簡(jiǎn)潔的設(shè)計(jì)，通過(guò)移除一些不必要的設(shè)計(jì)來(lái)提高響應(yīng)速度，例如去處圓角和漸變效果等。同時(shí)，他們大量使用Node.js來(lái)提高服務(wù)器的負(fù)載能力。
如今，像LinkedIn這種利用Hybrid架構(gòu)解決方案的團(tuán)隊(duì)越來(lái)越多，即將需要使用本地資源、數(shù)據(jù)和需要高表現(xiàn)力的部分交給Native來(lái)完成，其余部分由Web來(lái)負(fù)責(zé)。 這么做一方面能將Web App的許多特性表現(xiàn)的淋漓盡致，另一方面也能保證應(yīng)用有不錯(cuò)的響應(yīng)速度和本地特性。
上面兩個(gè)例子中的FT和LinkedIn都是在線的、內(nèi)容屬性和實(shí)時(shí)屬性非常強(qiáng)且對(duì)效果要求不高的產(chǎn)品。這也是我認(rèn)為如今最適合嘗試Web App技術(shù)的產(chǎn)品類型，而像游戲這種對(duì)動(dòng)畫(huà)效果和處理性能要求很高的產(chǎn)品，還沒(méi)有在HTML5技術(shù)運(yùn)用上十分成功的案例（已經(jīng)有一些游戲公司在嘗試Hybrid方案）。所以我想說(shuō)的是，請(qǐng)拋開(kāi)對(duì)Web App和Native App非黑即白的爭(zhēng)論，這個(gè)世界上，從來(lái)沒(méi)有最好的技術(shù)或是編程語(yǔ)言，只有最恰當(dāng)?shù)倪x擇和與之匹配的解決方案。