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/