Building Progressive Web Apps (PWAs) with Angular: A Complete Guide

In today’s fast-paced digital world, users expect web apps to be fast, reliable, and engaging—no matter their device or network condition. This is where Progressive Web Apps (PWAs) shine.

Angular, with its strong ecosystem and built-in PWA support, makes it simple to build applications that feel like native mobile apps while keeping the reach of the web.

In this blog, we’ll explore:

What PWAs are and why they matter
Real-world examples of successful PWAs
How to create a PWA with Angular (step by step)
Pros and cons of PWAs
Best practices for building a scalable, SEO-friendly Angular PWA

🚀 What is a Progressive Web App (PWA)?

A Progressive Web App (PWA) is a web application that uses modern web capabilities to deliver an app-like experience to users. PWAs can be installed on a user’s device, work offline, and even send push notifications—all without needing app stores.

Key features of a PWA include:

Offline availability (via Service Workers)
Add to Home Screen installation
Fast loading & caching
Responsive and mobile-friendly design
Push notifications and background sync

🌍 Real-World Examples of PWAs

Some of the biggest brands use PWAs to boost engagement and performance:

Twitter Lite → Reduced data consumption by 70% while increasing engagement.
Flipkart Lite → Increased re-engagement by 40% compared to their mobile website.
Starbucks → Their PWA works offline, allowing users to browse menu items without internet.

These examples prove that PWAs are not just a trend—they’re a proven strategy for growth.

🛠 Creating a PWA in Angular

Angular provides a ready-made package to turn your web app into a PWA. Let’s go step by step.

Step 1: Add Angular PWA package

ng add @angular/pwa

This command:

Registers a service worker for caching and offline support
Adds a manifest file for app install experience
Includes app icons for mobile and desktop
Step 2: Configure manifest.webmanifest

This file defines how your app appears when installed:

{
  "name": "My Angular PWA",
  "short_name": "AngularPWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1976d2",
  "icons": [
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

Step 3: Customize Service Worker

Angular’s service worker (ngsw-config.json) lets you define caching strategies:

{
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ]
      }
    }
  ]
}

installMode: prefetch → Cache during installation (great for core files).
installMode: lazy → Cache on demand (better for large assets).
Step 4: Build for Production

ng build --prod

Step 5: Serve with HTTPS

PWAs require HTTPS (except localhost). You can use Firebase Hosting, Netlify, Vercel, or AWS S3 + CloudFront for deployment.

✅ Pros of PWAs in Angular
Offline Support – Works seamlessly even without internet.
Native-like Experience – Installable on mobile, responsive design, smooth transitions.
Cross-Platform – Single codebase for web, Android, iOS, and desktop.
Faster Loading – Service workers cache static assets, reducing load time.
SEO Friendly – Unlike native apps, PWAs are discoverable via search engines.
Lower Development Cost – No need to build separate apps for Android/iOS.

⚠️ Cons of PWAs

Limited iOS Support – Some PWA features like push notifications may not fully work on iOS.
Performance Limitations – Native apps still outperform PWAs for heavy 3D/AR/VR apps.
No App Store Visibility (optional) – Unless published as a Trusted Web Activity (TWA), PWAs don’t appear on Play Store/App Store by default.
Hardware Access – Limited access to device APIs compared to native apps.
Large Storage Constraints – Browsers may restrict storage compared to native apps.

🏆 Best Practices for Angular PWAs

Use Lazy Loading to reduce initial bundle size.
Precache critical assets and use runtime caching for APIs.
Optimize images → Use WebP/AVIF for faster loading.
Implement background sync → Queue offline actions (e.g., saving forms).
Test Lighthouse PWA Score (Chrome DevTools → Audits → PWA).
Use Angular Universal (SSR) → Boost SEO with server-side rendering.
Secure APIs with HTTPS → Ensure offline data sync is safe.
Keep app install prompt simple → Encourage users to add to home screen.
Regularly update service workers → Prevent users from being stuck with outdated cached versions.
🔮 Final Thoughts

Progressive Web Apps are no longer just a trend—they are becoming the future of web experiences. With Angular’s strong support for PWAs, you can quickly build apps that are fast, installable, offline-ready, and SEO friendly.

If you’re working on an Angular project today, turning it into a PWA can give your users the best of both worlds—native feel + web reach.

🚀 Rohit Singh 🚀 – Medium

Read writing from 🚀 Rohit Singh 🚀 on Medium. Full-stack developer with 6+ years in Angular, Node.js & AWS. Sharing tips, best practices & real-world lessons from building scalable apps.

medium.com