Let’s assume you have an Angular 21 app up and running in the browser and you want it to have the same speed and feel as a fast, installable mobile app, then the next step for you is to make your Angular app a PWA. In this tutorial on creating an Angular 21 progressive web app, you will learn just how quickly you can implement offline support, app-like functionality, and improved performance without having to start from scratch.
As more and more people are accessing the web from spotty mobile networks in cities such as Toronto, London, Warsaw, or small towns across the US and Canada, then a smooth and reliable experience is a definite plus. This tutorial will walk you through how to make an Angular 21 app PWA-capable with a simple, step-by-step process.
What is a Progressive Web App (PWA)?
A Progressive Web App is a web application that behaves like a native app while still running in the browser. It can work offline, load quickly, send push notifications and install on the user’s home screen, all powered by standard web technologies.
When you convert an Angular 21 app to a Progressive Web App, you keep your existing code and add a few key features: a web app manifest, a service worker and proper caching strategies. Together they reduce data usage, improve speed and make the app feel more trustworthy.
Why do developers use PWAs?
- PWA load fast, even on slow or unstable networks.
- They work offline or with limited connectivity.
- Users can install them on home screens without app stores.
- PWA boost engagement with push notifications and icons.
- They reduce development cost by reusing one codebase for web and mobile.
- They can improve SEO and Core Web Vitals when optimised properly.
Converting Angular App into PWA
To make this guide concrete, imagine a small Angular 21 shopping list app. Users add items like bread, milk and fresh vegetables, then tick them off while shopping.
Right now it works only when the user has a solid internet connection. If the connection drops in the supermarket or on the tram, the app becomes useless. Your goal is to turn this Angular 21 app into a PWA so it still works offline, loads fast and can be installed on a phone, just like a native list app.
Add PWA support with Angular CLI
The quickest way to turn an Angular 21 app into PWA is to use the built‑in CLI schematic. From your project root, run:
ng add @angular/pwaIt will update your project configuration, adds web menifest and generate default icons and assets.
Customize the Manifest
The manifest tells the browser how your PWA should look and behave when the user installs it. Open the generated manifest file, usually src/manifest.webmanifest file.
{
"name": "Codewolfy",
"short_name": "CW",
"theme_color": "#6f4e37",
"background_color": "#fafafa",
"display": "standalone",
"scope": "./",
"start_url": "./",
"icons": [
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable any"
}
]
}Verify the Service Worker
The command creates a configuration file for the service worker. This script acts as a traffic controller. It saves the menu images, fonts, and the main page to the device’s cache.
When a customer walks into your shop and loses signal, the service worker intercepts the request. Instead of failing, it serves the menu directly from the phone’s storage. The customer sees the latte options instantly, regardless of the network status.
Test the PWA locally
To verify your work, you need to serve the application. Service workers require a secure environment or localhost to function.
npx http-server dist/your-project-nameOpen your browser’s developer tools and navigate to the Application tab. Toggle the Offline mode checkbox. Refresh the page. If your data still loads perfectly, you successfully managed to turn angular app into pwa. It will show you option to install the PWA.
Conclusion
The potential of upgrading a regular web application project to an Angular PWA is enormous and requires little effort. You will have the benefits of a mobile app, such as working offline and adding to the home screen, without the overhead of a native app.
Whether you are running a worldwide e-commerce business or a simple local application like our coffee menu, the fact that you can work offline will make you stand out. Follow this tutorial to convert your Angular app to a Progressive Web App (PWA) today and give your users the fast and reliable experience they deserve.