Google 版小程序，為什麼大家都喜歡用？｜靈感早讀

過去的 2016 年裡，你一定不下數次聽到 PWA 這個詞，但它究竟是什麼呢？

PWA 其實是一種漸進式的的無需用戶安裝、可被隨時喚起的 Web App，融合了 Native App 的結構、交互、降級方案等的更優體驗技術，使得用戶通過瀏覽器打開網站時，獲得有如原生 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.

利用最新的技術帶給用戶最好的無線體驗。按照官方文檔，PWA 具有這些特性：Reliable, Fast, Engaging。

可靠的（Reliable）：瞬間載入，即使在不穩定的網路下也不會顯示 downasaur（小恐龍頁面），通過預載入緩存關鍵資源，消除對於網路的依賴，確認用戶在無網路或者網路情況較差情況下的即時可靠體驗。

快速的（Fast）：快速響應並帶給用戶平滑的動畫體驗，沒有卡頓。

參與感（Engaging）：原生 app 一般的體驗，具有沉浸式的用戶體驗，可以將 Progressive Web App 安裝在用戶的主頻幕上，甚至沒有瀏覽器的頭部，給用戶提供一種如原生 app 的全屏體驗。

但說了這麼多，關於 Progressive Web App 我們應該關注些什麼呢？

• 獨立的 Logo
• 快速載入 App Shell 模型
• 添加到主屏幕，從主屏幕啟動
• App-like 啟動畫面
• Web App Manifest
• Service Worker 離線緩存
• 推送通知 Push Notification

簡單概括描述一下，PWA 是一種給用戶提供無需下載、快速啟動、順滑體驗的一項移動端技術。

PWA 可以擁有一個桌面圖標。Flipkart 不僅重新設計了 icon，還將 PWA 改名為 Flipkart Lite。

App Shell 預載入頁面的框架結構和基礎 UI 元素，漸進式緩存，動態載入內容。

很多網站在載入頁面時都會遇 loading 等待的問題，這段時間裡其實伺服器在緊張的傳輸數據給客戶端，再由客戶端將結構渲染出來、內容填充進去。可惜用戶並沒有耐心等待，大家極有可能在這短短几秒內就關閉頁面走掉了。

通過 App Shell 快速載入，可以減少用戶界面中的白屏感受，讓用戶知道數據正在填充回頁面。

PWA 讓 Web 應用能夠像原生應用一樣添加到主屏，無需通過應用商店下載，減少了用戶安裝原生 app 的成本。

用戶可以通過 Chrome 等瀏覽器的側邊欄添加（下圖左）或者通過 Chrome 彈出的 Add to Home Screen Banner 選擇同意添加（右圖）。可將 PWA 自帶的 icon 生成一個桌面 app 圖標，方便用戶隨時喚起。

在無線頁面中，所有的元素都是實時渲染的。所以 PWA 增加了類似 Splash screen 的等待畫面，顯示品牌 Logo 和品牌名，以便在這個等待時間內，預載入第一個頁面所需的資源，緩和用戶的等待時間。

用戶點擊被保存在桌面的 PWA icon ，進入全屏的 PWA 界面。沒有了瀏覽器頭部，Progressive Web App 和 Navtive App 幾乎沒有界面上的差別。

用戶在瀏覽和使用頁面的過程中，完全感知不到卡頓，所有的動效和反饋都是接近原生體驗的。這對於像歐美這些應用下載意願較低的用戶而言，無疑是更進一步提升了在手機端的使用體驗。

當你處於無網路時，可以繼續使用 PWA，會自動載入你已經緩存的內容得以在離線時繼續訪問。這對於像巴西這類流量資費偏貴的用戶來說，可以節省很多不必要的浪費。

不同網站對於 Service Worker 的使用也不同：

• Flipkart 在無網路狀態下，置灰展示所有頁面信息，所有已經載入的內容可以繼續瀏覽，但是給到用戶的感覺過於消極；
• Digikala 在無網路狀態下，僅使用灰色提示用戶已經離線狀態；
• Alibaba 在無網路狀態下，通過品牌定義的報錯顏色提示用戶出於離線狀態，但是由於整體頁面都比較明亮，用戶感知不到處於離線狀態；
• Currency Converter 在無網路狀態下，緩存的匯率比例可以繼續離線使用；可以看到不同產品對於自己產品訴求的不同，使用離線提示的方案也會各有不同。

Push 是如今的產品必不可少的一個營銷工具，我們需要通過它傳遞信息、喚醒用戶。但通常的 Mobile Site 是不具備 Push 能力的。PWA 卻可以，它能像 app 一樣接收網站訊息，通知用戶網站產生了新的內容或者和用戶相關的通知，促使用戶的回訪。

與很多喜歡嘗鮮的團隊一樣，2016 年初我們開始與 Google 團隊合作，推動 PWA 技術在 AliExpress 上的落地。希望通過「新設計帶來新體驗；新技術推動新變革」 來看看 PWA 對於電商平台的意義。

結果是非常令人驚奇和滿意的。AliExpress 發現新用戶的轉換率增加了 104％。在 Safari 的轉化率也上升了 82％。現在用戶每次訪問的頁面數量是原先的兩倍，也大大提升了用戶瀏覽頁面的時間。

AliExpress 的 Mobile Site 存在已經有些年頭了，邏輯也不比 app 簡單，想要重新開工並不是件容易的事情。而對於設計團隊，我們的精力主要放在了以下幾個方面：

無線「格式化」

拋棄了原有 PC 年代的 Header 和 Footer 的形式，以更符合 Web App 的特性。

優化交互結構

使用了類 app 的頭部導航結構，整合頁面中的功能，更合理的利用首屏的高度，更充分的展示有效內容。

界面升級

不僅在 UI 界面層遵循了 Material Design ，也在功能動效的還原上接近原生體驗。

結果喜人，但過程同樣也是坎坷不易的。有些 tips 給到大家：

1. 為你的 PWA 設計一個有識別性的 icon ，區別於 Native App icon（如果你有的話）。

由於市面上有較多投放尺寸，所以桌面啟動icon需要適配各種場景，包含的內容：

• Android Chrome 桌面圖標及開機畫面
• iOS Safari 桌面圖標及全屏開機畫面
• 瀏覽器 favicon Windows Phone 圖標
• 其他配置

推薦使用 Favicon Generator for all platforms: iOS, Android, PC/Mac… 來生成各種尺寸的圖標及配置。

2. 梳理原有交互框架結構，使得頁面層級更輕量，流程更簡潔。確認 App Shell 首先預載入的框架結構和 UI 元素，為每個頁面設計渲染載入圖片。