PWA 應用與價值

2017/12/19
@ PIXNET 公司內部分享
對象：社群商務發展部的同仁

主要介紹 PWA 特性並分享國外案例

Transcript

1. PWA 應⽤用與價值 PIXNET F2E Anna Su 2017年年12⽉月19⽇日
2. ‣ PWA 基本介紹 ‣ PWA 案例例分享 Outline
3. PWA 基本介紹
4. PWA 4 Why
5. 使⽤用者花費 87% 的時間在原⽣生 APP
6. 80% of time spent is in users’ Top 3 apps
7. Mobile web 較容易易被分享
8. Source: ChromeDevSummit 2017
9. of all visits are abandoned if a mobile page takes longer than 3 seconds to load Source: doubleclickbygoogle 2016
10. 5 seconds vs 19 seconds 60% 
 greater pageviews 
 per visit 35% 
 lower bounce rates Source: doubleclickbygoogle 2016
12. PWA 12 What’s Progressive Web App
13. Progressive Web Apps
14. Fast Engaging Reliable
15. What’s PWA ? ‣ Reliable 15 15
16. What’s PWA ? ‣ Fast 16
17. What’s PWA ? ‣ Engaging 17
18. Chrome Dev Summit 2014 How does the PWA looks like 18
19. IN DEV IN DEV
21. PWA 案例例分享
22. 150% Increase in engagement for Add to Home Screen users 97% Overall increase in conversions
24. 76% rise in conversions 4x interaction rate
25. 3x more time on site 40% high re-engagement 70% Increase in engagement for Add to Home Screen users 3x lower data usage
27. 53% increase in mobile sessions on iOS 8% increase in conversion rates on recovered carts via Push Notifications
31. Source: Google Developer Days 2017
33. ‣ https://www.thinkwithgoogle.com/marketing-resources/experience-design/ progressive-web-apps-benefit-brands/ ‣ https://www.slideshare.net/comScoremarcom/2017-us-mobile-app-report ‣ https://www.thinkwithgoogle.com/intl/en-aunz/advertising-channels/mobile/ mind-gap-three-ways-bridge-australian-consumers-great-expectations/ ‣ https://twitter.com/b1tr0t/status/922519397159157760 ‣ https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/ ‣ https://medium.com/dev-channel/a-pinterest-progressive-web-app- performance-case-study-3bd6ed2e6154 ‣ https://cloudfour.com/thinks/ios-doesnt-support-progressive-web-apps-so- what/ 33 參參考資料
34. ‣ Build the Next Generation Mobile Web ‣ https://www.youtube.com/watch?v=3tb-1MWg44Y&feature=youtu.be ‣ Flipkart Lite - The progressive mobile web app ‣ https://www.youtube.com/watch?v=GMxGBLnDehs ‣ trivago - Building the Next Generation of the Mobile Web ‣ https://www.youtube.com/watch?v=pFE3LRRxqlo ‣ Forbes - Redefining Modern Web Development ‣ https://www.youtube.com/watch?v=JmC0xkCMFCE 34 參參考影片
35. Thanks