$30 off During Our Annual Pro Sale. View Details »

PWA: an Introduction

PWA: an Introduction

A brief story into Progressive Web Apps (PWA)

Irfan Maulana

November 28, 2018
Tweet

More Decks by Irfan Maulana

Other Decks in Programming

Transcript

  1. PWA:
    an Introduction
    Irfan Maulana
    SDE @ Bizzy Indonesia

    View Slide

  2. Outline Intro PWA
    Welcoming PWA
    PWA Case Study
    PWA Playground
    Measuring PWA
    Learning Reference

    View Slide

  3. Intro PWA

    View Slide

  4. 1
    Users access
    web from
    mobile phone
    Source:https://www.statista.com/statistics/241462/
    global-mobile-phone-website-traffic-share/

    View Slide

  5. Users already
    frustrated with
    slow web
    Source: DoubleClick — The need for mobile speed,
    September 2016

    View Slide

  6. Mobile web
    conversion rate
    still poor
    Source: State of Mobile Commerce Report Q4 2015

    View Slide

  7. But Apps needs
    bigger storage

    View Slide

  8. Users uninstall
    Apps
    30%
    Average users will uninstall
    their downloaded Apps
    Source:https://www.businessinsider.com/app-users-are-quick-to-u
    ninstall-2016-11/

    View Slide

  9. Users love Apps, because of:
    - Performance
    - Offline Access
    - Background Sync
    - Notification
    - Sensors
    - OS & Device Access

    View Slide

  10. If web can do these:
    - Performance
    - Offline Access
    - Background Sync
    - Notification
    - Sensors
    - OS & Device Access

    View Slide

  11. If web can do these:
    - Performance
    - Offline Access
    - Background Sync
    - Notification
    (plus)
    - Easy distribution
    - Low memory
    - App size

    View Slide

  12. Welcoming
    PWA
    A modern web with progressive enhancement

    View Slide

  13. Reliable
    Load instantly and never show the downasaur,
    even in uncertain network conditions.

    View Slide

  14. Fast
    Respond quickly to user interactions with
    silky smooth animations and no janky scrolling

    View Slide

  15. Engaging
    Feel like a natural app on the device,
    with an immersive user experience.

    View Slide

  16. PWA Case Study

    View Slide

  17. Alibaba
    76% higher conversions across
    browsers
    4X higher interaction rate from Add
    to Homescreen
    Source: https://developers.google.com/web/showcase/2016/alibaba

    View Slide

  18. Flipkart
    3x more time spent on site
    40% higher re-engagement rate
    70% greater conversion rate
    3x lower data usage
    Source: https://developers.google.com/web/showcase/2016/flipkart

    View Slide

  19. Twitter Lite
    65% increase in pages per session
    75% increase in Tweets sent
    20% decrease in bounce rate
    Source: https://developers.google.com/web/showcase/2017/twitter

    View Slide

  20. OLX
    23% less time until page is interactive
    80% lower bounce rates
    146% higher CTR on Ads
    250% more re-engagement
    Source: https://developers.google.com/web/showcase/2017/olx

    View Slide

  21. PWA Playground

    View Slide

  22. Required skills
    HTML
    JS

    View Slide

  23. Service Worker: Registration

    View Slide

  24. Service Worker:
    Installing
    What we’ve done?
    1. Open a cache.
    2. Cache our files.
    3. Confirm whether all the
    required assets are cached or
    not.

    View Slide

  25. Behind
    the scene
    Source: https://jakearchibald.com/2014/offline-cookbook/

    View Slide

  26. Caching Strategy: Cache Only
    Source: https://jakearchibald.com/2014/offline-cookbook/

    View Slide

  27. Caching Strategy: Cache Only
    Source: https://jakearchibald.com/2014/offline-cookbook/

    View Slide

  28. Caching Strategy: Network Only
    Source: https://jakearchibald.com/2014/offline-cookbook/

    View Slide

  29. Caching Strategy: Network Only
    Source: https://jakearchibald.com/2014/offline-cookbook/

    View Slide

  30. Caching Strategy: Cache, fallback Network
    Source: https://jakearchibald.com/2014/offline-cookbook/

    View Slide

  31. Caching Strategy: Cache, fallback Network
    Source: https://jakearchibald.com/2014/offline-cookbook/

    View Slide

  32. Caching Strategy: Cache, Network Race
    Source: https://jakearchibald.com/2014/offline-cookbook/

    View Slide

  33. Caching
    Strategy:
    Cache,
    Network
    Race
    Source: https://jakearchibald.com/2014/offline-cookbook/

    View Slide

  34. Add to Home Screen
    (A2HS)

    View Slide

  35. Add manifest.json
    for A2HS

    View Slide

  36. Insert
    manifest.json
    in HTML

    View Slide

  37. What next: PWA Checklist
    http://bit.ly/pwa-howto

    View Slide

  38. What next: PWA Journey

    View Slide

  39. Measuring PWA

    View Slide

  40. Manifest
    Checking

    View Slide

  41. SW
    Checking

    View Slide

  42. Built-in
    Lighthouse

    View Slide

  43. Lighthouse
    Result

    View Slide

  44. Centralize
    Lighthouse

    View Slide

  45. Lighthouse
    CI

    View Slide

  46. Learning Reference

    View Slide

  47. Website
    https://developers.google.com/web/progressive-web-apps/
    https://serviceworke.rs/
    https://jakearchibald.com/2014/offline-cookbook/

    View Slide

  48. Sample Code
    http://bit.ly/gdk-pwa

    View Slide

  49. Community
    medium.com/wwwid
    t.me/wwwid_pwa

    View Slide

  50. Questions?

    View Slide

  51. Thank You
    - github.com/mazipan
    - twitter.com/@Maz_Ipan
    - t.me/irfanmaulana
    - medium.com/@mazipanneh

    View Slide