PWA 漸進式實踐 （1） - Lighthouse in Action
不知道大家還記不記得之前的四篇 PWA 系列翻譯：
不過這畢竟是老外他們自己的實踐，而且相對來說是從科普角度來描述了 PWA 的實踐，對想要直接進行 PWA 優化的，可能會覺得比較囉嗦。
恰好我司最近使用 React 全家桶開發了一個網站：海綿保保，所以乾脆就拿它開刀，來進行 PWA 優化，順便記錄一下點滴。
作為切入的工具，Lighthouse 見：Lighthouse Chrome 外掛程式。
Lighthouse
首先我看了下 taobao 的評分，21/100，恩... 這樣一來，就有信心了，再怎麼我們肯定比它高不是？
測了一下，嗯... 果然還算看得過去，66分，至少及格了不是？
我們的目標就是能把它優化到90分以上！ （作為 PWA 模範的 http://mobile.twitter.com，就達到了90分）
作為系列第一篇，我們先來看看有哪些問題導致了網站評分不夠高，其產生原因和大概的解決策略。
App在離線/間斷網路下的載入
第一類就是 Service Worker 導致的問題：
簡單描述 Service Worker 的話，可以理解為一個本地的 server，在用戶端（瀏覽器）發起請求的時候，可以直接監聽到它並直接進行回應。
當然，它不僅僅是這麼一個攔截器，本身作為一個後台運行的任務，它還能進行預載入，離線回應（返回200），甚至進行 push 提示。
頁面載入性能
各種性能指標不夠過關啦。
漸進式增強
即 JavaScript 被禁用的時候，頁面仍然應該有內容，即便那只是提示使用者需要打開 JavaScript 以使用 app。
添加到主螢幕
manifest 其實我已經加上了，還是因為 service worker 沒有註冊，所以最後沒有生效。
避免影響用戶體驗的APIs
一些 css 標籤放在 header 裡，阻塞影響到了頁面體驗。
輔助功能
對比度啦，標籤啦，還有那麼幾個缺省了的。
性能指標
載入鏈太長。
奇妙的東西
總而言之就是一些新特性。
然而好像是外掛程式還是 sw-tools 導致的。
預告
本篇中我們大致看到了哪些問題導致了我們的webapp的 PWA 評分不夠高，下一次，我們會開始逐個開刀，解決這些問題。 對本話題感興趣的朋友，也可以使用 Lighthouse 外掛程式，對自家的網站或者其他網站來評評分，看看做得有多好（其實我們的66分真的已經挺高了）。