02 / 03

List the key concepts of Progressive Web Apps:

Progressive Enhancement:
  1. 1

    PWAs work for all users, regardless of their device or browser.

  2. 2

    They provide a baseline experience and progressively enhance it for browsers that support advanced features.

Responsive Design
  1. 1

    PWAs are designed to work seamlessly across different screen sizes and orientations.

App-like Experience
  1. 1

    PWAs provide a smooth and app-like experience, including smooth animations, gestures, and interactions.

Offline Access
  1. 1

    PWAs can function even when the user is offline or has limited connectivity.

  2. 2

    They cache content and data, allowing users to access the app even without an internet connection.

Push Notifications
  1. 1

    PWAs can send push notifications to users, keeping them engaged and informed even when the app is not open.

Fast Loading
  1. 1

    PWAs load quickly, ensuring a snappy experience for users, reducing bounce rates, and improving engagement.

Installable
  1. 1

    Users can add PWAs to their home screen or app launcher, giving them easy access without going through an app store.

Easier Updates
  1. 1

    Updates can be .....

Difficulty: 6/10
Topics: service-workers, caching-strategies, installability

Scenario Questions

0-2 years experience
  1. 1

    You're adding a web app manifest to make our internal dashboard installable. What fields are required, and what happens if you forget the icons array?

  2. 2

    A user reports the app shows stale data after deploying a new version. Walk me through how you'd verify the service worker is actually updating.

  3. 3

    How would you cache the app shell (HTML, CSS, JS) so the dashboard loads instantly on repeat visits, even on a flaky connection?

2-5 years experience
  1. 1

    Our product team wants offline read access to the last 50 viewed articles in the news app. Which cache strategy would you pick for the article content vs. the article list API, and why?

  2. 2

    During QA, the service worker throws 'Registration failed: Service worker script evaluation failed' only on Safari. What's your debugging process?

  3. 3

    We're seeing 'QuotaExceededError' in production for users with heavy media caches. How do you implement cache expiration without a backend cleanup job?

5-8 years experience
  1. 1

    Design an offline-first sync architecture for a field-service app where technicians create work orders offline and sync when back online. How do you handle conflicts when the same record is edited on two devices?

  2. 2

    The marketing team wants push notifications for price-drop alerts. Outline the end-to-end flow from VAPID key generation to handling notificationclick on iOS Safari 16.4+.

  3. 3

    Our PWA bundle is 2.3MB gzipped. Propose a loading strategy using service workers that gets interactive <2s on 3G without sacrificing freshness for authenticated API calls.

8+ years experience
  1. 1

    We're migrating a 10-year-old jQuery monolith to a PWA incrementally — new React micro-frontends served alongside legacy pages. How do you scope service workers to avoid caching conflicts and ensure smooth navigation between old and new?

  2. 2

    Three product teams share a single PWA shell but need independent deploy cycles for their features. Design a service worker update strategy that prevents one team's broken deploy from bricking the whole app.

  3. 3

    Apple's ITP and storage eviction policies keep changing. How do you build a long-term offline data strategy that survives Safari's 7-day cap without native fallback?

Follow-up Questions

  • How do you handle service worker updates without breaking active tabs?
  • What happens when the browser evicts your cache under storage pressure?
  • How do you test offline behavior in CI/CD?