# PWA interview questions — Progressive Web Apps: Offline, Installable Web Apps

Source: https://www.skillbyai.com/en/pwa/pwa-interview-questions

> Prepare for PWA interviews on service worker lifecycle, caching strategies, offline-first design and update handling.

## Core PWA concepts

Common interview topics: What defines a PWA? Service worker lifecycle? Caching strategies? Difference between offline-first and network-first? How to handle service worker updates? What is the app shell model?

## Sample Q&A

Interview answer examples for common PWA questions.

```markdown
**Q: What's the difference between network-first and cache-first?**
A: Network-first fetches from the network first, falling back to cache if offline—ideal for pages that change often. Cache-first serves from cache immediately, checking the network for updates—ideal for static assets.

**Q: How do you handle service worker updates?**
A: Listen to the 'controllerchange' event and the 'message' event in the service worker. Use skipWaiting() to activate immediately or notify users to refresh.

**Q: What's the app shell model?**
A: The app shell is the minimal static shell (HTML, CSS, JS) cached aggressively. Dynamic content loads separately. This pattern enables instant loads and offline-first architecture.
```

Output:

```
Common interview questions and comprehensive answers prepared.
```

## Interview tips

Prepare with: Building a demo PWA, explaining trade-offs in caching strategies, discussing real-world PWA implementations (Twitter Lite, Spotify), and understanding browser compatibility.

Quick check

**Quiz:** What is the main purpose of a service worker in a PWA?

- [ ] Render the user interface
- [ ] Store user authentication tokens
- [ ] Compile TypeScript to JavaScript
- [x] Intercept network requests, enable offline functionality, and handle caching

*Answer:* Intercept network requests, enable offline functionality, and handle caching. Service workers are background scripts that intercept requests, manage caches, and enable offline support.

## Final quiz 1 of 8

Final quiz

**Quiz:** Which file tells browsers how to install and display a PWA?

- [ ] package.json
- [ ] robots.txt
- [x] manifest.json
- [ ] sitemap.xml

*Answer:* manifest.json. The web app manifest holds name, icons, start_url and display mode.

## Final quiz 2 of 8

Final quiz

**Quiz:** Where must a service worker be served from (except localhost)?

- [ ] Any HTTP page
- [ ] A file URL
- [ ] A USB drive
- [x] HTTPS

*Answer:* HTTPS. Service workers require a secure context.

## Final quiz 3 of 8

Final quiz

**Quiz:** Which strategy suits versioned static assets?

- [x] Cache-first
- [ ] Network-only
- [ ] No caching
- [ ] Random

*Answer:* Cache-first. Fingerprinted assets rarely change, so serving from cache is fastest.

## Final quiz 4 of 8

Final quiz

**Quiz:** What does event.waitUntil() do in install?

- [ ] Skips the event
- [x] Keeps the event alive until a promise settles
- [ ] Stops the worker
- [ ] Clears the cache

*Answer:* Keeps the event alive until a promise settles. It ensures caching work finishes before the event ends.

## Final quiz 5 of 8

Final quiz

**Quiz:** Which API stores large structured offline data?

- [ ] localStorage only
- [ ] Cookies
- [x] IndexedDB
- [ ] window.name

*Answer:* IndexedDB. IndexedDB handles structured, larger datasets asynchronously.

## Final quiz 6 of 8

Final quiz

**Quiz:** When should you ask for push permission?

- [ ] Immediately on page load
- [ ] Never
- [ ] On every click
- [x] After the user shows interest, in context

*Answer:* After the user shows interest, in context. Contextual prompts get far higher acceptance.

## Final quiz 7 of 8

Final quiz

**Quiz:** Which header setting helps users get a new service worker quickly?

- [x] Cache-Control: no-cache on sw.js
- [ ] Cache-Control: max-age=31536000 on sw.js
- [ ] Expires: never
- [ ] Set-Cookie

*Answer:* Cache-Control: no-cache on sw.js. A cached sw.js can delay updates.

## Final quiz 8 of 8

Final quiz

**Quiz:** What is feature detection for PWAs?

- [ ] Detecting viruses
- [x] Checking an API exists before using it
- [ ] Compressing images
- [ ] Installing plugins

*Answer:* Checking an API exists before using it. e.g. 'serviceWorker' in navigator keeps older browsers working.