小編在讀 PWA 相關技術文章的時候，剛好讀到了樂天 24 這篇導入 PWA 的個案分析，樂天 24 是樂天集團底下的一個電商平台，主要銷售日常快速消費品，也就是常見的 FMCG 產業，這類型的產品不外乎變化步調快速、品牌競爭挑戰性高。

沒想到導入之後樂天增加 450% 的用戶留存，效果竟然如此之好 Orz 所以就決定來翻譯一波，大家一起來看看樂天 24 是怎麼導入 PWA 的吧!

這篇文章翻譯自以下網站:

https://web.dev/rakuten-24/

PWA 的機會（Opportunity）

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

PWA 技術導入

為了抓住前面提到的兩個機會，所以樂天 24 就開始導入的 PWA 的相關技術，主要是兩個方面

• 可被安裝，當 Web App 能被安裝後，對電商網站來說可能比較顯著的好處是:
  • 增加網站流量
  • 增加用戶留存
  • 增加客單價
  • 增加轉換
• 離線快取

可以安裝的樂天 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 的 Service Worker，幾種常見的快取都已經提供相關範例，其實我們只需要照抄即可。

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

PWA 經營成果

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

• 相對使用瀏覽器，每個使用者平均增加 310% 的瀏覽頻率
• 相對之前行動版網站，增加了 450% 的用戶留存
• 150% 的客單價提升
• 200% 的轉換率提高

經營成果 (圖片來源: https://web.dev/rakuten-24/)

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

• 提升品牌意識: 用戶能夠透過主畫面的 Icon 去存取樂天 24 的服務
• 效率和成本降低: 樂天 24 不需要再去負擔維護雙平台 App 的成本