Real-World PWA Interview Questions Challenge Quiz Quiz

Assess your understanding of Progressive Web App interview topics with scenario-based questions focusing on service workers, offline strategies, manifest requirements, and best practices for real-world PWA implementation. This quiz is designed for candidates and developers seeking to validate their PWA knowledge with practical, industry-relevant challenges.

1. Service Worker Registration Timing

   In a PWA that displays critical data on the homepage, when should the service worker registration code ideally run to prevent blocking the initial page load?

   1. After window initialization but before DOMContentLoaded
   2. Immediately before any DOM content is loaded
   3. During the data-fetching process
   4. After the 'load' event fires

   Explanation: Registering the service worker after the 'load' event ensures it does not delay critical rendering or data display on the homepage. Registering before the DOM is loaded or during data fetching may cause performance issues and block important resources. While registering after window initialization appears similar, using the specific 'load' event is best practice to guarantee all resources are available. The correct answer prioritizes user experience and performance.

2. PWA Manifest Properties Scenario

   A client complains that their installed PWA icon appears with a generic symbol instead of their custom logo on the device's home screen. Which manifest property is most likely missing or misconfigured?

   1. background_color
   2. display
   3. theme_color
   4. icons

   Explanation: The 'icons' property provides the app's logo in various sizes to be used by the device when adding the PWA to the home screen. Without correctly specified 'icons', the device defaults to a generic symbol. The 'display' property controls the app's appearance mode, such as 'standalone' or 'fullscreen', but not the icon. 'theme_color' and 'background_color' affect the app's color scheme but not the icon itself.

3. Offline Strategy for Dynamic Content

   In a weather PWA that frequently updates data, which caching strategy should be used for API requests to ensure users see recent information while still supporting offline access?

   1. Cache first, update in background
   2. Stale-while-revalidate
   3. Cache only
   4. Network first, fallback to cache

   Explanation: Using a 'network first, fallback to cache' strategy fetches the freshest data from the network, then falls back to cached data if offline. 'Cache only' would never update information and could display outdated weather. 'Cache first, update in background' may lead to stale content on initial load, and 'stale-while-revalidate' presents old data before updating, which is not ideal when immediate accuracy is crucial. 'Network first' best balances recency and offline support.

4. Add to Home Screen Criteria

   What must be true for a web app to prompt 'Add to Home Screen' on mobile devices, assuming HTTPS is already used?

   1. It loads all assets from a content delivery network
   2. It includes at least two install event listeners
   3. It uses a custom application shell architecture
   4. A valid web app manifest and active service worker are present

   Explanation: For 'Add to Home Screen' prompts to appear, a valid manifest and an active service worker must both be present, alongside HTTPS. An application shell architecture improves performance but is not required for installability. Hosting assets on a CDN helps with speed but has no effect on install prompts. Install event listeners are related to handling install logic, not eligibility criteria.

5. Push Notification Permissions

   During a PWA onboarding process, when is it recommended to request push notification permissions for the best user experience?

   1. After the user performs a meaningful action or values the app
   2. Immediately upon the user's first visit to the app
   3. Before any content is displayed
   4. As part of the install prompt sequence

   Explanation: Requesting push notification permissions after the user engages meaningfully increases the likelihood of a positive response. Immediately requesting permission on first visit or before content is shown can annoy users and decrease acceptance rates. Including the permission request during the install prompt sequence is not standard practice and may confuse users or feel intrusive. Delaying the request demonstrates good user respect and improves engagement.