Progressive Web Apps in 2025
Build modern PWAs with service workers, offline support, and native-like experiences on the web.
Progressive Web Apps in 2025
Build modern PWAs with service workers, offline support, and native-like experiences on the web.
What is a PWA?
A Progressive Web App combines the best of web and native apps:
- Installable — users can add to home screen
- Offline capable — works without internet
- Push notifications — re-engage users
- Fast — cached assets for instant loading
Web App Manifest
{
"name": "My PWA",
"short_name": "PWA",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#3b82f6",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
Service Worker
// sw.js - Cache-first strategy
const CACHE_NAME = 'v1'
const ASSETS = ['/', '/index.html', '/styles.css', '/app.js']
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME).then(cache => cache.addAll(ASSETS))
)
})
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(cached => {
return cached || fetch(event.request).then(response => {
const clone = response.clone()
caches.open(CACHE_NAME).then(cache => cache.put(event.request, clone))
return response
})
})
)
})
Push Notifications
// Request notification permission
const permission = await Notification.requestPermission()
if (permission === 'granted') {
const registration = await navigator.serviceWorker.ready
const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: VAPID_PUBLIC_KEY,
})
}
Background Sync
// Queue actions when offline
self.addEventListener('sync', event => {
if (event.tag === 'sync-posts') {
event.waitUntil(syncPendingPosts())
}
})
async function syncPendingPosts() {
const pending = await getFromIndexedDB('pending-posts')
for (const post of pending) {
await fetch('/api/posts', {
method: 'POST',
body: JSON.stringify(post),
})
}
}
Conclusion
PWAs in 2025 offer a compelling alternative to native apps for many use cases. With improved browser APIs, better tooling, and widespread platform support, now is the perfect time to build progressive web applications.
Share this article
Subscribe to our newsletter
Get the latest articles, tutorials, and insights delivered straight to your inbox. No spam, unsubscribe anytime.
Related Articles
Modern CSS Techniques for 2024
Explore the latest CSS features including container queries, cascade layers, and advanced grid layouts.
Read more
Getting Started with Next.js 15
Learn about the latest features in Next.js 15 including async components, improved performance, and new routing capabilities.
Read more
Authentication Best Practices
Implement secure authentication with JWT, OAuth, and modern security patterns for web applications.
Read more