探索漸進式 Web 應用程序 (PWA) 的來龍去脈
已發表: 2020-06-17不要被愚弄——漸進式 Web 應用程序並不是一些瘋狂的新技術,在快速閱讀完文章後,您將無法與您的朋友進行有教育意義的對話。
它們本質上是現代化的 Web 應用程序,具有一個花哨的名稱(感謝 Google Chrome)。
但是,請注意為什麼許多組織認為 PWA 更適合他們的需求。 與原生應用程序相比,構建、營銷和維護 PWA 不僅更便宜,而且它也可以是客戶喜歡的。
您是否詢問過您的客戶是否希望被重定向到應用商店只是為了預訂下一次酒店預訂或預訂租車? 也許那是另一天的對話......
什麼是漸進式網絡應用程序?
在我們開始了解構建漸進式 Web 應用程序與原生應用程序或傳統 Web 應用程序的用例之前,讓我們確保我們涵蓋了基礎知識。
首先,您需要了解漸進式 Web 應用程序,因為它們是未來的發展方向。 根據 JAX Enter 對 800 多名技術人員進行的讀者調查,46% 的受訪者表示他們認為 PWA 是未來,而不是原生或混合應用程序。
定義的漸進式 Web 應用程序
漸進式 Web 應用程序 (PWA) 是一種現代化的 Web 應用程序。 它的外觀和感覺很像傳統的 Web 應用程序,但可以像本地應用程序一樣從應用程序商店下載。 簡化的 PWA 部署過程和漸進式響應水平使應用程序類型從傳統(非漸進式)Web 應用程序和本機應用程序中脫穎而出。
漸進式 Web 應用程序、非漸進式 Web 應用程序和本機應用程序之間的區別
即使是高級開發人員也傾向於將漸進式與非漸進式或非漸進式與原生應用程序混淆。 儘管如此,這些應用程序類型之間仍存在明顯差異。

資源
本機應用程序是以特定語言為特定設備(智能手機、平板電腦等)構建的應用程序,必須從應用程序商店下載。 在上面的示例中,Dish 的 MyPay 應用程序是一個原生應用程序,因為它可以從 Apple App Store 下載並且是為 iOS 設備構建的。 儘管您也可以在 Google Play 上下載 Dish 的 MyPay 應用程序,但 Dish 實際上必須開發第二個本機應用程序才能實現。
由於必須為其客戶設計和開發兩個不同的移動應用程序,您可以開始看到原生應用程序開發的一個主要缺點。
更注重預算的應用程序類型? 非漸進式 Web 應用程序。 Web 應用程序的最早形式,即非漸進式 Web 應用程序,是一種不需要從應用商店下載的應用程序; 相反,它只能通過網絡訪問。
它看起來和感覺就像一個應用程序,但它實際上只是一個具有增強功能的網站。 請注意上圖中的非漸進式 Web 應用程序示例,Evolve Vacation Rentals,安全、響應迅速且時尚——但它不被視為 PWA。
事實上,為了將基於 Web 的應用程序視為漸進式 Web 應用程序,Google 表示該應用程序必須滿足以下條件:
- 漸進式。 它必須適用於所有瀏覽器類型,而不僅僅是 IE 或 Chrome。
- 反應靈敏。 該應用程序必須適合所有現代手機、平板電腦和未來的科技產品。
- 獨立。 它必須具有離線工作或在低強度網絡連接上工作的能力。
- 應用式. 應用程序使用應用程序樣式的導航和样式。
- 新鮮的。 始終保持最新。
- 安全的。 通過傳輸層安全性提供給用戶,或更通常稱為 HTTPS url。
- 可發現的。 可使用搜索引擎查找。
- 可重新接合。 能夠通過平台重新吸引應用程序用戶(即推送通知)。
- 可安裝。 用戶可以通過應用商店將應用安裝到他們的主屏幕,以便輕鬆方便地訪問。
- 可鏈接。 應用程序可能會使用 URL 與他人共享。
漸進式 Web 應用程序的功能
Google 對使 Web 應用程序成為漸進式Web 應用程序的原因進行了分類,但您可能想知道一個人如何在不保留清單的情況下確定 Web 應用程序是否是漸進式的? 為了能夠做到這一點,讓我們回顧一下 PWA 的關鍵特性。
安全上下文 (HTTPS)
如果一個應用程序不符合最新最好的數據安全標準,就很難稱其為進步的。 安全上下文是一種安全標準,可為網站用戶提供一定程度的信心,表明他們正在使用的 Web 應用程序正在以安全的方式交付內容。
作為 2020 年任何網站的最佳實踐,PWA 的一個關鍵特性是它們是 TSL/SSL 加密的,以確保安全的上下文。 要快速確定 Web 應用程序是否安全,只需在頁面 url 中查找 HTTPS。
如果您使用的 Web 應用程序沒有 HTTPS 連接,則不能將其視為 PWA。

資源
服務人員
用技術術語來說,服務人員不是給你外賣食物的人——但讓我們堅持這個類比!
假設你在一家餐館,停電了。 如果你像以前一樣餓,你會被困在吃沙拉或冷湯的時候。 但是服務工作者所做的是它使用緩存來確保您的體驗永遠不會受到影響。 或者更確切地說,服務人員會確保您仍然可以吃到熱騰騰的飯菜。
從 PWA 用戶體驗的角度來看,這意味著如果您正在瀏覽應用程序並且您失去了互聯網連接,您將不會注意到。 或者,如果你之前已經去過那個 PWA,你的體驗會加載得非常快——就像你提前點了晚餐一樣。

這怎麼可能? 只需一點 JavaScript 文件,就可以了。 更高級的服務工作者甚至可以與推送 API 連接,允許 PWA 向用戶發送推送通知以保持他們的參與度。
清單文件
為了創建更加定制化的用戶體驗,PWA 通常會利用清單文件。 簡而言之,清單文件是包含作為單個單元一部分的一組文件的元數據的文件。
本質上,元文件通常用於告訴 Web 瀏覽器 PWA 應用程序在特定設備上打開時的行為方式。 通過為 PWA 創建清單文件,開發人員可以設置默認的應用程序圖標或初始屏幕顏色。 開發人員還可以確保應用程序在全屏瀏覽器窗口中打開,以在特定設備上創建更“類似應用程序”的體驗。

資源
PWA 的優勢
當然,所有類型的應用程序都有優勢。 Spire Digital 敏捷產品開發總監 Bart Deferme 說:
“不同類型的應用程序在不同組織的不同用例中具有優勢。原生應用程序非常適合那些知道其用戶更喜歡原生應用程序而不是 PWA 或非漸進式 Web 應用程序的組織。但對於試圖獲得概念證明的企業家來說通過推出精益 MVP,非漸進式 Web 應用程序或 PWA 是更經濟實惠的路線。”
請記住,始終存在不同類型的應用程序是最佳解決方案的用例,以下是漸進式 Web 應用程序優於另一種類型的應用程序的一般優勢:
可發現的
谷歌每天獲得 35 億次搜索,使其成為世界上最大的搜索引擎。 可以肯定地說,當人們遇到問題或疑問時,他們會詢問 Google。 這為部署 PWA 的組織提供了一個很好的機會,因為除了應用商店之外,它們還可以存在於網絡上。 與其他應用程序相比,這使人們更容易找到 PWA。
PWA 的可發現性是一個很大的優勢,因為它允許用戶在一個地方搜索他們搜索最多的地方、獲得答案和完成操作。 使用 PWA,他們不必跳過下載整個應用程序的麻煩,然後看著應用商店下載輪慢慢滾動到“100%,下載完成”。
可安裝
如果用戶真的喜歡使用 PWA 或者他們只是經常使用它,那麼他們不必像使用非漸進式 Web 應用程序那樣在他們的計算機和手機瀏覽器上添加書籤。 對應用商店和用戶進行一次簡單的訪問,就可以讓用戶在與典型的原生應用程序相同的時間內訪問他們最喜歡的 PWA。
可鏈接
與朋友分享指向您最喜歡的應用程序的鏈接比告訴您的朋友“去應用商店搜索那個應用程序”要容易得多。 鏈接可以通過電子郵件、社交媒體 dms 等輕鬆共享。可鏈接性和可發現性是同步工作的兩個 PWA 優勢,減少了首次用戶訪問應用程序所需的時間,也減少了數量超級用戶與朋友或潛在用戶共享應用程序所需的時間。
網絡獨立
網絡網絡。 我們將永遠無法在世界各地獲得完整的酒吧。 但是話又說回來,我們不需要完整的條來操作 PWA,對嗎?
漸進式網絡應用程序使用戶能夠在穿過隧道的途中繼續收聽他們最喜歡的音樂,並允許電信工作人員在全市停電期間收到電力線故障通知。 PWA 無需始終保持強大的網絡連接,可為所有用戶組提供更可靠的用戶體驗。
響應式
曾經想在嘗試對 Zoom 通話感興趣的同時與朋友玩 Words 嗎? 如果 Words with Friends 是 PWA 而不是本機應用程序,您可以(順便說一句,這是一個好主意,請有人做到這一點)。 無論設備或瀏覽器類型如何,PWA 都可以提供無縫的用戶體驗。 這意味著您不必總是隨身攜帶手機或筆記本電腦來使用您最喜歡的本機或非漸進式應用程序。
響應性的另一個優點是它還可以使組織不必為多個用戶組生成多個應用程序。 您的筆記本電腦用戶和手機用戶都可以對單個應用程序(PWA)的部署感到滿意。 這種優勢往往是 PWA 的最大賣點之一,因為它可以為組織節省 IT 和營銷支出。
安全的
尤其是在使用金融、健康或保險應用程序時,用戶想知道他們的個人數據沒有被開曼群島的某些人訪問。 更簡單地說:安全性與用戶建立信任。 安全上下文和 url 加密使 PWA 能夠為您的用戶和 Google 搜索機器人提供保證。
如前所述,最佳做法是對組織的所有 url 使用 SSL 加密 - 包括 Web 應用程序。 如果您不保護您的 Web 應用程序,Google 一直表示您的 Web 應用程序在搜索結果頁面中的性能將受到負面影響。

資源
結論
想一想:世界正在走向銀翼殺手的現實,人類很快就會一天 24 小時連接到軟件(如果你還沒有的話)。 領先於技術曲線並獲得最大的投資回報率意味著投資於具有最長期價值的軟件。
本機應用程序是為特定設備使用特定語言構建的,這使得應用程序體驗無響應並且代碼庫的可重用性降低。 來自非漸進式 Web 應用程序的代碼可以重用於創建其他應用程序,但非漸進式 Web 應用程序僅針對特定瀏覽器構建。 它們也不能從應用商店下載。
PWA 是最面向未來的應用程序類型,因為它們是:
- 可通過網絡或應用商店發現
- 響應迅速,適用於任何瀏覽器
- 網絡連接獨立
- 安全和加密
- 和更多
現在您對 PWA 有了更好的了解,您可以更好地檢查您的應用程序用例並確定哪種類型的應用程序適合您的組織的需求。 如果您還沒有,請與您的客戶交談以了解他們的需求,然後選擇一個應用程序來構建,該應用程序將為您的組織提供最長期的價值。
PWA 是否適合您的組織? 誰知道。 但是,更好地了解您的所有應用程序選項絕不是一個壞主意。
在 G2 的應用開發信息中心更全面地了解其他應用開發見解。