簡單介紹一下Progressive Web App(PWA)

王玉略發表於2018-01-29

前段時間在公司的內部分享會上簡單地介紹了一些關於PWA的技術，不過當時用的是思維導圖版本的，現在整理成部落格分享給大家

Progressive Web App(PWA)

一、前期介紹

1、為什麼要將PWA作為本次的技術分享

2017年11月份，谷歌在上海舉辦了一個開發者大會，期間在很多會場都有關於PWA的介紹，王二認為谷歌在致力於推行這項技術，那麼技術上還是很先進的，於是有了如下分享。

2、簡單介紹

PWA的中文名叫做漸進式網頁應用，早在2014年， W3C 公佈過 Service Worker 的相關草案，但是其在生產環境被 Chrome 支援是在 2015 年。因此，如果我們把 PWA 的關鍵技術之一 Service Worker 的出現作為 PWA 的誕生時間，那就應該是 2015 年。

自 2015 年以來，PWA 相關的技術不斷升級優化，在使用者體驗和使用者留存兩方面都提供了非常好的解決方案。PWA 可以將 Web 和 App 各自的優勢融合在一起：漸進式、可響應、可離線、實現類似 App 的互動、即時更新、安全、可以被搜尋引擎檢索、可推送、可安裝、可連結。

需要特別說明的是，PWA 不是特指某一項技術，而是應用了多項技術的 Web App。其核心技術包括 App Manifest、Service Worker、Web Push，等等。

3、為什麼W3C和谷歌在推廣這項技術

這就要從前端的現狀說起：

Native APP 用起來很流暢，但是也有其天然的基因缺陷：

由於其天生封閉的基因，內容無法被索引

使用者 80% 的時間被 Top3 的超級 App 佔據，對於站點來說，應用分發的價效比也越來越不划算

要使用它，首先還需要下載幾十兆上百著兆的安裝包

WEB前端雖然天生具有開放的基因，但是很多時候頁面會卡頓，使用者體驗不佳。雖然社群之前也做過很多努力，例如virtual dom、spa、混合程式設計、用canvas將整個頁面畫出來，使用者體驗也有了很大的改善，但是仍然無法解決幾個重要的問題：

離線時使用者無法使用

無法接收訊息推送

移動端沒有一級入口

W3C和谷歌看到了這些問題，於是推出了PWA。

4、PWA的核心目標

PWA的核心目標就是提升 Web App 的效能，改善 Web App 的使用者體驗。媲美native的流暢體驗，將網路之長與應用之長相結合。

二、特點

1、PWA的特點

PWA具有以下一些特點：

這邊有一個關於PWA特點的列表清單，有興趣的同學可以點進去看看.

2、特點詳解

（1）、可安裝

1、可安裝指的是可以像原生APP在主螢幕上留有圖示。

2、但是這需要我們提供 Web app manifest，manifest.json 是一個簡單的JSON檔案，我們在 html 頁面如下引用他：

它描述了我們的圖示在主螢幕上如何顯示，以及圖示點選進去的啟動頁是什麼，它的JSON格式如下所示：

其中：

start_url 可以設定啟動網址

icons 會幫我萌設定各個解析度下頁面的圖示

background_color 會設定背景顏色， Chrome 在網路應用啟動後會立即使用此顏色，這一顏色將保留在螢幕上，直至網路應用首次呈現為止。

theme_color 會設定主題顏色

display 設定啟動樣式

關於manifest.json裡欄位更加具體的含義，感興趣的同學可以參考MDN文件或者谷歌開發者文件裡的這篇文章

3、實際上豆瓣移動端就是一個PWA應用，如果我們用高版本的瀏覽器開啟，就會發現有橫幅提示，不過需要注意的是，IOS似乎還不支援，以下王二用安卓手機來做一個演示：

開啟豆瓣後，瀏覽器會提示新增到主螢幕：

點選確定後，他會提示新增成功，然後在主螢幕上留有一個豆瓣的圖示。

（2）、離線使用

1、PWA 另一項令人興奮的特性就是可以離線使用,其背後用到的技術是 Service worker ;

2、Service worker實際上是一段指令碼，在後臺執行。作為一個獨立的執行緒，執行環境與普通指令碼不同，所以不能直接參與 Web 互動行為。Service Worker 的出現是正是為了使得 Web App 也可以做到像 Native App 那樣可以離線使用、訊息推送的功能。

我們可以把Service worker當做是一種客戶端代理，

3、我們來看看如何註冊一個 Service Worker

關於Service Worker更加詳細的介紹，感興趣的同學可以參考MDN文件或者Github上的Basic Service Worker Sample這篇介紹。

4、當然 Service Worker 也有生命週期，參考下圖：

關於 Service Worker 生命週期的詳細介紹可以參考下面這張圖：

關於Service Worker 生命週期更加詳細的介紹，感興趣的同學可以參考MDN文件

（3）、訊息推送

訊息推送具體可以參考谷歌的官方教程Your First Web Push Notification,裡面有詳細的程式碼Demo和說明，以及相應的後臺配置（帶好梯子）。

3、開發者如何瞭解是否具備這些特點

說了這麼多，那我們開發者如何瞭解一個網頁是否具備了 PWA 的一些特點呢？

這時候谷歌開發者工具可以幫上我們的忙，在 Chrome瀏覽器的開發者工具裡有一個Audits皮膚，它可以幫我們檢測網頁是否具備了PWA的一些特點：

三、有哪些企業已經在使用PWA？

1、國內已經有豆瓣、餓了麼使用了部分PWA技術；

2、國外用PWA的企業相對較多，例如Twitter、Filpboard;

3、特別需要注意的是Twitter ，Twitter 在 2017 年上線了 Twitter Lite PWA，其獲得了相當驚人的收益：

平均使用者停留時長增長 65%

Web 站點發推的數量增長 75%

跳出率降低 20%

Twitter Lite 能取得這樣的成績，歸功於 PWA 的新技術和使用者體驗至上的設計原則：它通過 Service Worker 快取檔案，讓頁面可以離線，同時降低網路消耗；通過 Web Push 接受伺服器推送的訊息；採用 App Shell 的設計模型，配合 Service Worker 能讓頁面瞬間展現。

4、另外一些採用了PWA的網站可以參考這個連結