PWA: an Introduction

A brief story into Progressive Web Apps (PWA)

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