# Progressive Web Apps: Manifest, Install, and Offline-First

Source: https://www.techinterview.org/post/3233475175/progressive-web-apps-manifest-install/
Updated: 2026-06-30 · techinterview.org

Progressive Web Apps (PWAs) hit their decade mark in 2025. The 2026 reality: PWAs are real, useful, and underused. The interview probes whether you understand the technical components, the platform realities, and when a PWA is the right choice over a native app.

## What makes a PWA

Three core components:

- **Web App Manifest:** declares the app metadata (name, icons, theme color, display mode)

- **Service Worker:** for offline support and background sync

- **HTTPS:** required (except localhost)

Together: a website that can be installed, run offline, and feel app-like.

## The manifest

JSON file at `/manifest.json` linked from HTML:


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


## Display modes

- **browser:** opens in browser tab (basically not a PWA)

- **standalone:** own window, no browser chrome — feels native

- **fullscreen:** covers status bar, like games

- **minimal-ui:** minimal browser controls

## Install prompts

Browsers show "Install" prompts on engaged users:

- Manifest valid

- Service Worker registered

- HTTPS

- User has visited multiple times or spent significant time

You can trigger custom install UI via the `beforeinstallprompt` event.

## Offline-first patterns

Strategies enabled by Service Worker:

- **App Shell:** cache the UI shell so the app loads offline; data fetched as available

- **Offline page:** show a custom page when offline and resource not cached

- **Background sync:** queue user actions; sync when online

- **Read-only offline:** last-known content available; writes disabled

## iOS PWA quirks

Safari has historically been the weakest PWA browser:

- "Add to Home Screen" install path; no install prompt

- Service Worker support is partial

- Background sync not supported

- Push notifications added in iOS 16.4 (2023) but with quirks

Modern iOS PWAs work but are second-class citizens compared to Android.

## Android PWA support

Strong:

- Install prompt

- Service Worker fully supported

- Background sync, push, advanced features

- Trusted Web Activity (TWA) for Play Store distribution

## Push notifications

PWA push:

- User grants permission

- Service Worker subscribes to push service

- Server sends push via Web Push protocol (VAPID)

- Service Worker receives and shows notification

Works on desktop and Android. iOS support exists but with limitations.

## When to choose PWA over native

PWA wins when:

- You already have a web app and want mobile UX

- App store distribution is undesirable

- Cross-platform (one codebase) matters

- Update velocity matters (no app store review)

Native wins when:

- You need deep platform integration (HealthKit, ARKit, deep iOS / Android features)

- Performance must match native

- App store presence is a marketing channel

- iOS users are critical (PWA on iOS still has gaps)

## Hybrid approach

Some apps wrap a PWA in a native shell:

- Capacitor / Cordova for cross-platform native

- Tauri / Electron for desktop

- TWA (Trusted Web Activity) on Android for Play Store distribution

Trade-off: development simplicity vs full native fidelity.

## Common mistakes

- Manifest missing or invalid (browser does not show install)

- Service Worker caches old code; users stuck on stale version

- Offline UX is broken (white screen instead of meaningful fallback)

- Forgetting iOS-specific testing

## Frequently Asked Questions

### Are PWAs in the App Store?

Apple has historically resisted; Google's TWA puts PWAs in Play Store. Microsoft Store accepts PWAs.

### How do I detect if my app is installed as a PWA?

Check display-mode media query: `matchMedia('(display-mode: standalone)')`. Returns true for installed PWAs.

### What is the difference between PWA and SPA?

SPA = Single Page App (architecture). PWA = Progressive Web App (capabilities). They overlap; not the same thing. A SPA can be a PWA; a PWA can be multi-page.