用PWA構建一個完全離線的網站
想象一下，你有能力去構建一個完全離線的網站，為使用者提供幾乎瞬間載入的體驗，同時它對於不可靠的網路又是安全及富有彈性的。這聽起來既不可能，又不可思議。無論你是否相信，絕大部分現代瀏覽器都已經內建提供了這些功能，只需要釋放它們。當你利用這些強大的功能構建網站時，你便已經擁有了所謂的 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在國內已成氣候、方興未艾。前端世界緊鑼密鼓，離開一會兒就會錯過新角登場。在擴充套件連結中你可以瞭解到本書更詳細的資訊。