iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 12
2
Modern Web

30 天 Progressive Web App 學習筆記系列 第 12

Day 12 - 30 天 Progressive Web App 學習筆記 - PWA 案例介紹

  • 分享至 

  • xImage
  •  

PWA (Progressive Web App) 是 Google 在 2015 年所提出的概念,2016 年我們開始看到許多 PWA 應用像是 The Washington Post、Flipkart、Gmail、AliExpress、Wikipedia、Flipboard、Booking 等案例,我們來看看觀察 PWA 是如何被應用在實際專案裡? 而 PWA 的導入,幫助公司帶來哪些成效?


首先來介紹 Flipkart Lite
這家公司是位於印度的第一大電商,在之前分享的文章有簡單介紹過,是 PWA 相當成功的案例。

Introducing Flipkart Lite - The progressive mobile web app

Yes

Flipkart Lite 為什麼會如此成功? 據報導指出,印度 70% 的地區還在使用 2G 網絡,在某些國家或城鎮的網路費用昂貴、4G 才剛起步,免費 Wi-Fi 熱點又尋找不易,PWA 的離線特性能夠帶來給使用者極佳的瀏覽體驗。

由於 PWA 的 Service Workers 需要在 Android 的環境裡才能運作,而印度持有 Android 的用戶高達 97% ,大部分用戶均擁有足夠的條件、能夠享受 PWA 帶來的效益。

使用 PWA 實現哪些應用?

Flipkart Lite 創建一個 blog,介紹他們是如何使用 PWA 達到高性能,如何吸引使用者,提升的用戶好感度。

例如:

  • 離線存取
    • 不依賴網路連接,透過 service workers 可以在低頻寬甚至是離線的環境下瀏覽網站。
  • Add to Home Screen (ATHS)
    • 如同 App,會新增一個 icon,可以直接將網站加到手機桌面上做切換使用,但不需要透過 App Store 下載安裝。
  • Splash Screen
    • 在網站開啟時的過場動畫,會於手機的全屏幕裡閃一下,可以顯示企業標誌,圖像或公司名稱,增加瀏覽者的印象。
  • 推播通知
    • 吸引使用者注意、主動和使用者互動,提升用戶回流率。

同樣以 Flipkart Lite 為例,個別介紹如下:

離線存取

透過 Service Workers,攔截每個網絡請求、藉由 cache 打造離線模式。

下圖為 Flipkart Lite 的離線狀態,會去偵測離線時、就顯示灰色的模式

Add to Home Screen (ATHS)

Splash Screen

推播通知

圖片來源:Building Flipkart Lite: A Progressive Web App

PWA 為 Flipkart Lite 帶來什麼樣的優勢?

Flipkart Lite 和原本的 Natie APP 相比,發現一些驚人的數據:

圖片來源:bgr

依據報告顯示,Flipkart Lite 導入 PWA 之後:

  • 提高 3倍 的用戶停留時間
  • 增加 40% 的顧客回流率
  • 加入 Homescreen 獲得 70% 的轉換率
  • 降低 3倍 的資料傳輸

從數據觀察 Flipkart Lite 導入 PWA 之後所帶來的成效是相當顯著的。


pwa.rocks

pwa.rocks 的網站中集合了許多案例,包括 business、demo、event、game、news、reference、shopping、social、tool 等

A handful of nice examples showcasing what Progressive Web Apps can look like.

https://pwa.rocks/


其他案例還包括:

  • Housing.com
  • AliExpress
  • Pokedex.org
  • Voice Memos
  • Polymer starter kit

依序展示畫面如下:

Housing.com

https://housing.com
(行動版網站才有做 PWA)

印度的租賃與買賣房屋的網站

  • 38% more conversions
    • 轉換率達到 38% 以上
  • 40% lower bounce rate
    • 降低 40% 的跳出率
  • 10% longer average session
    • 提高 10% 的平均停留時間
  • 30% faster page load
    • 優化 30% 的頁面載入速度

離線模式


AliExpress

https://m.aliexpress.com/

(行動版網站才有做 PWA)

阿里巴巴旗下的交易平台(國際版淘寶)

  • 104% for new users across all browsers
    • 104% 的新用戶適用所有瀏覽器
  • 82% increase in iOS conversion rate
    • 提高 85% iOS 的轉換率
  • 2X more pages visited per session per user across all browsers
    • 在所有的瀏覽器裡,每位使用者瀏覽的頁數增加 2 倍
  • 74% increase in time spent per session across all browsers
    • 在所有的瀏覽器裡,增加 74% 的停留時間

圖片來源:Google


Pokedex.org

實作 PWA 的寶可夢網站 (Offline-capable Pokédex web site)

作者是 Nolan Lawson (Web Perf PM at @MicrosoftEdge)

https://www.pokedex.org/



Voice Memos

GOOGLE 釋出的 PWA 範例

A Progressive Web App for recording and playing back voice memos.

https://voice-memos.appspot.com/




Polymer starter kit

GOOGLE 釋出的 Polymer + PWA 範例,Polymer starter kit 是 Polymer 的種子專案

A starting point for Polymer 1.0 apps


參考文件


結語

本篇文章主要介紹 Flipkart Lite 實作 PWA 的功能,分享 pwa.rocks 網站與部分案例。


本人小小筆記,如有錯誤或需要改進的部分,歡迎給予回饋。
我將會用最快的速度修正,m(_ _)m。謝謝

上一篇
Day 11 - 30 天 Progressive Web App 學習筆記 - Chrome devTools - Introducing the Application tab
下一篇
Day 13 - 30 天 Progressive Web App 學習筆記 - 環境建置 ( json-server、http-server 、concurrently )
系列文
30 天 Progressive Web App 學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言