什麼是漸進式 WEB 應用（PWA）？您的網站需要嗎？
還記得幾年前，所有人都要求網站所有者為智慧手機使用者實現響應式設計嗎？
響應式設計仍然很重要，但移動可用性的目標正朝著進步的網絡應用程式（PWAs）的方向發展。
什麼是 PWAs？
PWAs 佔據了帶有響應式手機顯示屏的桌面系統與使用者必須下載和安裝的完整移動應用程式之間的空間。 PWAs 載入速度快、準確無誤、使用最少的資料、離線工作、傳送推送通知以及在使用者的主螢幕上放置圖示，所有這些都無需對應用程式進行開發投資。
PWA 適合您的站點嗎？如果合適的話，您怎麼設計呢？過程如下。
谷歌有一個明確的 PWA 標準列表，但簡單來説，PWA 是一個類似應用程式的網站。 PWAs 的速度至少是響應式網站的兩倍，這意味著即使您有響應式的模板來使您的網站儘可能地方便移動使用者，進步的網絡應用程式仍然可以提供一些特定的優勢，這取決於您的網站的型別和您的目標。
PWAs 的優點是什麼？
進步的網絡應用程式可以讓零售商、資訊提供商、非政府組織及其使用者受益。
為什麼這麼多站點都在設計漸進式 WEB 應用
1. PWAs 可以促進銷售
許多使用 PWAs 的零售商報告稱，移動銷售額有所增長，因為 PWAs 有助於克服一些移動購物者在購買前遇到的問題，例如導航困難、載入時間慢以及結賬時資料錄入繁瑣等。
化妝品公司 Lancome 推出其進步的網絡應用程式後，美國市場的移動收入增長了 17 % 。總部位於中國的商户市場 AliExpress 的 PWA 上線後，轉換率上升了 104 % 。
顯然，只要過程簡單，顧客就會樂於用他們的手機購物，而且 PWAs 可以做到這一點。
2. PWAs 載入速度快，使用的資料少
大多數智慧手機使用者最多會在您的網站上等待 3 秒鐘的載入時間。然後他們就會離開。
PWA 縮短了載入時間，這對所有使用者都有好處，不管他們是想要以最快的速度進行多工處理的急躁的城市居民，還是想要充分利用有限連線的位於農村、窮鄉僻壤或發展中國家的居民。
PWA 的一個很好的非零售例子是 UN 的 ReliefWeb 。這個巨大的人道主義危機資訊入口網站有一個完整的網站（左下圖），上面還有地圖、幻燈片、 Twitter 摘要等等。對於位於西方主要城市，使用常見的互聯網連線型別的人來説，該站點的載入速度很快。但對於偏遠地區和災區的救援人員來説，它不如 2017 年 12 月釋出的 ReliefWeb 的 “精簡” 網站（見右下圖）有用。 PWA 將內容精簡為易於滾動的標題和一個小的導航選單。
3. PWAs 可以離線工作
訪問者可以將您的站點新增到智慧手機主螢幕上。即使使用者的裝置處於飛航模式，PWA 上的每一個頁面也能載入。
如果您希望網站訪問者能夠滾動您的存檔——或瀏覽您的商店——即使他們真的在飛機上，在隧道里，或由於任何原因無法訪問互聯網的情況，PWA 也可能是一種選擇。
綜上所述，如果您執行的站點不銷售任何產品或為低頻寬區域的使用者服務，並且您的移動站點的載入速度已經非常快，並且易於導航，那麼您可能不需要 PWA 。但是由於 PWAs 比應用程式更容易製作，所以無論如何您可能都想擁有一個 PWAs 。
如何為站點構建 PWA？
對於那些不懂代碼的網站所有者來説，有一個好訊息——有一個用於 PWAs 的 WordPress 插件外掛。
搜索了我自己的站點（在 Genesis 框架上使用 WordPress）的簡單 PWA 轉換選項後，我嘗試了免費版本的 WordPress Mobile Pack，它附帶了一個免費主題，只需幾分鐘就可以設置好。
在我啓用插件外掛並選擇 Obliq 主題的最新版本之後，我的桌面站點仍然顯示著我已經使用了幾年的 Enterprise 主題，而 Obliq 主題則顯示在我的手機瀏覽器上。在我的 WordPress 儀表板上的插件外掛快速啓動選單中，我將 PWA 設置為僅在我設置時顯示。我可以選擇上傳使用者主螢幕的圖示，我選擇了自己喜歡的配色方案。
在 WordPress Mobile Pack 的免費版本中，我唯一沒有銷售的東西是 Obliq 主題，我認為它對於影象密集型網站比像我這樣的文字密集型網站更有效。開發人員提供了一些付費主題，我認為這些主題可以更好地展示我的內容，一旦我準備好使用 PWA 之後，我可能會選擇其中一個主題。（相關閲讀：怎樣選擇一個比較好的 WordPress 主題）
如果您想在不使用 WordPress 插件外掛的情況下構建自己的 PWA，該怎麼辦呢？
這裏有一些資源可以幫助您。
Google Codelab 提供了一個 8 步教程，指導開發人員完成將 “過時” 桌面網站轉換為 PWA 的基本操作。
Google’s Baseline Progressive Web App Checklist 包括一些非程式設計師也能處理的元素，比如檢查 PWA 的移動友好性，驗證該站點是否通過 HTTPS 提供服務，以及安裝服務人員和網絡應用清單等更高階的任務。
一旦滿足了基線要求，Exemplary Progressive Web App Checklist 中就有 20 多個元素，包括模式標記、加速緩存優先網絡、需要使用者登入的站點的憑據管理以及大量 UI / UX 元素等。
完成後，您可以在 Chrome DevTools 中使用 Lighthouse 來稽核 PWA，以檢視哪些工作正常，哪些需要調整。
將 PWA 新增到您的站點可能很簡單也可能是個大專案，這取決於您是使用插件外掛還是編寫您的站點的代碼。無論哪種方式，花時間付出精力都可以帶來更多的銷售量，讓連線中斷或緩慢的使用者更容易訪問，以及更好的移動使用者體驗。
