Progressive Web App (PWA): the bridge between a site and an app

Most of the apps on your phone are, at their core, not so different from an ordinary website — they simply have a separate icon on the home screen and keep working partially without an internet connection. A Progressive Web App (PWA) is the technology that erases exactly this boundary: while remaining a fully fledged website, it behaves like a mobile application. The user installs it onto the home screen, receives push notifications, and can browse pages offline. For a web developer, this is the cheapest and fastest way to deliver a native-like experience without a separate mobile team.

What a PWA is and why it matters

A PWA is a site built on modern web standards (HTML, CSS, JavaScript) but enhanced with capabilities typical of native applications. The magic rests on three pillars: a manifest file describes how the app is installed and how it looks, a service worker intercepts network requests to provide offline behaviour and caching, and HTTPS guarantees the security of the whole system. When these three work together, a user can install your app without ever opening the App Store or Play Store.

From a business perspective a PWA is highly attractive because a single codebase gives you both the browser and the app-like experience. You do not need a separate iOS and Android team, a separate store registration, or a wait for moderation on every update. Update the site, and on the next launch the user automatically receives the fresh version. This saves time and money, especially for small and medium projects where resources are limited.

manifest.json — the app's passport

The first step toward making your web app installable is creating a manifest file. This JSON file tells the browser the app name, icons, colours, and display mode. You link it in the head of the HTML page, and based on this data the browser offers the "Add to Home Screen" prompt.

{
  "name": "My Store",
  "short_name": "Store",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0d6efd",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Here the key field is display: the standalone value makes the app open without the browser address bar, that is, full screen like a real program. For icons it is recommended to provide at least the 192 and 512 pixel sizes, because different devices use different dimensions. The theme_color field, meanwhile, tints the status bar with your brand colour, reinforcing the feeling of a genuine application.

Service worker — the heart of offline operation

A service worker is a JavaScript script that runs in the background, separate from the page. It sits between the browser and the network and can intercept any request, serving the response from the cache or forwarding it to the network. This very mechanism lets your site keep working even when the connection drops. First you register the service worker, then inside it you describe a caching strategy.

// app.js — registering the service worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => console.log('SW registered', reg.scope))
      .catch(err => console.log('SW error', err));
  });
}

After registration, in the sw.js file we store important pages in the cache and intercept requests. In the example below, the install phase caches the core files, and the fetch phase takes the response first from the cache, falling back to the network only when it is not found.

// sw.js
const CACHE = 'app-v1';
const ASSETS = ['/', '/index.html', '/styles.css', '/app.js'];

self.addEventListener('install', e => {
  e.waitUntil(
    caches.open(CACHE).then(c => c.addAll(ASSETS))
  );
});

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

This strategy is called cache-first: if the file is in the cache it is served instantly, which makes the page open very quickly. Where fresher data is needed, you apply strategies like network-first or stale-while-revalidate. Choosing the strategy to match the site's content is the developer's job, and the perceived speed depends heavily on it.

Push notifications and installation

A PWA can communicate with the user like a native app: through push notifications you can announce a new message, a discount, or an order status. To do this you request permission from the user and show the notification via the service worker. The installation process itself is extremely simple — when the right conditions are met the browser automatically offers an "Add to Home Screen" button, or you can control it yourself.

// Controlling the install prompt
let deferredPrompt;
window.addEventListener('beforeinstallprompt', e => {
  e.preventDefault();
  deferredPrompt = e;
  showInstallButton();
});

installBtn.addEventListener('click', async () => {
  deferredPrompt.prompt();
  const choice = await deferredPrompt.userChoice;
  console.log('Outcome:', choice.outcome);
});

Limitations and when to choose native

A PWA is not the ideal solution for everything. On the iOS platform Apple limits PWA capabilities: push notifications went unsupported for a long time and still carry some restrictions, cache size is capped, and access to certain device sensors is incomplete. If your project requires Bluetooth, advanced camera features, heavy 3D graphics, or deep integration with the system, a native app still remains the stronger choice.

Nevertheless, for most business projects — online stores, news sites, service platforms, and internal tools — a PWA offers the perfect balance. It is cheap, launches quickly, covers all platforms with one codebase, and does not depend on store moderation. When starting a project, first consider building it as a PWA and move to native only when there is a genuine need — in most cases that is the wisest strategy.