Back
Web Fundamentals

PWA Fundamentals: Manifest, Installability & Offline UX

Web Fundamentals
Build & Deployment: Monorepo, CI/CD, Strategies & Release SafetyState Management: Choosing the Right SolutionRedux: Predictable State Container (RTK + RTK Query)React Query (TanStack Query): Server State CachingData Fetching Patterns: REST, GraphQL, tRPC & Real-timeGraphQL Fundamentals for Frontend: Shape, Caching, and TradeoffsgRPC-Web Fundamentals: Browser Constraints and Proxy ModelCaching Strategies: Client, Server & EdgeData Normalization: Organizing State for PerformanceAPI Design Best Practices: Pagination, Errors, Versioning & Type SafetyAPI Versioning Strategies for Frontend CompatibilityPagination: Offset vs Cursor-BasedRate Limiting & API Resilience: Retries, Backoff, Jitter, IdempotencyHow Frontend Developers Can Handle Millions of API Requests Without Crashing EverythingBrowser Storage: Cookies, SessionStorage, LocalStorage, IndexedDBReal-time Communication: WebSockets, SSE & PollingWebRTC: Real-Time Communication in the BrowserCore Web Vitals: LCP, INP & CLSPerformance Optimization Trade-offsCritical Resource Prioritization: Optimize Loading OrderCode Splitting: Optimize Bundle Size with Dynamic ImportsTree Shaking: Eliminate Dead Code from Your BundleLazy Loading: Load Resources On-DemandResource Hints: Preload, Prefetch & PreconnectText Compression: Gzip and BrotliImage & Video Optimization: Modern Formats & TechniquesAdaptive Loading: Optimize for Device & NetworkList Virtualization: Render Large Lists EfficientlyWeb Workers vs Main Thread: Offloading Heavy WorkMemory Leaks in Frontend Apps: Detection & PreventionManaging Third-Party Scripts: Optimization StrategiesHow CDNs Work: Edge Delivery, Caching & PerformanceHTTP Caching Deep Dive: Cache-Control, ETag & RevalidationService Workers & Offline Strategy: Cache First, Network First & Update LifecyclePWA Fundamentals: Manifest, Installability & Offline UXCritical Rendering PathScript Loading: async vs deferEvent Loop: Understanding JavaScript Execution ModelJavaScript Module Systems: CJS vs ESM vs UMDDynamic Module Loading: import() FunctionImport on Interaction: Load When User InteractsImport on Visibility: Lazy Loading with IntersectionObserverBrowser Rendering Pipeline & Layout ThrashingRendering Strategies: CSR vs SSR vs SSG vs ISRStreaming SSR: Progressive HTML StreamingIslands Architecture: Independent Component HydrationReact Server Components: Zero-JS Server RenderingFramework Reactivity: React, Vue, Svelte & SolidHTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC) for Frontend PerformanceDNS Resolution: Path, TTL, Caching & Frontend ImpactCross-Site Scripting (XSS) AttacksCross-Site Request Forgery (CSRF) AttacksCORS Explained: Cross-Origin Resource SharingCORS Preflight in Practice: Credentials, Simple Requests & MisconfigurationsContent Security Policy (CSP)Why is HTTPS Secure? Understanding TLS/SSLAuthorization Best PracticesCookie Security & Session Hardening: SameSite, HttpOnly, Secure
mediumPerformance

PWA Fundamentals: Manifest, Installability & Offline UX

TL;DRManifest defines install identity. Service Worker powers offline + caching. Offline UX is a deliberate product contract.
High Signal
Google
Meta
Netflix
Agoda
30-Second Answerstart every interview with this

Progressive Web Apps combine a Web App Manifest for installability, a Service Worker for offline capability and caching, and thoughtful UX design. Success depends on clear boundaries between static shell, dynamic data, and safe update behavior.

The manifest is the app icon and home screen metadata. The Service Worker is the background engine that makes it work offline and fast. The real challenge is designing an experience that feels native while gracefully handling network changes and version updates.

Web App Manifest (Identity + Install)
Service Worker (Caching + Offline)
Offline UX Contract (Graceful degradation)
Safe Update Lifecycle

1Web App Manifest

Defines how the app appears when installed: name, icons, display mode (standalone/minimal-ui), start_url, theme_color, etc.

manifest.jsonjson
{
  "name": "My App",
  "short_name": "App",
  "icons": [{ "src": "icon-192.png", "sizes": "192x192" }],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#000000"
}

2Installability Criteria

Requires HTTPS, a valid manifest, and a service worker controlling the page. Install prompts vary by browser and platform.

3Offline UX & Caching Strategy

Separate app shell (aggressively cached) from dynamic data (network-first or stale-while-revalidate). Design clear offline states and graceful degradation.

4Update Lifecycle

Manage service worker activation carefully to avoid stale shells. Use versioned caches and consider user prompts for updates.

PropertyApp ShellDynamic Data
CachingAggressive (cache-first)Network-first or stale-while-revalidate
Use CaseStatic UI, icons, fontsFeeds, user data, prices
FreshnessVersioned assetsBusiness dependent

App Shell

Caching

Aggressive (cache-first)

Use Case

Static UI, icons, fonts

Freshness

Versioned assets

Dynamic Data

Caching

Network-first or stale-while-revalidate

Use Case

Feeds, user data, prices

Freshness

Business dependent

Common questions

  • ›“What makes a web app installable as a PWA?”
  • ›“How do you design good offline experiences?”
  • ›“Explain the service worker update lifecycle.”
  • ›“How do you separate caching for shell vs dynamic data?”

What interviewers look for

  • Understanding of manifest + service worker roles
  • Product thinking around offline UX contracts
  • Awareness of update lifecycle risks
  • Separation of static shell vs dynamic data

Short answer (60 sec)

A PWA needs a Web App Manifest for install metadata, a Service Worker for offline/caching behavior, and deliberate offline UX design. Cache the app shell aggressively while treating dynamic data with appropriate freshness rules.

Detailed answer (senior level)

The manifest controls install appearance and behavior. The Service Worker intercepts requests for caching and offline support. Offline UX should clearly communicate what works without network. The hardest part is safe updates — version caches, clean old ones, and avoid trapping users on stale shells. Strong answers treat PWA as a reliability contract, not just a feature.

  • Caching everything aggressively (stale content after deploys)
  • Ignoring offline UX design (blank screens on disconnect)
  • Poor update lifecycle leading to mixed versions
  • Not separating shell from dynamic data
  • Assuming all features must work fully offline
Key Takeaways
  • ✓Manifest defines install identity and appearance
  • ✓Service Worker powers offline capability and caching
  • ✓Separate app shell (cache-first) from dynamic data
  • ✓Design intentional offline experiences and graceful degradation
  • ✓Manage service worker updates carefully to avoid stale clients
  • ✓PWA quality is about trust and reliability, not just install buttons
  • ✓Test offline flows and update scenarios in real conditions
Previous TopicService Workers & Offline Strategy: Cache First, Network First & Update LifecycleNext Topic Critical Rendering Path

On this page