過去的 2016 年里，你一定不下數(shù)次聽到 PWA 這個詞艺栈，但它究竟是什么呢英岭？
PWA 其實是一種漸進式的的無需用戶安裝湾盒、可被隨時喚起的 Web App湿右，融合了 Native App 的結(jié)構(gòu)、交互罚勾、降級方案等的更優(yōu)體驗技術(shù)毅人，使得用戶通過瀏覽器打開網(wǎng)站時，獲得有如原生 app 般的順滑體驗尖殃。
Google 的官方文檔中是這樣介紹的：
PWA(Progressive Web App), Progressive Web Applications take advantage of new technologies to bring the best of mobile sites and native applications to users.
利用最新的技術(shù)帶給用戶最好的無線體驗丈莺。按照官方文檔，PWA 具有這些特性：Reliable, Fast, Engaging送丰。
可靠的（Reliable）：瞬間加載缔俄，即使在不穩(wěn)定的網(wǎng)絡(luò)下也不會顯示 downasaur（小恐龍頁面），通過預(yù)加載緩存關(guān)鍵資源器躏，消除對于網(wǎng)絡(luò)的依賴俐载，確認用戶在無網(wǎng)絡(luò)或者網(wǎng)絡(luò)情況較差情況下的即時可靠體驗。
快速的（Fast）：快速響應(yīng)并帶給用戶平滑的動畫體驗登失，沒有卡頓遏佣。
參與感（Engaging）：原生 app 一般的體驗，具有沉浸式的用戶體驗揽浙，可以將 Progressive Web App 安裝在用戶的主頻幕上状婶，甚至沒有瀏覽器的頭部，給用戶提供一種如原生 app 的全屏體驗馅巷。
但說了這么多膛虫，關(guān)于 Progressive Web App 我們應(yīng)該關(guān)注些什么呢？
獨立的 Logo
快速加載 App Shell 模型
添加到主屏幕钓猬，從主屏幕啟動
App-like 啟動畫面
Web App Manifest
Service Worker 離線緩存
推送通知 Push Notification
簡單概括描述一下走敌，PWA 是一種給用戶提供無需下載、快速啟動逗噩、順滑體驗的一項移動端技術(shù)掉丽。
獨特的識別性，快速與 Native App 進行區(qū)分
PWA 可以擁有一個桌面圖標异雁。Flipkart 不僅重新設(shè)計了 icon捶障，還將 PWA 改名為 Flipkart Lite。
使用 App Shell 快速加載頁面
App Shell 預(yù)加載頁面的框架結(jié)構(gòu)和基礎(chǔ) UI 元素纲刀，漸進式緩存项炼，動態(tài)加載內(nèi)容。
很多網(wǎng)站在加載頁面時都會遇 loading 等待的問題，這段時間里其實服務(wù)器在緊張的傳輸數(shù)據(jù)給客戶端锭部，再由客戶端將結(jié)構(gòu)渲染出來暂论、內(nèi)容填充進去“韬蹋可惜用戶并沒有耐心等待取胎，大家極有可能在這短短幾秒內(nèi)就關(guān)閉頁面走掉了。
通過 App Shell 快速加載湃窍，可以減少用戶界面中的白屏感受闻蛀，讓用戶知道數(shù)據(jù)正在填充回頁面。
無需下載您市，隨時喚起
PWA 讓 Web 應(yīng)用能夠像原生應(yīng)用一樣添加到主屏觉痛，無需通過應(yīng)用商店下載，減少了用戶安裝原生 app 的成本茵休。
用戶可以通過 Chrome 等瀏覽器的側(cè)邊欄添加（下圖左）或者通過 Chrome 彈出的 Add to Home Screen Banner 選擇同意添加（右圖）薪棒。可將 PWA 自帶的 icon 生成一個桌面 app 圖標榕莺，方便用戶隨時喚起俐芯。
友好的啟動頁
在無線頁面中，所有的元素都是實時渲染的帽撑。所以 PWA 增加了類似 Splash screen 的等待畫面泼各，顯示品牌 Logo 和品牌名，以便在這個等待時間內(nèi)亏拉，預(yù)加載第一個頁面所需的資源扣蜻，緩和用戶的等待時間。
沉浸式的的全屏體驗 Web App Manifest
用戶點擊被保存在桌面的 PWA icon 及塘，進入全屏的 PWA 界面莽使。沒有了瀏覽器頭部，Progressive Web App 和 Navtive App 幾乎沒有界面上的差別笙僚。
用戶在瀏覽和使用頁面的過程中芳肌，完全感知不到卡頓，所有的動效和反饋都是接近原生體驗的肋层。這對于像歐美這些應(yīng)用下載意愿較低的用戶而言亿笤，無疑是更進一步提升了在手機端的使用體驗。
無網(wǎng)絡(luò)也能訪問
當你處于無網(wǎng)絡(luò)時栋猖，可以繼續(xù)使用 PWA净薛，會自動加載你已經(jīng)緩存的內(nèi)容得以在離線時繼續(xù)訪問。這對于像巴西這類流量資費偏貴的用戶來說蒲拉，可以節(jié)省很多不必要的浪費肃拜。
不同網(wǎng)站對于 Service Worker 的使用也不同：
Flipkart 在無網(wǎng)絡(luò)狀態(tài)下痴腌，置灰展示所有頁面信息，所有已經(jīng)加載的內(nèi)容可以繼續(xù)瀏覽燃领，但是給到用戶的感覺過于消極士聪；
Digikala 在無網(wǎng)絡(luò)狀態(tài)下，僅使用灰色提示用戶已經(jīng)離線狀態(tài)猛蔽；
Alibaba 在無網(wǎng)絡(luò)狀態(tài)下剥悟，通過品牌定義的報錯顏色提示用戶出于離線狀態(tài)，但是由于整體頁面都比較明亮枢舶，用戶感知不到處于離線狀態(tài)懦胞；
Currency Converter 在無網(wǎng)絡(luò)狀態(tài)下替久，緩存的匯率比例可以繼續(xù)離線使用凉泄；可以看到不同產(chǎn)品對于自己產(chǎn)品訴求的不同，使用離線提示的方案也會各有不同蚯根。
不安裝也能推送通知 Push Notification
Push 是如今的產(chǎn)品必不可少的一個營銷工具后众，我們需要通過它傳遞信息、喚醒用戶颅拦。但通常的 Mobile Site 是不具備 Push 能力的蒂誉。PWA 卻可以，它能像 app 一樣接收網(wǎng)站訊息距帅，通知用戶網(wǎng)站產(chǎn)生了新的內(nèi)容或者和用戶相關(guān)的通知右锨，促使用戶的回訪。
與很多喜歡嘗鮮的團隊一樣碌秸，2016 年初我們開始與 Google 團隊合作绍移，推動 PWA 技術(shù)在 AliExpress 上的落地。希望通過“新設(shè)計帶來新體驗讥电；新技術(shù)推動新變革” 來看看 PWA 對于電商平臺的意義蹂窖。
結(jié)果是非常令人驚奇和滿意的。AliExpress 發(fā)現(xiàn)新用戶的轉(zhuǎn)換率增加了 104％恩敌。在 Safari 的轉(zhuǎn)化率也上升了 82％∷膊猓現(xiàn)在用戶每次訪問的頁面數(shù)量是原先的兩倍，也大大提升了用戶瀏覽頁面的時間纠炮。
AliExpress 的 Mobile Site 存在已經(jīng)有些年頭了月趟，邏輯也不比 app 簡單，想要重新開工并不是件容易的事情恢口。而對于設(shè)計團隊孝宗，我們的精力主要放在了以下幾個方面：
無線「格式化」
拋棄了原有 PC 年代的 Header 和 Footer 的形式，以更符合 Web App 的特性弧蝇。
優(yōu)化交互結(jié)構(gòu)
使用了類 app 的頭部導航結(jié)構(gòu)碳褒，整合頁面中的功能折砸，更合理的利用首屏的高度，更充分的展示有效內(nèi)容沙峻。
界面升級
不僅在 UI 界面層遵循了 Material Design 睦授，也在功能動效的還原上接近原生體驗。
結(jié)果喜人摔寨，但過程同樣也是坎坷不易的去枷。有些 tips 給到大家：
1. 為你的 PWA 設(shè)計一個有識別性的 icon ，區(qū)別于 Native App icon（如果你有的話）是复。
由于市面上有較多投放尺寸删顶，所以桌面啟動icon需要適配各種場景，包含的內(nèi)容：
Android Chrome 桌面圖標及開機畫面
iOS Safari 桌面圖標及全屏開機畫面
瀏覽器 favicon Windows Phone 圖標
其他配置
推薦使用 Favicon Generator for all platforms: iOS, Android, PC/Mac… 來生成各種尺寸的圖標及配置淑廊。
2. 梳理原有交互框架結(jié)構(gòu)逗余，使得頁面層級更輕量，流程更簡潔季惩。確認 App Shell 首先預(yù)加載的框架結(jié)構(gòu)和 UI 元素录粱，為每個頁面設(shè)計渲染加載圖片。
