PWAs:
fad or future?
The WEB is AWESOME!
✅ everywhere
❌ install every time...
💭
✅ no install
✅ open
✅ powerful
❌ requires connection
❌ not the norm on mobile
Web
Native
PWAs
❓
React
Angular
Vue
?.js
Demo
icons from iconfinder
Service
Worker
...is a worker registered against an origin and a path.
It takes the form of a JavaScript file that can control the web page/site it is associated with [...].
Service Worker
Client
Server
🔁
SW lifecycle
Register the SW*
SW is installing
🔁
✅
✅
SW is active
* requires HTTPS
Modify the SW
⏳
⏳
Browser detects the SW difference
New SW is installing 🔁
New SW is waiting
⏳ Until the old SW controls no pages
New SW is active
✅
✅
🤔 What about compatibility?
Q&A
COOOOOODE!
[ 😏 Chrome DevTools ]
✅ FORK
✅ cd dev-v-dev/__start-files
✅ npm install
✅ npm run run dev
✅ locahost:8080
👨🏭
0. Service Worker
[ 🔴 LIVE ]
🚫📶
1. Works* offline
📁 index.html
📁 style.css
📁 ...
Server
📁 index.html
📁 style.css
📁 ...
example.com
📂 Files
🏪 Data
cache storage
IndexedDB
[ 🔴 LIVE ]
2. APP LIKE
📱
<link rel="manifest" href="manifest.json" />
{
"name": "Dev v Dev",
"short_name": "Dev v Dev",
"theme_color": "#hex",
"background_color": "#hex",
"display": "standalone",
"orientation": "portrait",
"scope": ".",
"start_url": ".",
"gcm_sender_id": "103953800507",
"icons": [{
"src": "image.jpg",
"sizes": "72x72",
"type": "image/png"
},
{
/* ... */
}
]
}IOS
<meta name="apple-mobile-web-app-capable" content="yes">
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent">
<link rel="apple-touch-icon" sizes="72x72" href="icon.png">
<!-- include multiple so that the browser selects the best one -->
<link rel="apple-touch-startup-image" href="launch.png">
<link
rel="apple-touch-startup-image"
href="launch-portrait.png"
media="(orientation: portrait)">
<!-- include multiple so that the browser selects the best one -->📢
3. Engaging
Server
service-worker
[ 🔴 LIVE ]
🤔So, is it fad or future?
cache all things !
push notifications !!
install !!!
Be responsible!
Cache
Push notifications & Installation banner
✅ just what you absolutely need
✅ clean up after yourself
✅ after I've interacted multiple times with your app
Upgrade to a PWA if it truly brings value to your users!
but now what...?
Get busy PWAing!
Even just for educational purposes! ❤
Q&A #2
Further reading
Tools & other links
Thank you!
