想象一下，你有能力去構建一個完全離線的網站，為用戶提供幾乎瞬間加載的體驗，同時它對於不可靠的網絡又是安全及富有彈性的。這聽起來既不可能，又不可思議。無論你是否相信，絕大部分現代瀏覽器都已經內置提供瞭這些功能，隻需要釋放它們。當你利用這些強大的功能構建網站時，你便已經擁有瞭所謂的 PWA（Progressive Web App）。PWA有什麼優勢回溯到 1990 年的聖誕節，Tim Berners-Lee 爵士和他在 CERN 的團隊創建瞭使Web 正常工作所需的所有工具。他們創建瞭 HTTP、HTML 和 WorldWideWeb（全世界第一個網頁瀏覽器）。WorldWideWeb 隻能運行具有超鏈接的簡單純文本組成的網頁。事實上，這些第一代的網頁仍然在線，並且可以瀏覽。從幾十年前回到現在，我們所瀏覽的網頁並沒有變化。當然，現在我們有瞭像CSS 和JavaScript 這樣的功能，但網頁的核心依舊是使用 HTML、HTTP 以及其他一些模塊來構建，這些都是 Berners-Lee 和他的團隊在多年前所創建的。這些輝煌的構建模塊意味著 Web 已經能夠以驚人的速度增長。然而，我們用來訪問網頁的設備數量也在不斷增長。無論你的用戶是在旅途中還是坐在書桌前，他們都無時無刻不在獲取信息。我們對於 Web 的期望從未如此之高。雖然移動設備變得愈發強大，但移動網絡並不是總能滿足需求。如果你使用智能能手機，你就會知道移動連接有多麼脆弱。2G、3G 或 4G 本身都很不錯，但是它們時常會無法連接，或者網速變得很差。如果你的業務是與 Web 相關的，這就是你需要解決的問題。從歷史上來說，原生應用 ( 安裝到手機上的 ) 已經能夠提供更好的整體用戶體驗，下載完應用，它便可以立即加載。即使沒有網絡連接，也並非是完全不可用的，因為設備上已經存儲瞭供客戶使用的絕大部分資源。原生應用提供有彈性、吸引人的體驗的能力使得它的數量已經呈爆炸式增長。目前，在蘋果和谷歌的應用商店中，已經有超過 400 萬個原生應用。同樣從歷史上來說，Web 無法提供原生應用所具備的這些強大功能，比如離線能力、瞬時加載和更高的可靠性。這也正是 PWA 成為 Web 顛覆者的契機。主要的瀏覽器廠商一直在努力改進構建 Web 的方式， 並創建瞭一組新功能以使 Web 開發者能夠創建快速、可靠和吸引人的網站。PWA 應該具備以下特點 ：響應式獨立於網絡連接類似原生應用的交互體驗始終保持更新安全可發現可重連可安裝這是 Web 開發者構建網站傳統方式的一種轉變。這意味著我們可以開始構建能應對不斷變化的網絡狀況或無網絡連接的網站。這還意味著我們可以建立更吸引人的網站來為用戶提供一流的瀏覽體驗。讀到這裡，你可能會想，這太瘋狂瞭。那些不支持這些新功能的老瀏覽器怎麼辦？ PWA 最棒的一點就是它真的是漸進式的。如果你構建一個 PWA，即使在一個不支持的老舊瀏覽器上運行，它仍然可以作為一個普通的網站來運行。驅動 PWA的技術就是這樣設計的，隻有在支持這些新功能的瀏覽器中才會增強體驗。如果用戶的設備支持這些新功能，那麼他將獲得所有額外的好處和更多的改進功能。無論怎樣，這對你和你的用戶來說都是雙贏。PWA基礎那麼 PWA 到底是由什麼組成的呢？我們一直在討論它們的功能和原理，但真正使某個網站成為 PWA 的到底是什麼呢？最簡單的 PWA 其實隻是普通的網站。普通網站是由 Web 開發者所熟悉和喜歡的技術所創建的，即 HTML、CSS 和 JavaScript。然而， PWA 卻更進一步，它為用戶提供瞭增強的體驗。我非常喜歡谷歌 Chrome 團隊的開發人員 Alex Russell 的描述方式 ：這些應用不通過應用商店進行打包和部署，它們隻是汲取瞭所需要的原生應用功能的網站而已。PWA 會指向一個清單（manifest）文件，其中包含網站相關的信息，包括圖標、背景屏幕、顏色和默認方向。PWA 使用瞭叫作 Service Worker 的重要新功能，它可以令你深入網絡請求並構建更好的 Web 體驗。當你開始用它，還可以將進一步瞭解它以及它帶給瀏覽器的改進。PWA 還允許你將其“添加”到設備的主屏幕上。它會像原生應用那樣，通過單擊圖標便可讓你輕松訪問一個 Web 應用 。PWA 還可以離線工作。使用 Service Worker，可以選擇性地緩存部分網站資源以提供離線體驗。如果你現在在沒有網絡連接的情況下瀏覽網站，那麼對於絕大多數網站，你所看到的屏幕應該類似於下圖。如果你迫切需要獲取這些信息，離線頁面可能會非常令人沮喪用戶無須再面對恐怖的“無網絡連接”屏幕瞭。使用 Service Worker，可以攔截並緩存任何來自網站的網絡請求。無論是為移動設備、桌面設備還是平板設備構建網站， 都可以在有網絡連接或沒有網絡連接的情況下控制如何響應請求。PWA 不僅僅是一組非常棒的新功能，它實際上是構建更好的網站的一種方式。PWA 正在迅速成為一套最佳實踐。構建PWA 所采取的步驟將有利於訪問你網站的任何人，無論他們選擇使用何種設備。一旦你掌握瞭開始構建 PWA 所需的基本構建模塊，很快就會發現，比較高級的例子並沒有看上去那麼高級。一旦你熟悉瞭構建 PWA 的過程，會發現一切都是如此的簡單。構建PWA的業務場景作為一名開發者，我當然知道當一項新技術或一系列功能出現時，是多麼令人興奮。但為網站發掘並引進最新最好的庫或框架的強烈欲望往往會掩蓋其為企業帶來的價值。無論你是否相信，PWA 能為你的用戶帶來真正的價值，並使網站更具吸引力、更有彈性，甚至更快。PWA 最棒的一點是可以漸進增強現有的 Web 應用。我們討論的整套技術可以應用於任何現有的網站，甚至是你正在構建的新 Web 應用。無論你選擇何種技術棧來開發網站，PWA 都將與你的解決方案緊密結合，因為它隻是簡單地基於 HTML、CSS 和 JavaScript 。既然你對 PWA 已經有瞭基本的瞭解，就先暫時停下腳步，想象一下用 PWA 來構建的各種可能性。假設你的在線業務是報紙，人們通過它來瞭解更多當地的新聞。如果你知道有人經常訪問你的網站並瀏覽多個頁面，為什麼不提前緩存這些頁面，這樣他們就可以完全離線地瀏覽新聞？或者假設你的 Web 應用服務於一個慈善機構，志願者在這個網絡連接不穩定或壓根無網絡連接的區域進行工作。PWA 的功能將允許你構建一個離線應用，使他們在沒有網絡連接的現場也能收集信息。一旦他們回到辦公室或有網絡連接的區域，數據就可以同步到服務器。對於 Web 開發者來說，PWA 是顛覆者，並且我個人對它將帶給 Web 的功能感到興奮不已。前文提到過可以將 PWA 添加到設備的主屏幕上。一旦添加後，它的圖標便會出現在主屏幕上並可以通過單擊圖標來訪問你的網站。2015 年，印度最大的電商網站 Flipkart 開始構建 Flipkart Lite，它是 Web 和Flipkart 原生應用完美結合的 PWA 。如果你在瀏覽器中打開 flipkart.com，你會明白為什麼這個網站是如此成功。它的用戶體驗令人印象深刻，網站的速度很快，可以離線工作，並且用起來使人愉悅。通過將它的網站構建成 PWA，Flipkart 能夠顯示ADD TO HOME SCREEN 操作欄。通過 ADD TO HOME SCREEN 圖標到達的用戶最終在網站上購買的可能性高達 70％。 ADD TO HOME SCREEN 功能是重新與用戶接觸的好方法任何進入蘋果或谷歌應用商店的新原生應用就像沙灘上的一粒沙。截至 2016年 6 月，每個應用商店中始終保持將近 200 萬個應用。如果你開發瞭一個原生應用，那麼它很容易就被應用商店中的海量應用所掩蓋。然而，由於 PWA 是汲取瞭豐富功能的網站，因此可以通過搜索引擎輕松發現它們。人們可以通過社交媒體鏈接或瀏覽網頁發現 PWA。構建 PWA 可以讓你接觸比單獨使用原生應用更多的人，因為它們是為任何能夠運行瀏覽器的平臺而構建的。我在一傢小型創業公司工作，我知道編寫一個可以在多個平臺 (iOS、Android和網站 ) 上運行的應用是多麼昂貴。有瞭 PWA，你隻需要一個瞭解 Web 語言的開發團隊即可。它使得招聘更容易，而且肯定便宜得多。這並不是說你不應該構建原生應用，因為不同的用戶會有不同的需求，但隻要你想，你就可以專註於為網絡上的用戶營造一個相當好的體驗並使他們留下來。當使用為 Web 構建的應用時，用戶可以輕松訪問你網站服務的一部分，而無須先下載龐大的安裝文件。使用正確的緩存技術的 PWA 可以保存用戶數據並立即為用戶提供功能。隨著世界各地越來越多的用戶開始上網，不斷為 10 億規模的新用戶構建網站變得格外重要。PWA 通過構建快速、精簡的 Web 應用來幫助你實現此目標。如果你看過一些關於軟件開發的文章，一定見過圍繞原生應用與 Web 應用的爭論。哪個更好？各自的優勢與劣勢是什麼？原生應用本身是非常好的，但事實上 PWA 不僅僅是將原生應用的功能引入 Web 。它解決瞭企業面臨的真正問題，旨在為用戶創造一個名副其實的可發現、快速和有吸引力的體驗。本文摘自當世唯一相關著作《PWA實戰：面向下一代的Progressive Web APP》。本書降生之前，就得到Facebook、阿裡旗下UC團隊、新浪旗下微博團隊及百度團隊的積極響應，或參與技術審校，或勤力作序推薦，可見PWA在國內已成氣候、方興未艾。前端世界緊鑼密鼓，離開一會兒就會錯過新角登場。在擴展鏈接中你可以瞭解到本書更詳細的信息。