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
750
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
92
Mengukur dan meningkatkan performa website
mazipan
1
200
Testing JavaScript
mazipan
0
130
Membuat Website Zaman Sekarang
mazipan
0
480
Kinerja Web 101 - Edisi 2022
mazipan
1
430
Layout Repaint & The Lessons Learned
mazipan
0
390
Bagaimana implementasi mockup design
mazipan
0
460
Memulai karir sebagai web programmer
mazipan
0
710
Membuat laporan kecepatan web untuk blog
mazipan
0
510
Other Decks in Programming
See All in Programming
SQL Server ベクトル検索
odashinsuke
0
180
VitestのIn-Source Testingが便利
taro28
6
1.7k
AWSで雰囲気でつくる! VRChatの写真変換ピタゴラスイッチ
anatofuz
0
160
エンジニアが挑む、限界までの越境
nealle
1
180
ComposeでWebアプリを作る技術
tbsten
0
110
Bedrock×MCPで社内ブログ執筆文化を育てたい!
har1101
6
1k
Ruby's Line Breaks
yui_knk
2
950
新しいPHP拡張モジュールインストール方法「PHP Installer for Extensions (PIE)」を使ってみよう!
cocoeyes02
0
380
Dissecting and Reconstructing Ruby Syntactic Structures
ydah
0
680
AI Agents with JavaScript
slobodan
0
230
これだけは知っておきたいクラス設計の基礎知識 version 2
masuda220
PRO
24
6.4k
MCP調べてみました! / Exploring MCP
uhzz
2
2.3k
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Embracing the Ebb and Flow
colly
85
4.6k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Typedesign – Prime Four
hannesfritz
41
2.6k
Practical Orchestrator
shlominoach
186
11k
Optimizing for Happiness
mojombo
377
70k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
660
GraphQLとの向き合い方2022年版
quramy
46
14k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
How to Ace a Technical Interview
jacobian
276
23k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
The Cost Of JavaScript in 2023
addyosmani
49
7.7k
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