PWA: an Introduction

PWA: an Introduction

A brief story into Progressive Web Apps (PWA)

D83b3739651001461f48763639b90b50?s=128

Irfan Maulana

November 28, 2018
Tweet

Transcript

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

  2. Outline Intro PWA Welcoming PWA PWA Case Study PWA Playground

    Measuring PWA Learning Reference
  3. Intro PWA

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

  5. Users already frustrated with slow web Source: DoubleClick — The need for

    mobile speed, September 2016
  6. Mobile web conversion rate still poor Source: State of Mobile

    Commerce Report Q4 2015
  7. But Apps needs bigger storage

  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/
  9. Users love Apps, because of: - Performance - Offline Access

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

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

    - Background Sync - Notification (plus) - Easy distribution - Low memory - App size
  12. Welcoming PWA A modern web with progressive enhancement

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

    uncertain network conditions.
  14. Fast Respond quickly to user interactions with silky smooth animations

    and no janky scrolling
  15. Engaging Feel like a natural app on the device, with

    an immersive user experience.
  16. PWA Case Study

  17. Alibaba 76% higher conversions across browsers 4X higher interaction rate

    from Add to Homescreen Source: https://developers.google.com/web/showcase/2016/alibaba
  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
  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
  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
  21. PWA Playground

  22. Required skills HTML JS

  23. Service Worker: Registration

  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.
  25. Behind the scene Source: https://jakearchibald.com/2014/offline-cookbook/

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

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

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

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

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

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

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

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

  34. Add to Home Screen (A2HS)

  35. Add manifest.json for A2HS

  36. Insert manifest.json in HTML

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

  38. What next: PWA Journey

  39. Measuring PWA

  40. Manifest Checking

  41. SW Checking

  42. Built-in Lighthouse

  43. Lighthouse Result

  44. Centralize Lighthouse

  45. Lighthouse CI

  46. Learning Reference

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

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

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

  50. Questions?

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