來自譯者 markzhai：大家也知道最近 Web 越來越火了，如果你還以為 Web 就是 jQuery、Ajax、CSS 什么的，那你就 out 了。給大家?guī)讉€鏈接看一看吧：
- https://shop.polymer-project.org/
- https://housing.com/
- https://www.flipkart.com/
- https://react-hn.appspot.com/
- https://mobile.twitter.com/
- https://www.instagram.com/
部分可能需要自備梯子，另外建議在 Chrome 下查看，畢竟該死的 X5，大家都懂得。
- 原文作者：Addy Osmani
- 譯文出自：掘金翻譯計劃
- 譯者 : markzhai
- 校對者：Tina92, DeadLion
使用 React.js 的漸進式 Web 應(yīng)用程序：第 1 部分 - 介紹
漸進式 Web 應(yīng)用程序利用新技術(shù)的優(yōu)勢帶給了用戶最佳的移動網(wǎng)站和原生應(yīng)用。它們是可靠的，迅捷的，迷人的。它們來自可靠的源，而且無論網(wǎng)絡(luò)狀態(tài)如何都能加載。
在 漸進式 Web 應(yīng)用程序 (PWAs) 的世界中有很多新東西，你可能會想知道它們和現(xiàn)有架構(gòu)是如何兼容的 —— 比如 React 和 JS 模塊化打包工具如 Webpack 之間的兼容性如何。PWA 是否需要大量的重寫？你需要關(guān)注哪個 Web 性能度量工具？在這系列的文章中，我將會分享將基于 React 的 web apps 轉(zhuǎn)化為 PWAs 的經(jīng)驗。我們還將包括為什么僅加載用戶路由所需要的，并拋開其他所有腳本是提高性能的好方式。
Lighthouse
讓我們從一個 PWA manifest 開始。為此我們會使用 Lighthouse?—?一個評審 app 面向 PWA 特性 的工具，并且檢查你的 app 在模擬移動場景下是否做的足夠好。Lighthouse 可以通過 Chrome 插件 (我大部分時候都用這個) 以及 CLI 來使用，兩者都會展示一個類似這樣的報告：
來自 Lighthouse Chrome 插件的結(jié)果
頂級評審工具 Lighthouse 會高效地運行一系列為移動世界精煉的現(xiàn)代 web 最佳實踐：
- 網(wǎng)絡(luò)連接是安全的
- 用戶會被提醒將 app 添加到 Homescreen
- 安裝了的 web app 啟動時會帶自定義的閃屏畫面
- App 可以在離線/斷斷續(xù)續(xù)的連接下加載
- 頁面加載性能快速
- 設(shè)計是移動友好的
- 網(wǎng)頁是漸進式增強的
- 地址欄符合品牌顏色
順便一提，有一個 Lighthouse 的 快速入門指南，而且它還能通過 遠程調(diào)試 工作。超級酷炫。
無論在你的技術(shù)棧中使用了什么庫，我想要強調(diào)的是在上面列出的一切，在今天都只需要一點小小的工作量就能完成。然而也有一些警告。
我們知道移動 web 是 慢的。
web 從一個以文檔為中心的平臺演變?yōu)榱祟^等的應(yīng)用平臺。同時我們主要的計算能力也從強大的，擁有快速可靠的網(wǎng)絡(luò)連接的強大桌面機器移動到了相對不給力的，連接通常慢，斷斷續(xù)續(xù)或者兩者都存在的移動設(shè)備上。這在下一個 10 億用戶即將上網(wǎng)的世界尤其真實。為了解鎖更快的移動 web：
- 我們需要全體轉(zhuǎn)移到在真實移動設(shè)備，現(xiàn)實的網(wǎng)絡(luò)連接下進行測試 (e.g 在 DevTools 的常規(guī) 3G)。 chrome://inspect 和 WebPageTest (視頻) 是你的好幫手。Lighthouse 模擬一臺有觸摸事件的 Nexus 5X 設(shè)備，以及 viewport 仿真 和 被限制的網(wǎng)絡(luò)連接 （150毫秒延遲，1.6Mbps 吞吐量)。
- 如果你使用的是設(shè)計開發(fā)時沒有考慮移動設(shè)備的 JS 庫，你可能會為了可交互性能打一場硬仗。我們的理想化目標是在一臺響應(yīng)式設(shè)備上 5 秒內(nèi)變得可交互，所以我們應(yīng)用代碼的預算會更多是 ?
通過一些工作，可以寫出 如 Housing.com 所展示的 在有限網(wǎng)絡(luò)環(huán)境下，真機上依然表現(xiàn)良好的使用 React 開發(fā)的 PWAs。我們在接下來的系列中討論如何實現(xiàn)的詳盡 細節(jié)。
話雖如此，這是一個很多庫都在盡力提高的領(lǐng)域，你可能需要知道他們是否會繼續(xù)提高在物理設(shè)備上的性能。只需要看看 Preact 所做的超級棒的 真實世界設(shè)備的性能。
開源 React 漸進式 Web App 示例
如果你想要看更復雜的使用 React 開發(fā)，并使用 Lighthouse 優(yōu)化的 PWAs 例子，你可能會感興趣于： ReactHN—?一個使用服務(wù)端渲染并支持離線的 HackerNews 客戶端 或者 iFixit?—?一個使用 React 開發(fā)，但使用了 Redux 進行狀態(tài)管理的硬件修復指南 app。
現(xiàn)在讓我們梳理一遍在 Lighthouse 報告中需要清點的每一項，并在系列中繼續(xù) React.js 專用的小貼士。
網(wǎng)絡(luò)連接是安全的
HTTPS 的工具和建議
HTTPS 防止壞人篡改你的 app 和你的用戶使用的瀏覽器之間的通信，你可能讀過 Google 正在推動 羞辱 那些沒有加密的網(wǎng)站。強大的新型 web 平臺 APIs，像 Service Worker，require 通過 HTTPS 保護來源，但是好消息是像是 LetsEncrypt 這樣的服務(wù)商提供了免費的 SSL 證書，便宜的選擇像是 Cloudflare 可以使端到端流量 完全 加密，從來沒有如此簡單直接地能做到現(xiàn)在這樣。
作為我的個人項目，我通常會部署到 Google App Engine，它支持通過 appspot.com 域名的 SSL 通信服務(wù)，只需要你加上 ‘secure’ 參數(shù)到你的 app.yaml 文件。對于需要 Node.js 支持 Universal 渲染的 React apps，我使用 Node on App Engine。Github Pages 和 Zeit.co 現(xiàn)在也支持 HTTPS。
這個 Chrome DevTools Security 面板 允許你印證安全證書和混合內(nèi)容錯誤的問題。
一些更多的小貼士可以使你的網(wǎng)站更加安全：
- 根據(jù)需要重定向用戶，升級非安全請求（“HTTP” 連接）到 “HTTPS”?？梢砸豢?內(nèi)容安全策略 和 升級非安全請求。
- 更新所有引用 “http://” 的鏈接到 “https://”。如果你依賴第三方的腳本或者內(nèi)容，跟他們商量一下讓他們也支持一下 HTTPS 資源。
- 提供頁面的時候，使用 HTTP 嚴格傳輸安全 (HSTS) 頭。這是一個強制瀏覽器只通過 HTTPS 和你的網(wǎng)站交流的指令。
我建議去看看 Deploying HTTPS: The Green Lock and Beyond 和 Mythbusting HTTPS: Squashing security’s urban legends 來了解更多。
用戶會被提醒將 app 添加到 Homescreen
下一個要講的是自定義你的 app 的 “添加到主屏幕” 體驗（favicons，顯示的應(yīng)用名字，方向和更多）。這是通過添加一個 Web 應(yīng)用 manifest 來做的。我經(jīng)常會找定制的跨瀏覽器（以及系統(tǒng)）的圖標來完成這部分工作，但是像是 realfavicongenerator.net 這樣的工具能解決不少麻煩的事情。
有很多關(guān)于一個網(wǎng)站只需要在大部分場合能工作的 “最少” favicons 的討論。Lighthouse 提議 提供一個 192px 的圖標給主屏幕，一個 512px 的圖標給你的閃屏。我個人堅持從 realfavicongenerator 得到的輸出，除了它包含更多的 metatags, 我也更傾向于它能涵蓋我的所有基數(shù)。
一些網(wǎng)站可能更傾向于為每個平臺提供高度定制化的 favicon。我推薦去看看 設(shè)計一個漸進式 Web App 圖標 以獲得更多關(guān)于這個主題的指導。
通過 Web App manifest 安裝，你還能獲得 app 安裝器橫幅，讓你有方法可以原生地提示用戶來安裝你的 PWA，如果他們覺得會經(jīng)常使用它的話。還可以 延遲 提示，直到用戶和你的 app 進行了有意義的交互。Flipkart 找到 最佳時間來顯示這個提示是在他們的訂單確認頁。
Chrome DevTools Application 面板 支持通過 Application > Manifest 來查看你的 Web App manifest：
它會解析出列在你的 manifest 清單文件的 favicons（網(wǎng)站頭像），還能預覽像是 start URL 和 theme colors 這樣的屬性。順帶一提，如果感興趣的話，這里有一個完整的關(guān)于 Web App Manfests 的工具小貼士 片段 ??
安裝了的 web app 啟動時會帶自定義的閃屏畫面
在舊版本的 Android Chrome 上，點擊主屏幕上的 app 圖標通常會花費 200 毫秒（一些慢的網(wǎng)站甚至要數(shù)秒）以到達文檔的第一幀被渲染到屏幕上。
在這段時間內(nèi)，用戶會看到一個白屏，減少對你網(wǎng)站的感知到的性能。Chrome 47 和以上版本 支持自定義閃屏（基于來自 Web App manifest 的背景顏色，名字和圖標）會在瀏覽器準備繪制一些東西前給屏幕一些顏色。這使得你的 webapp 感受上更接近 “原生”。
Realfavicongenerator.net 現(xiàn)在還支持根據(jù)你的清單（manifest）預覽并自定義閃屏，很方便地節(jié)約時間。
注意：Firefox for Android 和 Opera for Android 也支持 Web 應(yīng)用程序清單，閃屏和添加到主屏幕的體驗。在 iOS 上，Safari 也支持自定義添加到 主屏幕的圖標 并曾經(jīng)支持一個 專有的閃屏 實現(xiàn)，然而這個在 iOS9 上顯得不能用了。我已經(jīng)填了一個特性請求給 Webkit，以支持 Web App manifest，所以...希望一切順利吧。
設(shè)計是移動友好的
為多種設(shè)備所優(yōu)化的 Apps 必須在他們的 document 里面包括一個 meta-viewport。這看上去非常明顯，但是我看到過很多的 React 項目中，人們忘了加上這個。好在 create-react-app 有默認加上有效的 meta-viewport，而且如果缺失的話 Lighthouse 會標記上：
盡管我們非常重視漸進式 Web 應(yīng)用程序在移動 web 的體驗，這 并不意味著桌面應(yīng)該被忘記。一個精心設(shè)計的 PWA 應(yīng)該可以在各種 viewport 尺寸、瀏覽器以及設(shè)備上良好運作，正如 Housing.com 所展示的：
在系列第 2 部分，我們將會看看那 使用 React 和 Webpack 的頁面加載性能。我們會深入 code-splitting（代碼分割），基于路由的 chunking（分塊）以及 達到更快交互性 PRPL 模式。
如果你不熟悉 React，我發(fā)現(xiàn) Wes Bos 寫的 給新手的 React 很棒。
感謝 Gray Norton, Sean Larkin, Sunil Pai, Max Stoiber, Simon Boudrias, Kyle Mathews 和 Owen Campbell-Moore 的校對
