Build Once, Run Everywhere: The Power of PWAs

We, as developers, often juggle between Android builds, iOS tweaks, and web deployments. But what if I told you there’s a way to skip the platform hustle and focus on one build that works nearly everywhere?

Welcome to the world of Progressive Web Apps (PWAs).

First, what’s a PWA really?

Let’s keep it simple. A PWA is a web app that feels and behaves like a native mobile app.

Here’s how you’ll know it’s a PWA:

• You can install it on your phone (without the App Store or Play Store).
• It works offline.
• It opens in its own window like an app — not a browser tab.

If you’ve ever added a website to your home screen and it opened like an app, chances are — you used a PWA.

Why would a dev care about PWAs?

Because they let us focus on building and shipping, without fighting platform-specific nonsense.

Some benefits that actually matter to us:

• No Store Drama: Skip the App Store submission + review process.
• One Codebase: Web, Android, Desktop — all from the same code.
• Offline Mode: Thanks to caching via service workers.
• Push Notifications: Yes, the web supports them now.
• Installable: Just like a native app, minus the bloat.

You build your app once — and it just works. On laptops, phones, tablets. Clean.

What makes a normal web app a “progressive” one?

These 4 ingredients:

1. HTTPS — The web’s version of trust.
2. Service Worker — The JavaScript file that controls offline behavior and caching.
3. Manifest File — Metadata about your app (icon, name, colors, etc.).
4. Responsive UI — It has to look good on any screen size.

That’s it. You don’t need React, Vue, or any framework. Even your simple HTML site can be a PWA.

How do you make one?

Here’s a barebones setup you can copy-paste right into your next weekend project.

📁 Manifest

{
  "name": "Todo App",
  "short_name": "Todo",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#1e1e1e",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

⚙️ Service Worker

self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open('static-v1').then((cache) => {
      return cache.addAll(['/', '/index.html', '/main.css', '/app.js']);
    })
  );
});

self.addEventListener('fetch', (e) => {
  e.respondWith(
    caches.match(e.request).then((res) => res || fetch(e.request))
  );
});

🔗 Register Service Worker

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js');
}

How to know if you did it right?

Chrome DevTools → Lighthouse → Run Audit → Check PWA Score.

You want to see:

• ✅ Installable
• ✅ Offline capable
• ✅ Fast and responsive

If not, Lighthouse will tell you what’s missing.

Real Talk: Some Things to Watch Out For

• Cache Busting: Update your service worker properly or users won’t get the latest code.
• Safari Limitations: iOS doesn’t fully support background sync and push.
• Storage Limits: You can’t store gigabytes of data.

So while PWAs are powerful, they aren’t a full native replacement (yet). But they’re good enough for 90% of apps we build.

PWAs are not some buzzword — they’re real, dev-friendly, and already running on millions of devices.

You don’t need to drop your stack or learn a new framework. Just take what you already have, and level it up progressively.

If you’ve made or are planning a PWA, drop a link in the comments — would love to check it out.

Thanks for reading, and keep building.

Enjoying my content? Support my work and help me create more by buying me a coffee! ☕ Buy me a coffee.