Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Offline Apps for The Next Billion Users

Offline Apps for The Next Billion Users

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

Christian Nwamba

July 28, 2017
Tweet

More Decks by Christian Nwamba

Other Decks in Technology

Transcript

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

    View full-size slide

  2. 2
    Next
    Billion
    Users

    View full-size slide

  3. 3
    Next
    Billion
    Users
    Including the baby

    View full-size slide

  4. 4
    No, Not
    The
    Regular
    Nerd
    YOU

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. 8
    What is
    that one
    saying?

    View full-size slide

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

    View full-size slide

  10. 10
    Offline web apps
    are NOT entirely
    offline

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. 20
    Source: UDACITY

    View full-size slide

  20. 21
    WHAT’S A CACHE?

    View full-size slide

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

    View full-size slide

  22. 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 full-size slide

  23. 24
    CACHE
    NETWORK
    REQUEST
    THE PROCESS

    View full-size slide

  24. 25
    Source: Google Dev

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. 31
    Considerations
    Mobile != Web

    View full-size slide

  31. 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 full-size slide

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

    View full-size slide

  33. 34
    EXCITEMENT!!!

    View full-size slide

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

    View full-size slide

  35. 36
    DEMO
    Let’s See an Example

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. 39
    Twitter: @codebeast
    Thanks!

    View full-size slide