[譯] 一文教你什麼是漸進增強，為什麼它很重要？
- 原文地址：What is Progressive Enhancement, and why it matters
- 原文作者：Praveen Dubey
- 譯文出自：掘金翻譯計劃
- 本文永久連結：github.com/xitu/gold-m…
- 譯者：RicardoCao-Biker
- 校對者：weibinzhu, HumesFork
漸進增強（下文簡稱 PE）是一個在開發網頁應用中十分有效的方法。
這裡是正式定義：
漸進增強 使用Web技術以分層的方式，允許所有人訪問網頁的基本內容和功能，使用任何瀏覽器或網際網路連線，同時還給更先進的瀏覽器軟體或更大的頻寬提供了這些頁面的一個增強版本。— 維基百科
這個策略的優點是它允許所有人使用任何瀏覽器和網路連線能夠訪問到網頁的基礎內容和功能，也同時為使用高版本瀏覽器或者高頻寬的使用者提供一個增強版本的網頁。
簡而言之...
...它為我們提供了基本的使用者體驗，即使在相容性不同的瀏覽器中也保證了網頁的 穩定執行。
let PE = "Progressive Enhancement";
複製程式碼漸進增強策略由以下幾個 核心原則組成：
- 基本的 網頁內容 應該能被 所有的瀏覽器訪問
- 基本的 網頁功能 應該能在 所有的瀏覽器中執行
- 有限的語義標記包含所有內容
- 增強的網頁佈局由外部引用的 css 提供
- 增強的網頁行為由外部引用的 JavaScript 提供
- 尊重使用者使用的瀏覽器首選項
所以當你使用下一代只在 合適的環境 下正常工作的 JavaScript/CSS 框架構建你的最新網站時，如果這些程式碼離開了特定環境就無法執行，便不符合漸進增強的策略。
相反，在引入更復雜的程式碼前，我們的開發目標應該是從提供基本功能、穩定的裝置相容性、和無卡頓的體驗開始。
漸進增強案例
讓我們一起來看看一些漸進增強策略的案例是如何執行的。
網頁字型
網頁字型固然漂亮，但是當用戶網路環境較差時，載入它們會降低使用者體驗。在這種情況下，可以使用系統字型渲染網頁內容，當環境改變需要載入網頁字型時，也可以順利切換過去。
有內容總比等待載入網頁字型或什麼也不顯示要好得多。
初始 HTML
網頁負責載入指令碼，例如 Angular、React 或其他框架。當這些指令碼負責網頁初始內容渲染時，在低速網路下或者指令碼發生錯誤你的使用者會在瀏覽器或裝置中看到空白頁面。
想一想，初始載入使用 HTML 渲染總是會比完全依賴指令碼來渲染頁面有更好的使用者體驗，而不是等待指令碼載入完成。
功能檢查
好的網站總是會做這個部分，當使用一個可能不會被其他裝置、瀏覽器支援的功能時，總是在 JavaScript 中使用它前確保該功能是在指定瀏覽器中可用的。
Modernizr 是一個受歡迎的功能檢測庫，也許能幫到你。
只在不支援你需要的功能的瀏覽器或裝置中引入額外指令碼，避免在支援這些功能的瀏覽器中引入額外指令碼。
現在，為何選擇漸進增強？
在構建下一個應用程式之前關注漸進增強策略的重要原因：
堅實的基礎
漸進增強的重點在於，當你處於專案初期，在引入任何複雜的功能前你只使用最基本的 web 技術。這樣在任何的情況下你都有支援保證更復雜功能執行的基礎。
一旦團隊對網站的核心體驗已經很有自信，並且在不依賴網速、瀏覽器、裝置時也能執行，這時你就可以開始引入更加複雜的功能和佈局。
穩定性
測試團隊：“ 搜尋圖示在Safari的offres頁面失效 ”
開發團隊：“ 在我的電腦上可以啊，清快取再試一下，不行就沒辦法了”
測試團隊（來自天堂）：“ 還是不行，你是在 Chrome 上看的吧，Safari 上是不行的”
開發團隊：“ 我們什麼時候開始相容 Safari了？等等... 修復中...”
if(getBrowsers() == 'safari') {
Patch.magicHelpers.searchIconMagic()
}
Patch.magicHelpers = {
searchIconMagic: function() {
// Can't share magic, doing something
}
};
複製程式碼“一個小時後…… 再檢查一下看看”
測試團隊: “ 在 Chrome 和 Safari 中可以了，但是 Mozilla FireFox 中又不行了... 啊啊啊！”
承認吧，我們都至少經歷過這種情況不止一次吧。
專案的穩定性和維護成本也取決於專案是如何開始的。使用框架來配置專案並在後面不停修復可能不是長久之計。
漸進增強策略可以幫你構建一個更有健壯基礎的專案，你的 HTML、CSS 和 JS 都是可以支援回退的。他們可以保證你不會嚴重的依賴瀏覽器的特定功能。
SEO 和可訪問性
每個人都希望自己的應用被列在搜尋引擎列表的第一頁，但這需要我們提供不懈的努力和計劃來構建如此優秀的應用。而你專案中的健壯基礎保證了你的應用專注於內容優先。
使用漸進增強策略的網頁可以保證 基礎內容 能夠 總是 被搜尋引擎的爬蟲爬取到並新增到索引。避免任何可能阻礙爬蟲抓取網頁內容的動態載入。
無論使用者的瀏覽器設定是什麼，漸進式 WEB（PWA）應用總是可以滿足他們。因為應用是使用漸進增強原則構建的。
總結思考
漸進增強策略專注於為你的專案提供健壯的基礎，這個基礎可以為你在產品長期的計劃中提供巨大幫助。
在你的新專案中使用新的 JavaScript/CSS 框架可能是很容易的，但是那可能會讓你去優雅降級。你會不斷的修復你的程式碼以支援那些不支援框架的瀏覽器和裝置。
儘管漸進增強策略也許在專案開始階段會佔用你更多的一點時間，但是它可以保證在最壞的情況下也可以提供最基本的功能。在嚴重依賴 JavaScript 實現使用者介面展示的情況下可能不適用漸進增強策略，但是對於一個長期的專案，漸進增強是值得考慮的。
希望這篇文章能為你提供一些對漸進增強的概略的瞭解。
更多的關於漸進增強的文章：
如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。
掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。