Web and the Blurring Line

As web capabilities grows, the lines for web and native mobile platform is blurring quickly. It is even more so with wide spread adoption of progressive web applications and modern web apis. We will together learn about about these capabilities and learn how we as a developer can leverage on these capabilities to building a better web.

Transcript

1. Web and the Blurring Line Vin Lim @vinlim Reimagine the web
2. Hello! My name is Vin Lim
4. Proprietary + Confidential Proprietary + Confidential A Tale of Two Platforms
13. Percentage of global web pages serves to mobile phones Tỷ lệ phần trăm trang web toàn cầu hỗ trợ cho điện thoại di động Source: Statista
15. Google Maps locate user with Geolocation API Webcam Toy take photo with Webcam with Camera API
16. Native App Web App
17. Proprietary + Confidential Proprietary + Confidential The mobile web has always been great at distribution Engagement Discovery Mobile web Apps 17
19. Add to Home Screen (A2HS)
20. Offline Storage with Service Worker
21. Web Push Notification
22. Device Orientation & Motion API
23. Web Animation API
24. <virtual-scroller>
25. Web Assembly
26. Proprietary + Confidential Proprietary + Confidential What is possible in the web today Web 2013 Web 2014 Web 2015 Web 2016+ Native Deep Linking YES YES YES YES (YES) Single click install and launch YES YES YES YES (KINDA) Geolocation YES YES YES YES YES Gyroscope YES YES YES YES YES Offline KINDA KINDA YES YES YES Camera NO YES YES YES YES Push NO NO YES YES YES Auth NO NO NO YES YES Payments NO NO NO YES YES Install to home screen NO NO NO YES YES Sharing NO NO NO YES YES Bluetooth + USB NO NO NO YES YES Contacts NO NO NO NO YES
27. Proprietary + Confidential Proprietary + Confidential Emerging technologies enable high engagement on mWeb Engagement Discovery Mobile web Apps
28. Native App Web App
29. Native App Web App
30. Native App Web App
31. A peek into the future
32. Web Picture-in-picture
33. Web Connectivity (USB & Bluetooth)
34. Desktop Progressive Web App
35. Proprietary + Confidential Proprietary + Confidential Emerging market considerations
36. Proprietary + Confidential Proprietary + Confidential The next billion users will virtually be all mobile Plan for localization Reduce battery consumption Optimize for device capability Conserve data usage Design for seamless connectivity
37. Proprietary + Confidential Proprietary + Confidential Google Maps radically improved the experience for users on low-end devices or in limited network scenarios
38. Proprietary + Confidential Proprietary + Confidential more successful page loads compared to the previous experience Google Maps focused on several core use cases See My Location Orient & Share Search for a Place Find info for known addresses See/Search Nearby Places Restaurants, temples, transits and more Get Directions Somewhere Routes for driving, transit and walking 20%
39. Proprietary + Confidential Proprietary + Confidential Instagram: 2x retention in emerging markets Instagram launched their PWA last year to increase their reach to users with low-end devices. Features: • Ability to upload photos (Image capture API) • Access to stories that load instantly (Media session API) • Add to homescreen (app manifest) • Full screen relaunch (app manifest) • Push notifications (service workers) they were able to double retention of their web users. Source: https://www.youtube.com/watch?v=UTZVXlcUK1w&feature=youtu.be
40. Proprietary + Confidential Proprietary + Confidential Take away
41. As the web has become an ever more capable platform to deliver awesome experience to the wider group of users All it takes is us as a developer to shift our mindset to look at the web differently, leveraging on the modern capabilities of the web.
42. Thank You Vin Lim @vinlim