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
88
Mengukur dan meningkatkan performa website
mazipan
1
200
Testing JavaScript
mazipan
0
130
Membuat Website Zaman Sekarang
mazipan
0
470
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
ベクトル検索システムの気持ち
monochromegane
30
9.7k
snacks.nvim内のセットアップ不要なプラグインを紹介 / introduce_snacks_nvim
uhooi
0
380
Signal-Based Data FetchingWith the New httpResource
manfredsteyer
PRO
0
150
Java 24まとめ / Java 24 summary
kishida
3
400
リアクティブシステムの変遷から理解するalien-signals / Learning alien-signals from the evolution of reactive systems
yamanoku
2
1.2k
Vibe Codingをせずに Clineを使っている
watany
17
5.4k
マルチアカウント環境での、そこまでがんばらない RI/SP 運用設計
wa6sn
0
690
AHC 044 混合整数計画ソルバー解法
kiri8128
0
320
AWS で実現する安全な AI エージェントの作り方 〜 Bedrock Engineer の実装例を添えて 〜 / how-to-build-secure-ai-agents
gawa
8
570
Django for Data Science (Boston Python Meetup, March 2025)
wsvincent
0
310
Develop Faster With FrankenPHP
dunglas
2
3.1k
Chrome Extension Techniques from Hell
moznion
1
150
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
12
640
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
17
1.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Typedesign – Prime Four
hannesfritz
41
2.6k
How to Think Like a Performance Engineer
csswizardry
22
1.5k
The Cost Of JavaScript in 2023
addyosmani
48
7.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
177
52k
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