Offline Apps for The Next Billion Users

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

Transcript

1. 1
   FOR THE NEXT BILLION USERS
   Building Offline Web Apps
   

   View Slide

2. 2
   Next
   Billion
   Users
   

   View Slide

3. 3
   Next
   Billion
   Users
   Including the baby
   

   View Slide

4. 4
   No, Not
   The
   Regular
   Nerd
   YOU
   

   View Slide

5. 5
   ..but, the
   Smart
   Engineer
   that Cares
   About Your
   Society
   YOU
   

   View Slide

6. 6
   JS PREACHER
   CHRISTIAN NWAMBA
   INSTRUCTOR / WRITER
   SCOTCH.IO
   DEV ADVOCATE / MARKETING
   CLOUDINARY
   ORGANIZER
   ANGULAR NIGERIA
   ORGANIZER
   FORLOOP LAGOS
   @codebeast
   

   View Slide

7. 7
   Offline Web Apps
   Why are “Offline” and
   “Web” in the same title?
   

   View Slide

8. 8
   What is
   that one
   saying?
   

   View Slide

9. 9
   It’s like saying
   “Heaven on Earth”
   

   View Slide

10. 10
    Offline web apps
    are NOT entirely
    offline
    

    View Slide

11. 11
    ...but they create an
    illusion
    ...like when you say
    “Heaven on Earth”
    

    View Slide

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
    

    View Slide

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
    

    View Slide

14. 14
    If that frustrated
    you, what about
    those in rural areas
    (like the kids)?
    

    View Slide

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
    

    View Slide

16. 16
    48% of
    7.5B
    We’re NOT doing a great job, YET
    

    View Slide

17. 17
    Progressive Web Apps
    Another Intimidating Big
    Thing to Learn!!
    

    View Slide

18. 18
    Concept invented
    to solve the
    described problem.
    That’s all!
    

    View Slide

19. 19
    HOW?
    

    View Slide

20. 20
    Source: UDACITY
    

    View Slide

21. 21
    WHAT’S A CACHE?
    

    View Slide

22. 22
    MEET THE SERVICE
    WORKER!
    https://www.youtube.com/watch?v=QiXLais
    Cq10
    

    View Slide

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.
    

    View Slide

24. 24
    CACHE
    NETWORK
    REQUEST
    THE PROCESS
    

    View Slide

25. 25
    Source: Google Dev
    

    View Slide

26. 26
    MANIFEST FILE
    ADD TO HOME SCREEN
    SPLASH SCREEN
    VERY FAST
    STANDALONE APP
    

    View Slide

27. 27
    Who Even Uses this Thing?
    Let’s See Some Successful
    Use Cases!
    

    View Slide

28. 28
    Flipkart
    Source: Auth0
    ● 3x less data usage
    ● 40% higher
    re-engagement rate
    ● 70% conversion rate
    

    View Slide

29. 29
    Housing.com
    Source: Auth0
    ● 40% lower bounce rate
    ● 30% faster page load
    ● 10% longer average
    session
    

    View Slide

30. 30
    AliExpress
    Source: Auth0
    ● 104% increase in
    conversion rate for
    new users
    ● 74% increase in time
    spent per session
    ● 2X more pages
    visited
    

    View Slide

31. 31
    Considerations
    Mobile != Web
    

    View Slide

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
    

    View Slide

33. 33
    I bet you’re dealing
    with mixed feelings
    right now
    

    View Slide

34. 34
    EXCITEMENT!!!
    

    View Slide

35. 35
    ...But How Do I START?
    

    View Slide

36. 36
    DEMO
    Let’s See an Example
    

    View Slide

37. 37
    https://goo.gl/GdDLUd
    LIVE
    

    View Slide

38. 38
    Learn PWA:
    https://git.io/awesome-pwa
    Resources
    Demo Code:
    https://github.com/christiannwamba/igpwa
    

    View Slide

39. 39
    Twitter: @codebeast
    Thanks!
    

    View Slide