Adding PWA to an Angular Project

Description

This guide provides step-by-step instructions on how to integrate Progressive Web App (PWA) support into an Angular project. It covers installation, configuration, testing, and deployment.

label

http://example.com

Prerequisites

Ensure you have Angular CLI installed.
Your Angular project should be on Angular 6+.

Step 1: Install Angular PWA

Run the following command in your Angular project directory:

ng add @angular/pwa

This command:

Adds the @angular/service-worker package.
Updates angular.json.
Creates a manifest.webmanifest file.
Updates index.html with necessary meta tags.
Adds service worker configuration.

Step 2: Build and Serve PWA

To enable the service worker, build the project in production mode:

ng build --configuration=production

Then, serve the project using a local HTTP server (Angular CLI’s ng serve does not work with service workers):

npx http-server -p 8080 -c-1 dist/YOUR_PROJECT_NAME

Replace YOUR_PROJECT_NAME with your actual project name.

Step 3: Verify PWA Features

Open Chrome DevTools (F12 or Ctrl + Shift + I).
Navigate to the Application tab.
Check for:
- Service Workers (should be registered and running).
- Manifest (contains PWA metadata).
- Lighthouse Audit (test PWA score).

Step 4: Enable PWA in Production

Ensure that your ngsw-config.json file is correctly configured:

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

Step 5: Deploy Your PWA

Deploy your Angular PWA http://example.com using Firebase, Netlify, Vercel, or any static hosting provider.

Firebase Deployment Example

Install Firebase CLI:
```
npm install -g firebase-tools
```
Login to Firebase:
```
firebase login
```
Initialize Firebase Hosting:
```
firebase init
```
Deploy your PWA:
```
firebase deploy
```

Conclusion

Your Angular app is now a PWA! It can work offline, be installed on devices, and provide a better user experience. 🎉