Slide 1

Slide 1 text

PWA: an Introduction Irfan Maulana SDE @ Bizzy Indonesia

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Intro PWA

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

But Apps needs bigger storage

Slide 8

Slide 8 text

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/

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Welcoming PWA A modern web with progressive enhancement

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

PWA Case Study

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

PWA Playground

Slide 22

Slide 22 text

Required skills HTML JS

Slide 23

Slide 23 text

Service Worker: Registration

Slide 24

Slide 24 text

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.

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Add to Home Screen (A2HS)

Slide 35

Slide 35 text

Add manifest.json for A2HS

Slide 36

Slide 36 text

Insert manifest.json in HTML

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

What next: PWA Journey

Slide 39

Slide 39 text

Measuring PWA

Slide 40

Slide 40 text

Manifest Checking

Slide 41

Slide 41 text

SW Checking

Slide 42

Slide 42 text

Built-in Lighthouse

Slide 43

Slide 43 text

Lighthouse Result

Slide 44

Slide 44 text

Centralize Lighthouse

Slide 45

Slide 45 text

Lighthouse CI

Slide 46

Slide 46 text

Learning Reference

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Community medium.com/wwwid t.me/wwwid_pwa

Slide 50

Slide 50 text

Questions?

Slide 51

Slide 51 text

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