1.Progressive Web Apps
2016年Progressive Web Apps（文後簡稱PWA）風勁較大，本文作者詳細梳理了PWA現狀，希望能幫助讀者更深入瞭解PWA，主要內容如下：
PWA定義：描述一下PWA的緣起與使命。
PWA技術：說明完成PWA開發需要使用哪些技術，主要介紹Web App Manifest（使web更像native）、Service Workers（增強web能力）、Application Shell（提升web效率）等使用場景和基本原理。
PWA優勢：通過相關案例數據和官網簡單闡述PWA優勢。
小結：如何開啓PWA之旅，以及瞭解Chrome Dev Summit 2016的PWA“最佳實踐”。
2.PWA 的定義和10大特性
2015年，Google Chrome Blink的網絡開發人員Alex Russell提出Progressive Web App概念，Alex希望通過一系列技術手段來提升Web用戶體檢，把開發者從App Store的打包、部署等流程中解放出來，目標是爲Web App提供個性化能力、添加到主屏幕、推送通知、離線工作、觸摸體驗等。
（圖：Progressive Web App）
具體來說Progressive Web Apps不是一種技術，也不是工具或方法論， 是一種Web應用的形態，滿足以下10個主要特性：
漸進增強： 應用運行在儘可能多的環境中。它會使用任何可用的服務，如果沒有可用的服務則會優雅降級。
響應用戶界面： 應用適應多種輸入方式（觸摸、 語言輸入等）和多種輸出方式（不同的屏幕尺寸、震動、音頻、盲文顯示等）。
連接性、獨立性：應用可在斷網以及間歇性斷網或低帶寬環境下很好地工作。
類應用 UI：應用採用原生平臺的 UI 元素，包括快速加載用戶界面（可以通過 Service Workers 獲取重要的緩存資源）。
持續更新（“時新性”）：Service Workers API 定義一個進程用來將應用自動更新至新版。
安全通信：應用使用 HTTPS 通信來提供服務，阻止網絡劫持和攻擊。
應用發現：像 W3C 應用 Manifest 元數據一樣，有利於搜索引擎查找 web 應用。
推送與互動：推送通知的特性，主動讓用戶瞭解最新動態。
可本地安裝：在一些平臺上，你可以安裝 web 應用使得它看起來像一個本地應用（將 icon 放在主屏，在應用程序切換器單獨列出，chrome 瀏覽器可選）。所有這些應用不用經過本地應用商店。
可連接性：通過 URL 可以輕鬆分享應用，不用安裝即可運行，依賴瀏覽器，不依賴任何其他平臺，如微信，百度。
3.Progressive Web Apps技術
PWA 具體實現是通過以下三方面來加強Web用戶體驗：
Web App Manifest
Service Workers
Application Shell
更真：Web App Manifest使web更像native
Web App Manifest以JSON的格式，定義Web 應用的相關配置。簡單說就是使Web應用更像native應用。配置包括應用名稱、圖標或圖像連接、啓動URL、自定義特性、啓動默認配置、全屏設置等，如下示例：
（圖：Manifest定義）
使用效果，如下圖（沒有瀏覽輸入框，背景顏色，應用管理中也顯示背景顏色），中間百度爲對比：
更強：Service Workers增強web能力
通過在瀏覽器中增加可編寫腳本的網絡代理層，監聽瀏覽器與服務器的交互，是離線處理的核心，也是基礎技術。簡單可以理解爲基於傳統Web Page 環境增加一個網絡代理層。Service Workers的上下文環境是網絡代理層，不是頁面Page層，雖然它們都是Script運行環境：
1）Service Workers一般不能直接操作Dom元素，需要經過shell接口和Page層交互。
2）調試方式也不一樣，如獲取sw.js一般是(from disk cache)，不能直接使用chrom的Open in Sources Panel。
3）可用的API也不一樣，如Microsoft Edge Cache API。
（圖：Service Worker、Web Page 環境不一致）
Service Workers是以事件驅動的方式代理請求，使用Service Workers可以處理推送通知、同步基礎數據、方便Web緩存使用、響應源自其他地方的資源請求目前這個不常用。
Service Workers工作模式
可以是：Cache Only、Network Only、Cache with Network fallback、Cache and Network Race、Network, then Cache。選擇其中Cache then Network場景，數據請求鏈路可以控制爲如下路徑；
（圖：Service Workers工作方式）
Service Workers 工作場景
實際使用場景中，Service Workers是多種工作模式的混合使用，如下圖：混合Cache Only,Cache with Network fallback。其中 app.html爲直接使用Cache，data.json是先使用Cache，但是同時去服務端更新data.json；
（圖：Service Workers使用場景）
Service Workers 實現
Service Workers的實現分爲兩部分，本身實現，配套實現，是事件狀態驅動的，本身有狀態，如圖左邊是標準中支持的狀態，右圖加載並註冊其他監聽事件的過程。
如果瀏覽器不支持Service Workers，那麼後續也就無法監聽其他事件，也被叫做優雅降級。
（圖：Service Workers加載與註冊）
Service Workers配套技術如下
Fetch API、Cache API、Push API已是w3c標準，被大部分瀏覽器支持或支持中。
WebUSB API、WebShare API、WebBluetooth API、Message API、Credential Manager API 、PaymentRequest ，只有極少部分瀏覽器支持，非全部都可以在Service Workers 腳本中使用。
Fetch API： Fetch API 提供了獲取資源（比如通過網絡）的接口。對於使用過 XMLHttpRequest 的人來說應該很熟悉，不過這個新的 API 提供了更加強大靈活的特性。已經較規模使用了，可以簡單理解爲ajax的另一種實現。
（圖：Fetch API）
Cache API：開發者可以全面方便地管理其內容緩存以供離線使用，其內容完全在Service Workers腳本的控制下。前端腳本直接控制瀏覽器緩存，而且提供相應接口去控制緩存。提供離線能力的核心部分。
（圖：Cache API）
Push API：向Web應用程序提供對服務器發送的通知的腳本訪問，瀏覽器發送通知到服務器。
更快：Application Shell Architecture提升web效率
App Shell定義
App Shell是應用的用戶界面所需的最基本的 HTML、CSS 和 JavaScript，也是一個用來確保應用性能的組件。簡單來說就是應用的外殼，它的首次加載將會稍微慢點，加載後立刻被緩存下來。這意味着應用的外殼不需要每次使用時都被下載，而是隻異步加載需要的數據，以達到UI保持本地化。通過動態API，也可以達到實時加載和定期更新內容，所以使web能擁有如下特性：負載快、緩存、動態顯示內容。
應用的殼相當於那些發佈到應用商店的原生應用中打包的代碼。用原生應用來類比的話，相當於你下載一個微信客戶端，數據是從服務器拉取的一樣。應用的殼是讓你的Web應用能夠運行的核心組件，只是沒有包含數據，主要是針對響應式網站設計(Responsive Web design)。
（圖：Application Shell定義）
應用外殼的結構分爲應用的核心基礎組件和承載數據的 UI。所有的 UI 和基礎組件都使用一個 Service Workers 緩存在本地。
App Shell工作過程
（圖：Application Shell加載資源過程）
APP Shell工作場景
（圖：Application Shell 工作場景，對不同資源的處理差異）
很像Service Workers + Cache，也有瀏覽器靜態資源緩存的縮影。
App shell和Service Workers + Cache最大的區別是：App Shell 可以統一緩存組件資源，對用戶不可見。
App shell與目前傳統瀏覽器緩存資源主要差異是：使用環境不同、緩存策略不同（可控制更新）。
4.PWA 優勢
應用案例
其實已經很多大廠在使用了，比較有規模的案例有：AliExpress、Youtube、Facebook、Flip Kart、Airberlin、Google PWA、Washingtonpost。
PWA優勢
（圖：官方宣傳）
（圖：優勢明顯）
兼容性
PWA 的各項技術向後兼容性很好，如果某項技術在客戶端上不支持，那就對其無效，僅此而已。實施新特性並不需要做出破壞向後兼容的改動。也是體現了 PWA 中 P（progressive）的含義——漸進式增強。
5.小結
我理解的PWA
當前階段
14年開始推廣概念，15年重點推廣案例，到16年就主推最佳實踐，從剛開始全講好處，到目前重點宣傳怎麼具體落地與優化。通過Chrome、Firefox、Opera的努力，今年Edge也大力的支持。不過因爲PWA會降低了應用商店的管控能力，所以現在Apple的Safari是不怎麼支持的。
國內困局
目前有意思的差異主要是印度的蓬勃發展和中國的愛理不理成爲最鮮明的差異，究其原因還是環境差異、現階段的限制。
瀏覽器不支持：iPhone瀏覽器或國產手機自帶瀏覽器，絕大多不支持。
互聯網環境複雜：
1）國內大公司都有足夠技術積累和足夠資金，而且相比較而言更推崇封閉策略，所以都是先各種Webview方案嵌套，然後才輪得到瀏覽器。
2）對比美國，人力成本低，同質化競爭慘烈，移動端哪怕重金打造native app，提高一點用戶體驗也是值得的。
移動端性能：同一時期的chrome版，現在桌面版還是移動版的5-10倍。這也是今年Chrome Dev Summit 2016關注移動端web性能的原因，
印度的風行
基礎網絡：網絡更自由，可以使用全套google服務，另外因爲基礎網絡差，下載一個動輒幾十上百M的App非常痛苦。
企業競爭：沒有像國內如此慘烈，對於用戶操作體驗的追求相對不高。
機會
雖然基於以上原因不少人看衰PWA在中國的推進，個人覺得雖然不致於像印度那樣大力發展，但是也有它所適用的場景，認爲還是很有必要了解和熟悉PWA相關。如果還沒有入坑，那這個時候入坑也是比較合適。
企業成本：首先，公司層面，不是所有公司都那麼壕，尤其在資本寒冬時代，更多公司需要考慮投入產出比，這時web還是有很大優勢的。
業務效率：初創企業或成熟企業的實驗業務需要快速落地，快熟迭代推進，這時web也更有利。
競爭激烈：同樣是國內競爭激烈，有一部分，而且還佔不小比例，因各種原因不願（麻煩）或不能（沒空間，網速不夠）下載app，這部分用戶的移動體驗也是需要考慮。不能因爲已經有移動 App就完全不顧移動使用瀏覽器訪問的用戶體驗。
瀏覽器：儘管目前國內還比較混亂，但是我認爲將來對標準的支持將會成爲瀏覽器競爭的一個重點，畢竟也要適當的迎合開發者。另外隨着移動硬件的發展，移動和桌面瀏覽器的效率差異也將縮小。
開發者：對於開發者，哪怕不考慮移動端採用PWA相關技術，桌面端優化也應該適當考慮PWA相關方案。
不過漸進式Web應用程序的真正強大之處在於，讓我們使用Web技術的卓越性，儘量去獲得良好的移動體驗。目前，PWA已經初具規模，開發者瞭解和跟蹤PWA相應進展還是很有必要的，PWA不是想完全顛覆什麼，PWA相關技術也並不是，所有技術只是web的提供更好的體驗。
普元雲計算專區：http://primeton.csdn.net/m/zone/primeton/index#
普元公衆號：
