Progressive Web App 个案分析: 乐天 24 导入 PWA 後带来的好处 (10)

小编在读 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 的成本