PWA 案例樂天 24 留存率提升 完整指南：解析電子商務 PWA 如何透過離線快取與 A2HS 達成驚人成長

樂天 24 PWA 案例成功的核心是什麼？

樂天 24 (Rakuten 24) 的 PWA 案例研究展示了 Progressive Web App 在電子商務領域的巨大潛力。其成功核心在於結合了 A2HS (新增至主畫面) 降低使用者回訪門檻，以及利用 Workbox 實作精確的離線快取策略（如 cache-first 與 stale-while-revalidate），確保在弱網環境下依然能流暢下單。導入後，樂天 24 達成了 450% 的用戶留存率提升 與 200% 的轉換率成長。這證明了透過 PWA 提供輕量且具備原生感的 Web 體驗，能有效降低維護雙平台 App 的成本，同時顯著優化商業關鍵指標。

小編在讀 PWA 相關技術文章的時候，剛好讀到了樂天 24 這篇導入 Progressive Web App (PWA) 的個案分析。

樂天 24 是樂天集團底下的重要電商平台，主要銷售日常快速消費品（FMCG）。這類型的產品不外乎變化步調快速、品牌競爭挑戰性高。沒想到導入 PWA 後，樂天竟然增加了 450% 的用戶留存率，效果好到讓小編驚呆了 Orz。

這份 PWA 案例研究 翻譯自 web.dev 官方文件，我們一起來拆解他們的成功心法吧！

PWA 的機會（Opportunity）

• 因為是新服務，所以不一定需要去投資和維護多平台 App，PWA 就成為了可能的解決方案。
• 樂天算是很大的電商平台，所以樂天 24 被認為應該能有更高的用戶留存。

樂天 24 的 PWA 技術導入策略

為了抓住前面提到的兩個機會，樂天 24 團隊從兩個核心面向切入 電子商務 PWA 的實踐：

• A2HS (新增至主畫面)：當 Web App 能被安裝後，對電商網站來說有顯著好處：
  • 增加網站流量
  • 增加用戶留存
  • 增加客單價
  • 增加轉換率
• PWA 離線快取：確保弱網環境下的穩定性。

可以安裝的樂天 24

作為一個品牌電商網站，會想要更彈性的去控制推薦安裝提示，所以樂天 24 的團隊選擇自行實作 beforeinstallprompt 的相關事件，正因如此也有辦法知道用戶目前是使用 Android 或 iOS 的平台，可以更進一步的提供相關且更好的體驗給用戶。

有興趣的大大可以連到以下站台看看精美的說明:
https://24.rakuten.co.jp/addto/

客製的安裝提示和相關說明 (圖片來源: https://web.dev/rakuten-24/)

PWA 離線快取策略

樂天 24 的團隊主要是使用 Workbox 來操作 service workers，目的是確保用戶在網路不好甚至是斷線狀況也能夠有基本的操作體驗。

• 靜態資源 (JS/CSS)：採取 cache-first 的策略，優先從快取讀取以加速載入。
• 圖片資源：使用 stale-while-revalidate，表示用戶可以先看到舊圖，系統同時在背景檢查並更新最新版本。

Workbox 提供的 API 遠遠好過自己維護相關腳本，此外透過 workbox-webpack-plugin 這套外掛也能夠確保跨瀏覽器的基本支援。

Workbox 是由 Google 開發維護，是一套用來強化 Service Worker 的工具包，方便我們更快實作出 production-ready 的實作。

幾種常見的快取都已經提供相關範例，其實我們只需要照抄即可:

• Cache Google Fonts
• Cache JavaScript and CSS
• Cache Images
• Precache your Files
• Offline Google Analytics

PWA 經營成果：用戶留存與轉換率的顯著成長

在導入 PWA 後觀察一個月，比較基準為「有安裝 PWA」以及「沒安裝 PWA」的用戶：

• 瀏覽頻率：平均增加 310%。
• 用戶留存：增加了 450%。
• 客單價 (AOV)：提升了 150%。
• 轉換率 (CVR)：提高了 200%。

樂天 24 導入 PWA 後的經營成果數據圖 (圖片來源: https://web.dev/rakuten-24/)

對於品牌經營來說，透過可被安裝的 PWA 能夠：

• 提升品牌意識：用戶能透過主畫面 Icon 直接存取服務。
• 效率與成本降低：樂天 24 不需要負擔維護 iOS/Android 雙平台原生 App 的開發與上架成本。

FAQ：PWA 電商案例常見問題

Q1：為什麼樂天 24 選擇 PWA 而非開發原生 App？

A：主要考量是「開發成本」與「觸及率」。原生 App 需要開發兩套程式碼（iOS/Android）並通過審核上架；而 PWA 則能直接透過網頁技術開發，跨平台執行，且使用者無需到 App Store 下載即可安裝，極大縮短了使用者的轉換路徑。

Q2：stale-while-revalidate 快取策略對電商網站有什麼好處？

A：這種策略能達到「瞬時載入」的效果。對於商品圖片，使用者能立即看到上一次瀏覽過的版本（快取），而不會看到空白。系統則在背景安靜更新，確保下次瀏覽時是最新內容，這在網路不穩定的行動端環境下能顯著降低使用者的挫折感。

Q3：導入 PWA 真的能完全取代原生 App 嗎？

A：對於像樂天 24 這樣以內容、購物為主的應用，PWA 已經能提供 90% 以上原生 App 的功能。除非您的應用需要極高頻率的背景感應器調用、或極其複雜的 3D 運算，否則 PWA 是電商轉型輕量化應用的最佳選擇。

• ← 上一篇
• 下一篇 →