You know the feeling: you open some random website on your phone, it lags, something doesn’t load, and you’re gone in seconds. On the other side, native apps feel smooth, but you first need to search, download, and update them… a hassle. That’s where PWAs come in.
What is a PWA?
Progressive Web App sounds like a buzzword. But it’s not. At its core, it’s just a website that behaves like an app. You open it in the browser, but you can also install it on your home screen like a “real” app. It works offline, sends push notifications, loads super fast, and doesn’t feel like a clunky website from 2005.
Why should you care?
Imagine you’re building a project mainly for mobile users. Building a native app? Expensive and double the effort (iOS and Android). Just a website? Faster to build, but usually worse user experience.
With a PWA you basically get both: one codebase that works across all platforms – plus the advantages of an app.
The building blocks of a PWA
To make it work, you only need a few ingredients:
- Service Worker – the brain in the background. Handles caching, offline support, push notifications.
- Manifest.json – the business card of your app. Defines name, icon, colors, and how it should appear when installed.
- HTTPS – mandatory, since service workers won’t run without encryption.
That’s basically it. The rest is standard web development.
A short manifest example
Here’s what a minimal but modern manifest could look like (file: manifest.webmanifest):
{
"id": "/",
"name": "My App",
"short_name": "App",
"start_url": "/?source=pwa",
"scope": "/",
"display": "standalone",
"background_color": "#0B1221",
"theme_color": "#0B1221",
"icons": [
{ "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icons/icon-512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}
That’s enough to make your PWA installable. Modern browsers use this information for home screen icons, splash screens, and integration.
Tech that makes your web app feel more “native”
Here’s where it gets exciting: modern browsers already ship APIs that get really close to native app functionality. A few examples:
- IndexedDB: A built-in database for storing large amounts of data locally.
- File System Access API: Direct access to local files – open, edit, save, almost like a desktop app.
- WebUSB / WebSerial / WebBluetooth: Talk directly to hardware devices. Yes, your web app can connect to a USB device or an Arduino.
- Background Sync: Keep actions running in the background, even if you’re offline.
- Push API: Push notifications without building a native app.
So a web app today is much more than a “nice-looking website.” It can behave like real software.
What’s next?
The pace of development is fast. WebAssembly is bringing high-performance apps (think games, image editing) into the browser. Project Fugu (Google and friends) is working on even more APIs so web apps can do nearly everything native apps can – from clipboard access to contacts to advanced hardware features.
Conclusion
PWAs aren’t just a clever shortcut between websites and apps anymore. They’ve become a serious alternative to native development.
You can already build apps today that work offline, store files, connect to hardware, and install on home screens. And tomorrow, it’ll be even better.
So if you’re starting a new project: think PWA – and check which browser APIs you can use to make it feel like a true app.