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 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