Offline Apps for The Next Billion Users

Building offline apps using the Progressive Web Apps Concepts. Presented at GDG Lagos Developer Conference.

1. 1 FOR THE NEXT BILLION USERS Building Offline Web Apps
2. 2 Next Billion Users
3. 3 Next Billion Users Including the baby
4. 4 No, Not The Regular Nerd YOU
5. 5 ..but, the Smart Engineer that Cares About Your Society YOU
6. 6 JS PREACHER CHRISTIAN NWAMBA INSTRUCTOR / WRITER SCOTCH.IO DEV ADVOCATE / MARKETING CLOUDINARY ORGANIZER ANGULAR NIGERIA ORGANIZER FORLOOP LAGOS @codebeast
7. 7 Offline Web Apps Why are “Offline” and “Web” in the same title?
8. 8 What is that one saying?
9. 9 It’s like saying “Heaven on Earth”
10. 10 Offline web apps are NOT entirely offline
11. 11 ...but they create an illusion ...like when you say “Heaven on Earth”
12. 12 Your Very TRUE Story • Left your home of fast Wifi/3G connectivity • Jumped on BRT heading to this GDG event • Tries to watch KraksTV memes while on transit…. oh snap, BAD NETWORK on the road • Puts Phone back to bag hoping to get here in the next 15 mins
13. 13 15 What? In this Our Lagos? • Of course, you must get stuck in a traffic (it’s Lagos). • You try to keep yourself busy with KraksTV again • ...And of course you can’t still afford a reasonably fast 3G to do so • Then you start to remember how much you hate your life and how you are never moving forward in life
14. 14 If that frustrated you, what about those in rural areas (like the kids)?
15. 15 We could have just PREFETCHED KraksTV videos when you had a stable internet ...and served you content when you’re OFFLINE or have POOR connection
16. 16 48% of 7.5B We’re NOT doing a great job, YET
17. 17 Progressive Web Apps Another Intimidating Big Thing to Learn!!
18. 18 Concept invented to solve the described problem. That’s all!
19. 19 HOW?
20. 20 Source: UDACITY
21. 21 WHAT’S A CACHE?
22. 22 MEET THE SERVICE WORKER! https://www.youtube.com/watch?v=QiXLais Cq10
23. 23 A proxy sitting between the client and server (in the browser), running in the background, and could cache items in the browser for future use.
24. 24 CACHE NETWORK REQUEST THE PROCESS
25. 25 Source: Google Dev
26. 26 MANIFEST FILE ADD TO HOME SCREEN SPLASH SCREEN VERY FAST STANDALONE APP
27. 27 Who Even Uses this Thing? Let’s See Some Successful Use Cases!
28. 28 Flipkart Source: Auth0 • 3x less data usage • 40% higher re-engagement rate • 70% conversion rate
29. 29 Housing.com Source: Auth0 • 40% lower bounce rate • 30% faster page load • 10% longer average session
30. 30 AliExpress Source: Auth0 • 104% increase in conversion rate for new users • 74% increase in time spent per session • 2X more pages visited
31. 31 Considerations Mobile != Web
32. 32 - Image optimization (use Cloudinary) - Progressive image delivery (use Cloudinary) - Use bundle splitting a lot - Deferred fetching with lazy loading - Prefetching - Take advantage of cache and web storage - Pretty much every other thing to make your web app fast and deliver better user experience
33. 33 I bet you’re dealing with mixed feelings right now
34. 34 EXCITEMENT!!!
35. 35 ...But How Do I START?
36. 36 DEMO Let’s See an Example
37. 37 https://goo.gl/GdDLUd LIVE
38. 38 Learn PWA: https://git.io/awesome-pwa Resources Demo Code: https://github.com/christiannwamba/igpwa
39. 39 Twitter: @codebeast Thanks!