不知道大家還記不記得之前的四篇 PWA 系列翻譯：
https://zhuanlan.zhihu.com/p/23673184?refer=moduthhttps://zhuanlan.zhihu.com/p/23926652?refer=moduthhttps://zhuanlan.zhihu.com/p/23966686?refer=moduthhttps://zhuanlan.zhihu.com/p/23966862?refer=moduth不過這畢竟是老外他們自己的實踐，而且相對來說是從科普角度來描述了 PWA 的實踐，對想要直接進行 PWA 優化的，可能會覺得比較啰嗦。
恰好我司最近使用 React 全家桶開發了一個網站：海綿保保，所以干脆就拿它開刀，來進行 PWA 優化，順便記錄一下點滴。
作為切入的工具，Lighthouse 見：Lighthouse Chrome 插件。
首先我看了下 taobao 的評分，21/100，恩…這樣一來，就有信心了，再怎么我們肯定比它高不是？
測了一下，嗯…果然還算看得過去，66分，至少及格了不是？
我們的目標就是能把它優化到90分以上！（作為 PWA 模范的 mobile.twitter.com，就達到了90分）
作為系列第一篇，我們先來看看有哪些問題導致了網站評分不夠高，其產生原因和大概的解決策略。
第一類就是 Service Worker 導致的問題：
簡單描述 Service Worker 的話，可以理解為一個本地的 server，在客戶端（瀏覽器）發起請求的時候，可以直接監聽到它并直接進行響應。
當然，它不僅僅是這么一個攔截器，本身作為一個后臺運行的任務，它還能進行預加載，離線響應（返回200），甚至進行 push 提示。
各種性能指標不夠過關啦。
即 javaScript 被禁用的時候，頁面仍然應該有內容，即便那只是提示用戶需要打開 Javascript 以使用 app。
manifest 其實我已經加上了，還是因為 service worker 沒有注冊，所以最后沒有生效。
CSS 阻塞影響到了頁面體驗。
對比度啦，標簽啦，還有那么幾個缺省了的。
加載鏈太長。
總而言之就是一些新特性。
然而好像是插件還是 sw-tools 導致的。
本篇中我們大致看到了哪些問題導致了我們的 webapp 的 PWA 評分不夠高，下一次，我們會開始逐個開刀，解決這些問題。對本話題感興趣的朋友，也可以使用 Lighthouse 插件，對自家的網站或者其他網站來評評分，看看做得有多好（其實我們的66分真的已經挺高了）。
新聞熱點
疑難解答
