My Blog

Progressive Web Apps: What They Are and How They Work

Written by

jathushan

in

Have you ever been on a website and got hit with “Please download our app to continue”? Or checked your phone storage only to find some app quietly eating through 500MB you never agreed to give it? Or tried to load something underground with no signal and got absolutely nothing?

These are genuinely frustrating experiences — and they’re what got me interested in Progressive Web Apps (PWAs). For my seminar, I researched PWAs and honestly, once you understand what they are, you start to wonder why every website isn’t one.

So, What Even Is a PWA?

At its core, a Progressive Web App is a website that’s been built to behave like a native mobile app. It’s not a separate framework or a different kind of technology — it’s just a regular website (HTML, CSS, and JavaScript) with two extra files added on top.

The easiest way I found to think about it is this: a regular website is easy to find and share, but it’s slow, can’t work offline, and doesn’t sit on your home screen. A native app is fast, works offline, and feels polished — but you have to download it, it takes up storage, and building one for both iOS and Android separately costs a lot. A PWA sits right in the middle and gives you the best of both.

A PWA is a website that feels and behaves like a native app. — that’s the one-line definition I kept coming back to throughout my research.

The term itself was coined by Google engineers Alex Russell and Frances Berriman back in 2015, and browser support has grown significantly since then, with Chrome, Edge, Firefox and — more recently — Safari on iOS all supporting the key features.

The 3 Superpowers of PWAs

This is the bit that clicked for me when I was putting together my presentation. PWAs don’t do everything differently — they just unlock three specific capabilities that websites normally don’t have.

01 — Installable

You can add a PWA to your home screen directly from the browser. No App Store, no Google Play, no waiting for a download to finish. You just tap “Add to Home Screen” and it appears like any other app icon. When you open it, the browser bar is hidden and it looks and feels completely native.

This is a big deal from a user experience perspective. Every extra step between a user and your content loses you a chunk of them. PWAs remove the entire “find it on the store, download it, wait, open it” process entirely.

02 — Works Offline

PWAs load instantly even without an internet connection. This is made possible by something called a Service Worker (more on that in the next section), which saves key files to your device in the background. So even on the tube with no signal, or on a plane, or somewhere with a terrible connection — the app still loads.

This isn’t just a nice-to-have. For global audiences where mobile data is expensive or unreliable, offline capability is genuinely transformative.

03 — Push Notifications

PWAs can send push notifications to users just like native apps do. This allows businesses to re-engage users with updates, reminders, or offers — without requiring them to have downloaded anything from an app store.

On Android this has been supported for a while. Apple only added push notification support for PWAs on iOS in 2023, which makes this capability truly cross-platform now.

The Secret Ingredient: The Service Worker

This is the technical bit — but I promise it’s not as complicated as it sounds.

A Service Worker is a JavaScript file that runs silently in the background of your browser, completely separate from the main page. The user never sees it. Think of it as a smart middleman sitting between your browser and the internet. Every time your browser makes a request — for a page, an image, some data — the Service Worker intercepts it first and asks: “Do I already have a cached copy of this?”

  • If yes — it returns it instantly from the cache. No network needed.
  • If no — it goes to the internet, fetches it, stores a copy for next time, and returns it.
  • If there’s no internet at all — it falls back to whatever it has saved, so the app still loads.

That’s why PWAs are so fast on repeat visits, and why they keep working without a connection.

One important thing worth noting: Service Workers are HTTPS only. They can’t run on an insecure connection, which is a deliberate security measure to make sure that “middleman” can’t be tampered with.

The Web App Manifest

The second piece of the puzzle is the Web App Manifest. This is honestly just a small JSON file — one of the least intimidating things in web development — that you link to your site. It’s basically an instruction sheet that tells the browser: treat this like an app.

Here’s what one looks like:

{
  "name": "My App",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#00BFA5",
  "background_color": "#fff",
  "icons": [
    {
      "src": "/icon.png",
      "sizes": "192x192"
    }
  ]
}

Each property does something specific:

PropertiesWhat it does
“name”The label that appears under the icon on your home screen
“display”Set to "standalone" — hides the browser bar so it looks like a real app
“theme_color”Colours the phone’s status bar to match your brand
“icons”The icon that appears on the home screen
“start_url”Which page opens when the app is launched

You connect it to your site with a single line in the HTML <head>:

<link rel="manifest" href="/manifest.json">

That’s genuinely it. Not a huge lift for what it unlocks.

PWA vs Native App — How Do They Actually Compare?

One of the most useful things I put in my presentation was a straight head-to-head comparison. Here it is:

FeaturePWANative App
Install via App Store?Not neededRequired
Storage space?tinyLarge
Works offline?yesyes
Push notifications?yesyes
Shareable link?just a URLNope
Dev cost?One codebaseIOS + Android

The only area where native apps still have a clear advantage is access to deeper device hardware — things like Bluetooth, NFC, or advanced camera controls. But for the vast majority of everyday apps, PWAs cover everything users actually need.

You’ve Already Used PWAs

This was the part of my research that surprised me the most. These aren’t small experimental projects — some of the biggest brands in the world are already running PWAs, and the numbers they’ve reported back up why.

Twitter / X — Their PWA uses 75% less data than the native app while keeping almost all the same features. For users in markets where data is expensive, this is a significant difference. 📎 https://developers.google.com/web/showcase/2017/twitter

Starbucks — After rebuilding their web ordering experience as a PWA, daily active users placing online orders doubled. The PWA is also 99.84% smaller in size than the iOS native app. 📎 https://formidable.com/work/starbucks-progressive-web-app/

Pinterest — Pinterest saw a 60% increase in engagement after launching their PWA, along with a 40% jump in time spent on the site. 📎 https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154

Spotify — Their web player at open.spotify.com is a PWA, offering offline playback and instant loading without any installation required.

How It All Fits Together

When I was wrapping up my presentation, I wanted to give people a clear picture of how simple the building blocks actually are. It really comes down to three things working together:

  • HTML + CSS + JS — your normal website code, nothing new
  • Service Worker — handles caching, offline access, and push notifications
  • Web App Manifest — gives the app its name, icon, and display settings

Put those three things together, serve the site over HTTPS, and you have a Progressive Web App. According to Google’s own documentation, most developers can take an existing website and turn it into a PWA in a single day.

Google — Progressive Web Apps: https://web.dev/progressive-web-apps/

Key Takeaways

  1. PWAs = websites with superpowers. Same core technology, just enhanced with two extra files.
  2. The Service Worker is what makes offline mode and fast loading work. It’s a smart cache that sits between your browser and the internet.
  3. The Web App Manifest is what makes a PWA installable — it tells the browser everything it needs to put your app on a home screen.
  4. Big brands have proven it works. Twitter, Starbucks, Pinterest and Spotify have all seen real, measurable results from making the switch.

If you’re building for the web, PWAs are worth understanding — they close a lot of the gap between what websites and native apps can do, without the cost or complexity of going fully native.

References

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts