不知道大家還記不記得之前的四篇 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分真的已經挺高了）。