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
How not to mess up your first PWA
Search
Dmitri Pisarev
June 18, 2020
Programming
0
55
How not to mess up your first PWA
Dmitri Pisarev
June 18, 2020
Tweet
Share
More Decks by Dmitri Pisarev
See All by Dmitri Pisarev
React State Management
dimaip
0
120
Closing the Gap - For all who are tired of choosing between Apps and Websites
dimaip
0
46
Docker 101 - From Development to Production and back
dimaip
0
120
Your CSS Code Needs an Architect
dimaip
0
40
Other Decks in Programming
See All in Programming
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
230
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
13
4.6k
PicoRuby on Rails
makicamel
2
130
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
160
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
840
Hack Claude Code with Claude Code
choplin
4
2.1k
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.4k
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
150
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Optimizing for Happiness
mojombo
379
70k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
The World Runs on Bad Software
bkeepers
PRO
69
11k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Transcript
Dmitri Pisarev, Neos Conference 2020 How not to Mess up
Your First PWA Wish I knew this stuff earlier…
- Christian believer ❤ - Into web dev since 2005
- Volunteer @ SFI.ru - Part-time @ DEED - team member Dmitri Pisarev Me, COVID-19 edition @dimaip dimaip.github.io
https://c.psmb.ru
None
http://dimaip.github.io/2015/11/15/react-neos/ https://github.com/bwaidelich/Wwwision.Neos.GraphQL
Some research
None
None
None
Why Native Apps are so engaging? + offline, performance, reliability
+ push notifications + home screen icon, OS integration + hardware access
Native Apps + Web React Native Flutter, Xamarin Cordova/Capacitor -
3x effort - Web is an afterthought - Yoga !== CSS - No JS no Love - WebView << Safari/Chrome - App Store review?! Options?
How about PWAs?
What are PWAs? + Offline (ServiceWorker) + push notifications (WebPush)
+ home screen icon (manifest.json) + other cool web APIs
Useful Web APIs + WebShare + WebAuthn + RequestPayment +
WebRTC + WebPush
iOS + SW support since iOS 11.3 - No App
Store - No push notifications - No install prompt - No SW in WKWebView Support Android + PWA paradise! + Submit to Play Market as Trusted Web Activity
Mobile Integration
Desktop Integration
https://love2dev.com/pwa/
Let’s write some code!
Challenge 1. ServiceWorkers are rocket science
manifest.json index.html
Let’s go offline some.js sw.js
We are stuck! - Reload? - Restart device? - Delete
service worker? - Replace with empty service worker? ⏳ - HTTP header Clear-Site-Data: "*"
Caching Strategies - Stale-While-Revalidate - Cache First (Cache Falling Back
to Network) - Network First (Network Falling Back to Cache) - Network Only Hand-rolling is hard and dangerous!
Workbox to mask some complexity Warning! Workbox is a leaky
abstraction! sw.js
Challenge 2. Getting PWA to self-update
Service Worker Lifecycle
sw.js
https://redfin.engineering/service-workers-break-the-browsers-refresh-button-by-default-here-s-why-56f9417694 Must read:
Don’t wait for reload …on iOS 12 it may not
happen soon
Challenge 3. Deploying an app with code-splitting
Deploying an app with code-splitting
Solution 1. Keep previous versions of assets PROS: the most
reliable solution CONS: not many platforms support it out of the box
Solution 2. Catch exceptions and force-reload SW PROS: works with
all deployment platforms CONS: horrible UX for stateful apps
Solution 3. Pre-cache all JS bundles with a service worker
PROS: prefetching makes sense in many cases anyways CONS: does not conserve bandwidth
Make it look native
Viewport, Icons, loading screen
CSS to disable some browser effects Use with caution and
keep a11y in mind!
Meet platform expectations!
Ionic Components
Dark Mode
Useful tools
None
pwabuilder.com
None
1. Choose the right platform 2. Make sure you understand
Service Workers well 3. Pretend to be native Too long; Didn’t listen
It’s open source! ❤ github.com/dimaip/calendar
@dimaip dimaip.github.io dev.to/dimaip Say Hi!