Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
PWA: an Introduction
Irfan Maulana
November 28, 2018
Programming
5
430
PWA: an Introduction
A brief story into Progressive Web Apps (PWA)
Irfan Maulana
November 28, 2018
Tweet
Share
More Decks by Irfan Maulana
See All by Irfan Maulana
Mengukur dan meningkatkan performa website
mazipan
1
46
Testing JavaScript
mazipan
0
38
Membuat Website Zaman Sekarang
mazipan
0
160
Kinerja Web 101 - Edisi 2022
mazipan
0
80
Layout Repaint & The Lessons Learned
mazipan
0
97
Bagaimana implementasi mockup design
mazipan
0
130
Memulai karir sebagai web programmer
mazipan
0
410
Membuat laporan kecepatan web untuk blog
mazipan
0
200
Bongkar Dapur Webnya #PHPID-OL
mazipan
0
210
Other Decks in Programming
See All in Programming
SAM × Dockerでサーバーレス開発が超捗った話
yu_yukk_y
1
250
OSS貢献を気軽にしたい Let's Go Talk #1
yuyaabo
2
230
Scaling Productivity- How we have improved our dev experience
sockeqwe
1
120
このタイミングで知っておきたい 開発生産性の高いエンジニア組織の特徴とは / dev-sumi-20220721-productivity-features
findyinc
7
2.6k
FutureCon 2022 FlutterアプリのPerformance測定
harukafujita
0
130
How to Test Your Compose UI (Droidcon Berlin 2022)
stewemetal
1
130
設計の考え方とやり方
masuda220
PRO
49
27k
Better Angular Architectures: Architectures with Standalone Components @DWX2022
manfredsteyer
PRO
1
390
ファーストペンギンを志すものに伝えたい - 1人目のアジャイル推進者がたどった成功と失敗
psj59129
0
100
企業内スモールデータでのデータ解析
hamage9
0
890
ストア評価「2.4」だったCOCOARアプリを1年で「4.4」になんとかした方法@Cloud CIRCUS Meetup #2
1901drama
0
180
それ全部エラーメッセージに書いてあるよ!〜独学でPHPプログラミングが上達するたった一つの方法〜
77web
1
150
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
21
1.4k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
Producing Creativity
orderedlist
PRO
334
37k
Bash Introduction
62gerente
598
210k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Building Applications with DynamoDB
mza
84
4.8k
The Web Native Designer (August 2011)
paulrobertlloyd
75
2k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
120k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
The Cult of Friendly URLs
andyhume
68
4.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
6
2.5k
Transcript
PWA: an Introduction Irfan Maulana SDE @ Bizzy Indonesia
Outline Intro PWA Welcoming PWA PWA Case Study PWA Playground
Measuring PWA Learning Reference
Intro PWA
1 Users access web from mobile phone Source:https://www.statista.com/statistics/241462/ global-mobile-phone-website-traffic-share/
Users already frustrated with slow web Source: DoubleClick — The need for
mobile speed, September 2016
Mobile web conversion rate still poor Source: State of Mobile
Commerce Report Q4 2015
But Apps needs bigger storage
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/
Users love Apps, because of: - Performance - Offline Access
- Background Sync - Notification - Sensors - OS & Device Access
If web can do these: - Performance - Offline Access
- Background Sync - Notification - Sensors - OS & Device Access
If web can do these: - Performance - Offline Access
- Background Sync - Notification (plus) - Easy distribution - Low memory - App size
Welcoming PWA A modern web with progressive enhancement
Reliable Load instantly and never show the downasaur, even in
uncertain network conditions.
Fast Respond quickly to user interactions with silky smooth animations
and no janky scrolling
Engaging Feel like a natural app on the device, with
an immersive user experience.
PWA Case Study
Alibaba 76% higher conversions across browsers 4X higher interaction rate
from Add to Homescreen Source: https://developers.google.com/web/showcase/2016/alibaba
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
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
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
PWA Playground
Required skills HTML JS
Service Worker: Registration
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.
Behind the scene Source: https://jakearchibald.com/2014/offline-cookbook/
Caching Strategy: Cache Only Source: https://jakearchibald.com/2014/offline-cookbook/
Caching Strategy: Cache Only Source: https://jakearchibald.com/2014/offline-cookbook/
Caching Strategy: Network Only Source: https://jakearchibald.com/2014/offline-cookbook/
Caching Strategy: Network Only Source: https://jakearchibald.com/2014/offline-cookbook/
Caching Strategy: Cache, fallback Network Source: https://jakearchibald.com/2014/offline-cookbook/
Caching Strategy: Cache, fallback Network Source: https://jakearchibald.com/2014/offline-cookbook/
Caching Strategy: Cache, Network Race Source: https://jakearchibald.com/2014/offline-cookbook/
Caching Strategy: Cache, Network Race Source: https://jakearchibald.com/2014/offline-cookbook/
Add to Home Screen (A2HS)
Add manifest.json for A2HS
Insert manifest.json in HTML
What next: PWA Checklist http://bit.ly/pwa-howto
What next: PWA Journey
Measuring PWA
Manifest Checking
SW Checking
Built-in Lighthouse
Lighthouse Result
Centralize Lighthouse
Lighthouse CI
Learning Reference
Website https://developers.google.com/web/progressive-web-apps/ https://serviceworke.rs/ https://jakearchibald.com/2014/offline-cookbook/
Sample Code http://bit.ly/gdk-pwa
Community medium.com/wwwid t.me/wwwid_pwa
Questions?
Thank You - github.com/mazipan - twitter.com/@Maz_Ipan - t.me/irfanmaulana - medium.com/@mazipanneh