Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
PWA: an Introduction
Search
Irfan Maulana
November 28, 2018
Programming
5
790
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
Panduan untuk mempublikasikan kode ke publik
mazipan
0
120
Mengukur dan meningkatkan performa website
mazipan
1
210
Testing JavaScript
mazipan
0
150
Membuat Website Zaman Sekarang
mazipan
0
500
Kinerja Web 101 - Edisi 2022
mazipan
1
450
Layout Repaint & The Lessons Learned
mazipan
0
410
Bagaimana implementasi mockup design
mazipan
0
490
Memulai karir sebagai web programmer
mazipan
0
740
Membuat laporan kecepatan web untuk blog
mazipan
0
530
Other Decks in Programming
See All in Programming
TDD 実践ミニトーク
contour_gara
0
150
TanStack DB ~状態管理の新しい考え方~
bmthd
2
340
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
500
Langfuseと歩む生成AI活用推進
licux
3
300
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
730
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
390
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
240
AIエージェント開発、DevOps and LLMOps
ymd65536
1
350
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
15
8k
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
890
実践!App Intents対応
yuukiw00w
1
350
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
3
1.2k
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
GraphQLとの向き合い方2022年版
quramy
49
14k
Side Projects
sachag
455
43k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
A better future with KSS
kneath
239
17k
Writing Fast Ruby
sferik
628
62k
Designing for humans not robots
tammielis
253
25k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The Language of Interfaces
destraynor
160
25k
Facilitating Awesome Meetings
lara
55
6.5k
Done Done
chrislema
185
16k
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