How to make Angular app a PWA
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Converting Angular applications to Progressive Web Apps provides an app-like experience with offline support, home screen installation, and push notifications. As the creator of CoreUI with over 11 years of Angular development experience since 2014, I’ve built PWAs for numerous enterprise clients. The most effective solution is to use Angular’s PWA schematic which adds all necessary files and configurations. This approach transforms your app into a fully-featured PWA with minimal effort.
Use Angular PWA schematic to convert your app to a Progressive Web App.
# Add PWA support to existing Angular app
ng add @angular/pwa
# The command adds:
# - Service worker for offline support
# - Web app manifest for installation
# - App icons in multiple sizes
# - Meta tags and theme colors
// manifest.webmanifest
{
"name": "My Angular App",
"short_name": "MyApp",
"theme_color": "#1976d2",
"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-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable any"
}
]
}
// app.component.ts - Handle updates
import { SwUpdate } from '@angular/service-worker'
export class AppComponent {
constructor(private swUpdate: SwUpdate) {
if (this.swUpdate.isEnabled) {
this.swUpdate.versionUpdates.subscribe(event => {
if (event.type === 'VERSION_READY') {
if (confirm('New version available. Load it?')) {
window.location.reload()
}
}
})
}
}
}
The PWA schematic configures the web app manifest which defines how the app appears when installed. The manifest includes name, icons, theme colors, and display mode. Service workers provide offline support and caching. The SwUpdate service detects new versions and prompts users to update. Users can install the PWA from the browser to their home screen.
Best Practice Note
This is the same PWA setup we use for CoreUI Angular applications to provide native app experiences. Customize manifest.webmanifest with your branding, app name, and colors. Create proper icons in all required sizes for different devices. Test installation on both mobile and desktop browsers to ensure consistent experience.
