前言
優秀的前端工程師戴着腳铐跳舞，究竟能把 HTML5 的體驗推進到什麼程度？
這些 Web apps 是我們營運雲集浏覽器的網上應用店一年來，我選出的十佳 Web apps。其中參考了同僚們的意見，但也帶有強烈的主觀傾向，反映了我個人對于一個「Web application」設計、實作與價值的一些取向。當然，你也可以認為這是我作為一個自認為挑剔的産品經理，謹代表「雲集浏覽器」頒給這些優秀 Web 應用的開發者或團隊的嘉獎。如果你還在思考 Web 的體驗究竟能不能和原生媲美（這件事情在 PC 上很久之前就已經發生了），看看這些體驗優良的 Web apps，也許會給你更多來自現實世界的參考。
下面我将分别介紹這些 Web apps，解釋為什麼它是這個名次，并附上一個截圖。在文章的末尾，我會附上一個由我同僚制作的視訊，通過實際操作來示範這些 Web apps，所有示範均在雲集浏覽器 iOS 版内進行。
注意：
- 這篇文章的所有觀點、看法與評論，均發表于 2016 年 1 月 4 日，要知道，Web 是随時可以更新的，我下面提到的這些 Web apps，你看到的可能已經和我看到的不一樣了；
- 時間範圍為在 2015 年上線，或者在 2015 年 HTML5 端正式上線的産品；
- 均為國内的 Web apps，或者主要面向國内市場的 Web apps；
- 其實本來标題是「2015 年十佳 Web apps」。
正文
第十名「720 雲」
剛看到「720 雲」的時候我是很震撼的，它在浏覽器裡就帶給了我全景與 VR 的體驗。直到最近才有 Mozilla 的 AFrame 架構能讓普通開發者也快速開發出 VR 場景，可以說「720 雲」在技術上也是領先的。
為什麼「720 雲」在我心目中隻能排到第十名呢？因為他們的清單頁對移動端實在太不友好，給了一個「十分随意」的響應式設計就了事了。當然全景頁的體驗很重要，清單頁的也是很重要的，這種程度的響應式簡直就和 bug 一樣。

第九名「Yummy」
「Yummy」是一個定位于新時代年輕女性的女性社群，截止今日，社群闆塊劃分為「推薦」、「直播」、「OO」、「玩具」。對我來說，這個社群是一個「直男癌疫苗」，經常食用可以預防直男癌。除了産品的定位和功能之外，其主色調為黑色和暗玫瑰，給人一種隐秘的安全感。它基于 Angular 開發，滾動看起來是純 JS 實作，擁有 pull to refresh 和 infinite scroll，但是這個純 JS 實作的滾動，性能并不是十分理想。我個人一直比較反對使用純 JS 滾動方案，事實上「Yummy」已經做得十分不錯了。之是以給到第九名，還是因為一個 bug，有需要登入的地方，會直接跳到登入框，而登入框之前是一個重定向，回到上一頁的時候會陷入重定向循環，導緻無法回到需要登入之前的頁面。似乎他們已經修複了這個 bug。
第八名「動漫之家」
「動漫之家」擁有大量優秀的原創漫畫，其手機網頁端設計十厘清爽，閱讀體驗也十分良好，基本符合移動端使用者的使用模式，美中不足的是，沒有實作 SPA，也沒有足夠且有意義的動效。
第七名「BusyWeek!」
「BusyWeek!」是一個獨立開發者的作品，開源在了 GitHub，作者是非計算機科班出生的@Huxpro。除了基本的「Todo list」功能外，它的體驗十分像一個原生應用，通過其源碼可以看到這是一個 Vue 的項目，通過 LeanCloud 實作了無後端開發（隻有一個用于渲染前端代碼的 server.js）。有想要進一步了解的開發者朋友可以閱讀這個項目的源碼。「BusyWeek!」的缺點在于「navigation drawer」的使用十分不規範：一會兒是登入框，一會兒是同步框，一會兒又是 filter。要知道「navigation drawer」作為一個容器元件，承擔的主要責任是切換中間部分的界面，而不是彈框，或者更新界面狀态。當然你可以教育我「規範是死的，場景是活的」，但是我認為規範雖然可以去突破，但是不能百分之百的違背，否則之前已經習慣這一規範的使用者會感到很奇怪。
第六名「氧氣」
「氧氣」是一個專注于女性内衣推薦的 app，其網頁端的體驗也十分優秀，基本上延續了他家 native app 的設計語言，并且可以直接在網頁上完成購買。缺點和「動漫之家」差不多，沒有實作 SPA。這個問題的本質其實是「究竟是伺服器端渲染還是用戶端渲染，或者到底哪些部分該伺服器端渲染哪些部分該用戶端渲染，以後有機會的話，希望能單獨寫一篇文章讨論」。
第五名「Flipboard 中國」
「Flipboard 中國」在我們的網上應用店裡一直評分較高，排名較前。除了其中的資訊内容，和它優秀的體驗也是分不開的。「Flipboard 中國」手機網頁端的滑動體驗和閱讀體驗都非常優秀，究其原因，我認為是十分用心的體驗設計，CDN 與優化過的 HTTP 請求，和它對于 GPU 加速的應用。值得一提的是，「Flipboard 中國」是基于最近大熱的 React 開發的。
第四名「Anitama」
「Anitama」是一個二次元動漫媒體，其網頁端品質上乘。剛打開的時候會給你展示一個有趣的「黃曆」，「周刊」和「日刊」之間可以滑動切換。點選底欄 Tab bar 的時候，有一個類似于 Material Design 的水波紋回報。除此之外，他家的
<meta>
和
<link>
标簽異常得齊全，對移動端的友好程度可以說是頂級的，不僅有常見的
viewport
、
apple-touch-icon
mobile-web-app-capable
，還有相容 Google Chrome 的
manifest
theme-color
，相容 Edge 的
msapplication-TileColor
等，可以說是「移動端 HTML5 應用的
<head>
應該怎麼寫」的教科書。
第三名「石墨」
「石墨」的 slogan 是「最優美的線上協作文檔」，介紹為「支援多人同時對文檔編輯和評論，讓你與他人輕松完成協作撰稿、方案讨論、會議記錄和資料共享等工作」。「石墨」的功能十分強大，通過 WebSocket 實作實時的協作，并且在網頁端也能和其他所有用戶端互相同步。雖然目前在手機網頁端能做的事情有限，但是最核心的功能「協作編輯」與「邀請協作者」使用完全沒有問題。
第二名「一點資訊」
作為一個資訊閱讀類 Web app，「一點資訊」幾乎挑不出任何毛病。所有的新聞排版是爬蟲索引後再二次處理過的，所有的界面切換均無卡頓（或者設計得讓你感覺不出有卡頓），布局清晰，符合規範的同時又有自己思考。
第一名「Muzzik」
「Muzzik」是一個音樂分享社群。如果我沒猜錯的話，它的讀音和「music」是一樣的，其 slogan 為「最好時代的音樂故事，最壞時代的安慰劑」。「Muzzik」通過響應式設計實作了一套 PC 與手機端通用的界面。整體的設計方案透露着一股強烈的個性，那應該就是他們設計師所相信的他們使用者群體所擁有的個性。音樂播放方案使用了移動端浏覽器廣泛支援的
new Audio()
方案，即在記憶體裡建立
HTMLAudioElement
但是不挂載到 DOM 上。開發者朋友可能比較關心本次評選的冠軍使用的是哪套 MV* 方案，答案是 Angular。
視訊示範
後記
![APP強制更新(uni-app)項目要求：解決思路：效果圖：具體代碼：總結[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)