Question 1

What is a Progressive Web App (PWA)?

Accepted Answer

A PWA is a web application that uses modern web technologies to deliver app-like experiences. It combines the reach of the web with capabilities of native apps, including offline support, push notifications, and home screen installation.

Question 2

What are the core principles of a PWA?

Accepted Answer

PWAs are built on three core principles: Reliable (works offline and loads instantly), Fast (responds quickly to user interactions with smooth animations), and Engaging (feels like a native app with immersive full-screen experience and push notifications).

Question 3

What is a Service Worker?

Accepted Answer

A Service Worker is a JavaScript file that runs in the background, separate from the main browser thread. It intercepts network requests, manages caching, enables offline functionality, and handles push notifications for PWAs.

Question 4

What is the Service Worker lifecycle?

Accepted Answer

The Service Worker lifecycle has three phases: Install (downloads and caches assets), Activate (cleans up old caches and takes control), and Fetch (intercepts network requests to serve cached content or fetch from network).

Question 5

What is a Web App Manifest?

Accepted Answer

A Web App Manifest is a JSON file that provides metadata about your PWA including name, icons, theme colors, and display mode. It enables the 'Add to Home Screen' prompt and controls how the app appears when installed.

Question 6

What caching strategies are available for PWAs?

Accepted Answer

Common strategies include Cache-First (serve from cache, fallback to network), Network-First (try network, fallback to cache), Stale-While-Revalidate (serve cache immediately while updating in background), and Cache-Only/Network-Only for specific resources.

Question 7

What is the difference between a PWA and a native app?

Accepted Answer

PWAs are web-based, discoverable via search engines, and don't require app store installation. Native apps have deeper device access but require separate codebases. PWAs offer easier updates and lower development costs while native apps provide better performance for intensive tasks.

Question 8

How do you make a PWA work offline?

Accepted Answer

Implement a Service Worker that caches essential assets during installation and intercepts fetch requests to serve cached content when offline. Use appropriate caching strategies for different resource types and provide fallback pages for uncached content.

Question 9

What makes a PWA installable?

Accepted Answer

A PWA is installable when it has a valid Web App Manifest with required fields (name, icons, start_url, display), is served over HTTPS, has a registered Service Worker with a fetch handler, and meets browser-specific engagement heuristics.

Question 10

How do Push Notifications work in PWAs?

Accepted Answer

Push notifications use the Push API and Notification API. The app subscribes to a push service, sends the subscription to your server, which then sends messages through the push service. The Service Worker receives push events and displays notifications.

Question 11

What is the beforeinstallprompt event?

Accepted Answer

The beforeinstallprompt event fires when a PWA meets installability criteria. You can prevent the default prompt, save the event, and trigger it later with a custom install button, giving you control over when and how users are prompted to install.

Question 12

What is the App Shell architecture pattern?

Accepted Answer

App Shell is a design pattern that separates the core application UI (shell) from dynamic content. The shell is cached aggressively for instant loading, while content is loaded dynamically. This provides a native-app-like experience with fast initial loads.

Question 13

What is Background Sync in PWAs?

Accepted Answer

Background Sync allows deferred actions until the user has stable connectivity. Register a sync event when offline, and the Service Worker will fire the sync event when connection is restored, ensuring data is sent even if the user closes the app.

Question 14

What are the Lighthouse PWA audit criteria?

Accepted Answer

Lighthouse checks for HTTPS, Service Worker registration, valid manifest, responsive design, offline capability, fast loading, and proper viewport configuration. It also verifies installability criteria and best practices for performance and accessibility.

Question 15

What is Stale-While-Revalidate caching?

Accepted Answer

Stale-While-Revalidate serves cached content immediately for fast response, then fetches fresh content from the network in the background to update the cache. It balances speed and freshness, ideal for content that can be slightly stale.

PWA Fundamentals(5 questions)

What is a Progressive Web App (PWA)?

What are the core principles of a PWA (reliable, fast, engaging)?

What is the difference between a PWA and a native mobile app?

What are the advantages and disadvantages of PWAs?

What browsers support PWA features?

Web App Manifest(5 questions)

What is a Web App Manifest?

What are the required fields in a manifest.json file?

How do you configure the app's display mode (fullscreen, standalone, minimal-ui)?

What are icons and splash screens in the manifest?

How do you handle different icon sizes for various devices?

Service Workers(6 questions)

What is a Service Worker and how does it work?

What is the Service Worker lifecycle (install, activate, fetch)?

How do you register a Service Worker?

What is the difference between a Service Worker and a Web Worker?

How do you update a Service Worker?

What are the security requirements for Service Workers?

Caching Strategies(6 questions)

What caching strategies are available for PWAs?

What is the Cache-First strategy and when would you use it?

What is the Network-First strategy and when would you use it?

What is the Stale-While-Revalidate strategy?

How do you implement cache versioning and cache busting?

How do you handle cache storage limits?

Offline Functionality(4 questions)

How do you make a PWA work offline?

How do you detect online/offline status?

How do you handle failed network requests gracefully?

What is Background Sync and how does it work?

Push Notifications(4 questions)

How do Push Notifications work in PWAs?

What is the Push API and Notification API?

How do you request permission for push notifications?

How do you handle notification clicks and actions?

Installation and App-like Experience(4 questions)

What makes a PWA installable?

How do you prompt users to install a PWA?

What is the beforeinstallprompt event?

How do you detect if a PWA is running in standalone mode?

Performance and Best Practices(5 questions)

What are the Lighthouse PWA audit criteria?

How do you optimize PWA performance?

What is the App Shell architecture pattern?

How do you handle PWA updates and communicate changes to users?

What are common PWA debugging techniques?