Progressive Web Apps (PWA) with Angular
5 questions found
What is a Progressive Web App, and how do you add PWA support to an existing Angular project?
Beginner
A Progressive Web App is a website that behaves more like a native app, capable of working offline, being installed on a device's home screen, and loading quickly even on unreliable networks. Angular provides an official schematic that adds everything needed for basic PWA support with a single command.
ng add @angular/pwa
// This automatically adds a service worker, a web manifest file,
// and the necessary configuration to make your app installable and work offline
Real-world example
A news website adds PWA support to their existing Angular app with a single CLI command, letting readers install it on their phone's home screen and continue reading previously loaded articles even without an internet connection.
Common follow-ups: What files does the ng add @angular/pwa command actually create or modify?;Does adding PWA support require rewriting any existing application code?
Build
Environments & Deployment;Angular CLI & Project Structure
What is a service worker, and what role does it play in making an Angular app work offline?
Intermediate
A service worker is a script that runs separately from your app in the background, intercepting network requests and deciding whether to serve a cached response or fetch a fresh one from the network. Angular's built in service worker automatically caches your app's files, letting the app continue loading and functioning even without an internet connection.
// ngsw-config.json controls what the service worker caches
{
"assetGroups": [
{ "name": "app", "installMode": "prefetch", "resources": { "files": ["/*.js", "/*.css"] } }
]
}
Real-world example
A field service app used by technicians in areas with poor cell coverage continues to load and display previously fetched job details even when the technician's connection drops entirely, thanks to the Angular service worker caching those resources.
Common follow-ups: How does the service worker decide when to update its cache with a newer version of the app?;What is the difference between the prefetch and lazy installMode options?
Build
Environments & Deployment;Performance & Lazy Loading
What is a web app manifest file, and what does it control for a Progressive Web App?
Intermediate
The manifest.webmanifest file describes metadata about your app, such as its name, icons, theme color, and how it should appear when installed on a device's home screen, letting browsers know how to present your app as if it were a native application.
// manifest.webmanifest
{
"name": "My Shopping App",
"short_name": "Shop",
"theme_color": "#1976d2",
"icons": [{ "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }]
}
Real-world example
A shopping app's manifest file defines a custom app icon and theme color, so when a user installs it on their phone's home screen, it looks and feels just like any other native app they might have installed.
Common follow-ups: What is the minimum set of properties a manifest file needs to make an app installable?;How would you test whether your manifest file is configured correctly?
Angular CLI & Project Structure;Build
Environments & Deployment
How would you notify users when a new version of your Angular PWA is available and prompt them to refresh?
Advanced
Angular's SwUpdate service lets you subscribe to version update events, detecting when the service worker has downloaded a new version of the app in the background, letting you show a friendly notification prompting the user to reload and get the latest version.
import { SwUpdate } from '@angular/service-worker';
constructor(private swUpdate: SwUpdate) {
this.swUpdate.versionUpdates.subscribe((event) => {
if (event.type === 'VERSION_READY') {
if (confirm('A new version is available, reload now?')) {
window.location.reload();
}
}
});
}
Real-world example
A news app shows a small banner asking users to refresh whenever a new version has finished downloading in the background, ensuring readers eventually see the latest articles and fixes without an abrupt, unexpected reload.
Common follow-ups: What happens to users who never manually refresh after seeing this prompt?;How would you automatically reload the app after a certain period instead of waiting for user action?
Build
Environments & Deployment;RxJS & Observables
Why might a company choose to build a Progressive Web App instead of a separate native mobile app?
Beginner
A Progressive Web App can be built and maintained as a single codebase, deployed instantly through a normal website deployment rather than through app store approval processes, and still provides many native like features, such as offline support and home screen installation, making it a faster and often cheaper option for many businesses.
// A single Angular codebase serves both the regular website and the installable PWA experience
// No separate native app codebase or app store submission process needed
Real-world example
A small restaurant chain builds a PWA for online ordering instead of separate iOS and Android apps, letting them update the ordering experience instantly for all customers without waiting for app store review each time.
Common follow-ups: What native mobile features are still not fully available to a PWA compared to a true native app?;When would a business still need a genuine native app despite these PWA advantages?
Build
Environments & Deployment;Angular Elements (Web Components)