Learn PWA vocabulary: manifest.json, installability, Add to Home Screen, offline mode, push notifications, and how to explain "the app works offline because".
0 / 11 completed
1 / 11
The manifest.json file in a PWA is used to:
The Web App Manifest tells the browser how to present the installed app. Key fields: name/short_name (used on the home screen), icons (at least 192px and 512px), start_url (URL to open on launch), display (standalone removes browser chrome). It is linked via <link rel="manifest" href="/manifest.webmanifest">.
2 / 11
For a PWA to be 'installable' (eligible for Add to Home Screen), the minimum browser requirements are:
Chrome's installability checklist: HTTPS (localhost is exempt), a service worker that handles fetch events, and a manifest with name or short_name, a 192px+ maskable icon, a valid start_url, and display set to standalone, fullscreen, or minimal-ui. Meeting these fires the beforeinstallprompt event.
3 / 11
When a user taps 'Add to Home Screen' on a PWA, what happens?
A2HS installs the PWA as an app-like shortcut using the manifest metadata. On Android it creates a launcher icon; on iOS (via 'Add to Home Screen' in Safari) it uses the apple-touch-icon. The app opens in standalone mode — no browser UI — giving a native-app feel.
4 / 11
A developer explains: 'The app works offline because the service worker intercepts all fetch requests.' This means:
This is the standard offline-capable explanation. The service worker acts as a network proxy: on a cache-first or cache-falling-back-to-network strategy, it returns the cached page shell and API data when navigator.onLine is false, letting the app render and function without connectivity.
5 / 11
PWA push notifications are delivered via:
Push notifications use two browser APIs: Push API (subscribe via registration.pushManager.subscribe() to get an endpoint; server POSTs to that endpoint via a push service) and Notifications API (service worker listens for the push event and calls self.registration.showNotification()). User permission is required. The tab does not need to be open.
6 / 11
Sarah (Senior Developer) comments on a PR draft: 'The service worker's cacheFirst strategy is great for frequently accessed assets, but we should also consider using networkOnly for less critical data to minimize network requests. It's important to think about the user experience and prioritize efficient loading.' What does Sarah primarily mean when she suggests using networkOnly?
Sarah is referring to caching strategies within the service worker. cacheFirst means the service worker retrieves data from its local cache before attempting a network request. networkOnly instructs the service worker to *only* fetch data from the network if it's not already present in the cache, optimizing performance and reducing bandwidth usage. Option A is incorrect as it contradicts the core function of a caching strategy.
7 / 11
Mark (Frontend Engineer) sends a Slack message: 'Just deployed the PWA build with a new manifest.json file. I've added support for push notifications and configured the display mode to 'standalone'. The theme_color is set to #007bff.' What is the primary purpose of the theme_color property within the manifest.json file?
The manifest.json file is crucial for PWA functionality. The theme_color property dictates the color used in the app's icon displayed on the browser tab and within the Add to Home Screen preview – it's a visual branding element. Option B correctly describes its function: ensuring UI consistency across devices, while options C & D relate to other manifest properties (responsive design and offline capabilities respectively).
8 / 11
David (Product Manager) asks you to prioritize adding PWA support to the new feature. He explains that it's crucial for 'driving engagement' and 'reducing friction' for users on mobile. Which of the following best describes a key benefit of a PWA in this context?
While offline functionality (B) is important for PWAs, David's focus on 'driving engagement' points to the core benefit: using push notifications (D). The manifest file allows control of the app's display (C), but doesn't directly address user engagement. Automatic updates (A) are a standard feature of many apps and not specific to PWAs.
9 / 11
Maria (Frontend Engineer) is reviewing a PR that implements a service worker. She notes the following code: `cacheFirst('logo.png')`. What does this strategy primarily aim to achieve?
The `cacheFirst` strategy dictates that the service worker will always attempt to retrieve the asset from its cache before resorting to fetching it from the network. This is key for performance and offline availability. Option B describes a different function (aggressive caching removal), while options C and D are not direct outcomes of this specific strategy.
10 / 11
John, a junior developer, is explaining the benefits of using a PWA to his team. He says, 'We can use the service worker to store all our assets locally and improve the app's performance.' Which of the following best describes what John is referring to?
John is correctly identifying the core function of a service worker: caching. The service worker intercepts network requests to store assets locally, providing faster loading times and enabling offline access. Options A, C, and D describe other related but distinct PWA features – updates, dynamic content generation, and secure data transmission.
11 / 11
Mark, a frontend engineer, is reviewing a PR that implements a PWA. He comments: 'The `displayMode` is set to 'standalone', but I'm concerned about the user experience on smaller screens. Should we consider adding some responsive design principles?'. What does setting the displayMode to 'standalone' primarily achieve in a PWA?
Setting `displayMode` to 'standalone' creates a dedicated PWA window that doesn't interact with the browser's address bar or other tabs. This provides a more immersive experience, but as Mark rightly points out, it's crucial to consider responsive design principles to adapt the UI for different screen sizes.
This exercise, "Progressive Web App (PWA) Vocabulary", tests your understanding of wasm browser vocabulary and phrasing through 11 multiple-choice questions drawn from real workplace scenarios.
Is this exercise free to use?
Yes. Every exercise on CoderSlingo, including this one, is completely free — no account, sign-up, or payment required.
How many questions does this exercise have?
This exercise has 11 questions. Each one presents a realistic sentence or scenario with multiple-choice options and an explanation once you answer.
What happens after I answer a question?
You'll see immediate feedback showing whether your answer was correct, along with a short explanation of why — then a button to move to the next question.
Can I retry the exercise if I get questions wrong?
Yes. Once you reach the results screen, click "Try again" to reset your answers and go through the exercise from the start as many times as you like.
Do I need to create an account to take this exercise?
No account is needed. Your answers are scored in your browser during the session — nothing is saved to a server, so you can jump straight in.
Is my progress saved if I leave the page?
No — progress within an exercise resets if you navigate away or reload. Each exercise is short enough to complete in a few minutes in one sitting.
Who is this Wasm Browser exercise for?
It's designed for IT professionals and learners who want to sound natural discussing wasm browser topics in English — useful for meetings, documentation, interviews, and day-to-day communication with English-speaking teams.
How is this different from reading a glossary or blog article?
Exercises like this one are active recall drills — you have to choose the correct term or phrasing yourself, which builds retention faster than passively reading a definition.
Where can I find more Wasm Browser exercises?
Browse the full Wasm Browser exercises hub for more practice, or explore other exercise categories covering vocabulary, grammar, interviews, and workplace communication.