How to Build a PWA With Angular CLI

Progressive Web Apps (PWAs) represent a significant innovation in web application development, combining the best of web and mobile apps. If you're looking to build a PWA using Angular, you're in the right place. Angular CLI makes the development process easy and efficient. Follow these steps to create your own PWA.

Step 1: Install Angular CLI

Before you start building your PWA, ensure that you have Angular CLI installed on your machine. You can install it globally using npm (Node Package Manager) with the following command:

npm install -g @angular/cli

Step 2: Create a New Angular Project

Once Angular CLI is installed, create a new project by running:

ng new my-pwa --routing --style=scss

This command initializes a new Angular project named "my-pwa" with Angular routing and SCSS for styling.

Step 3: Add PWA Support

Angular CLI provides an easy way to add PWA features to your application. Navigate to your project folder and run:

ng add @angular/pwa

This command will configure your project for PWA support by adding essential files, such as a service worker, manifest file, and necessary dependencies.

Step 4: Understand the Manifest File

The manifest file, located in the src/manifest.webmanifest, allows you to customize how your PWA appears on the user's home screen. Edit this file to set a name, short_name, start_url, display mode, and theme colors. Here’s an example:

{
  "short_name": "MyPWA",
  "name": "My Progressive Web App",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#1976d2",
  "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 5: Configure Service Worker

The service worker manages caching and serves the app offline. Open the src/ngsw-config.json file to customize the caching strategies as per your requirements. You might want to configure the assets and API calls for caching.

Step 6: Build Your PWA

After configuring your PWA, it’s time to build the project. Run the following command to build your application for production:

ng build --prod

This command compiles your application and creates the production-ready files in the dist/my-pwa directory.

Step 7: Test Your PWA

To test your PWA, you can use a local server. You can install a simple http-server globally:

npm install -g http-server

Then, navigate to your dist folder and run:

http-server -p 8080

Open your browser and navigate to http://localhost:8080. You can use Chrome DevTools to simulate different device types and check service worker functionality.

Step 8: Deploy Your PWA

After testing, deploy your PWA on a preferred hosting solution like Firebase Hosting, Vercel, or GitHub Pages. Ensure that the hosting platform supports HTTPS, as PWAs require a secure context.

Conclusion

Building a Progressive Web App with Angular CLI is a straightforward process that can enhance user experience by providing offline capabilities and improving performance. By following the above steps, you can harness the power of Angular in creating a modern web application that meets the needs of today’s users.

How to Build a PWA With Angular CLI