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 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
260
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
430
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
230
XP, Testing and ninja testing
m_seki
3
250
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
800
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
520
Hack Claude Code with Claude Code
choplin
4
2.1k
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
270
Goで作る、開発・CI環境
sin392
0
230
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Making Projects Easy
brettharned
116
6.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
A designer walks into a library…
pauljervisheath
207
24k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
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!