Overview
Progressive Web Apps combine web and mobile app capabilities. Users get app-like experiences with offline support, fast loading, and installability.
Key Features
- Offline Support: Service Workers cache content
- Installable: Add to home screen like native apps
- Push Notifications: Engage users with notifications
- Fast Loading: Service Worker caching reduces load time
- Works Offline: Full functionality without internet
Service Worker Setup
// public/service-worker.ts
const CACHE_NAME = 'app-v1'
const URLS_TO_CACHE = [
'/',
'/index.html',
'/styles.css',
'/app.js'
]
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME).then((cache) => {
return cache.addAll(URLS_TO_CACHE)
})
)
})
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
// Return cached version or fetch from network
return response || fetch(event.request)
})
)
})
Register Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(reg => console.log('SW registered'))
.catch(err => console.error('SW error', err))
}
Web App Manifest
// public/manifest.json
{
"name": "My App",
"short_name": "MyApp",
"description": "My Progressive Web App",
"start_url": "/",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
<!-- Add to HTML head -->
<link rel="manifest" href="/manifest.json">
<link rel="icon" type="image/png" href="/icon-192.png">
<meta name="theme-color" content="#000000">
Push Notifications
// Request notification permission
Notification.requestPermission().then((permission) => {
if (permission === 'granted') {
registration.showNotification('Welcome!', {
body: 'You can now receive notifications',
icon: '/icon-192.png'
})
}
})
PWAs can increase user engagement by 200% and reduce app store friction by 100%.