How to Build a PWA Using Ionic and Angular in 2025

 How to Build a PWA Using Ionic and Angular in 2025

Progressive Web Apps (PWAs) offer the best of both the web and mobile worlds—lightweight, installable, offline-capable applications without needing an app store. With Ionic and Angular, creating a PWA is fast, efficient, and developer-friendly.

This guide walks you through building a modern PWA using the latest Ionic and Angular tooling.

Tools You’ll Need

Before starting, make sure these tools are installed on your system:

• Node.js (version 18 or higher)
• npm (version 9 or higher)

• Ionic CLI 

Install Ionic

npm install -g @ionic/cli

npm install -g @angular/cli

Step 1: Start a New Ionic Project

Create a fresh Ionic Angular application:

ionic start my-pwa-app blank --type=angular

cd my-pwa-app

Step 2: Add PWA Features to the App

Enable service workers and manifest support:

ng add @angular/pwa

Step 3: Run and Preview the App

Launch the app in your local browser:

ionic serve

Step 4: Build for Production

To see the full PWA behavior (offline access, install prompt), build the app in production mode:

ionic build --prod

This creates a www/ folder with the production build.

Serve it using a local HTTP server:

npm install -g http-server

http-server www

Step 5: Customize the App Manifest

{

  "name": "My Ionic PWA",

  "short_name": "PWAApp",

  "start_url": "/",

  "display": "standalone",

  "theme_color": "#3880ff",

  "background_color": "#ffffff",

  "icons": [

    {

      "src": "assets/icons/icon-192x192.png",

      "sizes": "192x192",

      "type": "image/png"

    },

    {

      "src": "assets/icons/icon-512x512.png",

      "sizes": "512x512",

      "type": "image/png"

    }

  ]

}

Step 6: Use Secure Hosting (HTTPS)

PWAs need to be served over HTTPS for full functionality (like service workers and install prompts). When you're ready to deploy, consider platforms like:

• Netlify
• Vercel
• Firebase Hosting
• Any server with HTTPS support

Optional Enhancements

• Offline caching rules: Customize service worker behavior in ngsw-config.json
• Lazy loading: Optimize performance with route-level code splitting
• Push notifications: Use messaging services for alerts
• Native builds: Add Capacitor for iOS/Android support

npm install @capacitor/core @capacitor/cli

npx cap init