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
810
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
220
Testing JavaScript
mazipan
0
150
Membuat Website Zaman Sekarang
mazipan
0
510
Kinerja Web 101 - Edisi 2022
mazipan
1
460
Layout Repaint & The Lessons Learned
mazipan
0
420
Bagaimana implementasi mockup design
mazipan
0
500
Memulai karir sebagai web programmer
mazipan
0
740
Membuat laporan kecepatan web untuk blog
mazipan
0
540
Other Decks in Programming
See All in Programming
AI Agent 時代的開發者生存指南
eddie
4
2k
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
930
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
220
CSC509 Lecture 04
javiergs
PRO
0
300
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
230
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
170
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
750
Devvox Belgium - Agentic AI Patterns
kdubois
1
130
Le côté obscur des IA génératives
pascallemerrer
0
150
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
760
XP, Testing and ninja testing ZOZ5
m_seki
3
760
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
526
40k
Docker and Python
trallard
46
3.6k
GraphQLとの向き合い方2022年版
quramy
49
14k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Bash Introduction
62gerente
615
210k
Embracing the Ebb and Flow
colly
88
4.9k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
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