什麼時候該使用 PWA 開發網頁或是 App?

1

本文介紹 PWA 用於網頁開發的優點，讓開發者可以決定什麼時候該選用 PWA

雖然漸進式網路應用 程式（PWA）自2007年以來就一直存在，但在過去的幾年裡，它們才真正發展到了突出地位。隨著Google對 Web 工作者的推動和蘋果在2017年宣布接受 PWA，現在截至 2021 為止 PWA現在在所有主要瀏覽器上都得到了支持。但究竟什麼是PWA，為什麼它們如此受歡迎？

PWA是網路應用程式，使用現代網路功能，提供一個優化的網站，具有類似應用程式的行為，但獨立於操作系統。

今天，消費者花在手機上的時間比花在筆記本電腦/台式機上的時間多出近150%。

  • 平均而言，用戶在手機上安裝了約80個應用 程式，但只經常使用其中的30個，他們85%的時間花在前5個應用 程式上。
  • 研究表明，原生應用 程式的輟學率很高，72%的用戶在第30天之前就已經流失
  • 在新興經濟體中，卸載率更高，因為用戶以高數據使用量和記憶體限製為由進行卸載。

在這種情況下，PWA通過承諾提供一個類似於應用程式的環境來獲得用戶，同時減少一些使用經驗上的問題。

PWA 的優點

  • 不需要冗長的安裝或註冊，記憶體佔用明顯減少。
  • **操作系統獨立，**無需冗長的開發或批准，易於維護。
  • PWA可以動態載入相關資訊，同時仍然保持響應性。
  • 更好的SEO排名，因為Google優化了網站，承諾提供更好的瀏覽體驗。
  • 卓越的離線功能，特別是在不穩定的網路中。
  • 更好的轉換率，因為PWA提供了應用 程式的速度和功能。一個例子，阿里巴巴的PWA實施幫助他們提高了104%的轉換率。

但儘管如此，為PWA設計用戶體驗與為本地應用程式設計用戶體驗是不一樣的。

  1. 突出 "添加到主螢幕 "的選項，使用戶可以在點擊時啟動和使用它。使用Google’s Lighthouse來測試該功能。

  2. 保持導航的簡單和快速–使用底部導航，讓用戶自由地快速和無縫地前往他們想要的地方。

  3. 骨架螢幕- 使用骨架螢幕來減少載入時間和空白螢幕，並引導用戶，向他們展示下一步的預期，提高用戶體驗。

  4. 保持簡單-使用簡單的、最小的布局，避免花哨的字體或不可預測的手勢，保持低的載入時間。

使用圖像或SVG作為標題和標誌，而不是自定義字體。如果你使用自定義字體，請在隨後的載入中使用它們。

  1. 注意後退按鈕！-不是所有的手機都有一個物理的後退按鈕，所以在用戶流程中包括這個按鈕。

    1. 提供介面操作介紹，讓用戶清楚地知道PWA的作用，以及如何最好地利用它。包括一個跳過的選項，這樣就不會讓用戶感到厭煩（不是好的用戶體驗！）。

  3. 緩存、緩存、緩存–像本地應用 程式一樣，PWA必須在沒有互聯網連接的情況下運行。這意味著網站的所有或部分頁面需要離線載入。使用緩存、PRPL和 伺服器端渲染，以確保PWA在不穩定或沒有互聯網的情況下也能發揮最佳性能。

  4. 保持使用者介面的簡單和明顯- Google建議所有螢幕之間的導航都是明顯的，這樣用戶總是知道他們在哪裡以及如何離開。

  5. .包括** 觸摸回饋- 對於PWA，可能的設備是觸摸屏。要注意可觸摸的區域，包括視覺和觸覺回饋，就像應用一樣。

  6. 提供分享選項- 儘管PWA的每個頁面都有一個URL，但用戶不容易找到它。研究和測試用戶希望在社群媒體上分享什麼，併為之提供按鈕。

  7. 告知用戶刪除問題-由於其應用 程式的感覺，用戶可能沒有意識到刪除如何影響使用，特別是如果他們沒有帳戶。告知用戶以確保沒有不愉快的意外。

希望這篇關於PWA的經驗的文章能對你有所幫助。