Implementing Progressive Web Apps (PWAs) with Angular and React

Progressive Web Apps (PWAs) combine the best features of web and mobile applications, offering offline functionality, push notifications, and fast performance. By implementing PWAs with Angular and React, we can create highly responsive and reliable applications that work seamlessly across different devices.

This guide will cover:

• Installing PWA modules for Angular and React
• Enabling offline caching with Service Workers
• Deploying a fully functional PWA locally

---

1. Installing PWA Modules for Angular and React

1.1 Setting Up PWA in Angular

Angular provides built-in support for PWAs through the Angular Service Worker module. To add PWA capabilities to an Angular project, follow these steps:

1. Install the Angular PWA package:

   ng add @angular/pwa
   

2. This command will:

   • Update angular.json with service worker configurations.
   • Add ngsw-config.json, which defines caching strategies.
   • Modify index.html to include a web manifest file.
   • Register a service worker in main.ts.

3. Verify angular.json includes the following configurations:

   "serviceWorker": true,
   "assets": [
     "src/favicon.ico",
     "src/assets",
     "src/manifest.webmanifest"
   ]
   

1.2 Setting Up PWA in React

React does not have built-in PWA support, but it can be enabled using create-react-app with the --template option:

1. Create a new React project with PWA support:

   npx create-react-app my-pwa-app --template cra-template-pwa
   

2. This command automatically:

   • Creates a service-worker.js file.
   • Registers a service worker in index.js.
   • Includes a manifest.json for PWA metadata.

3. If converting an existing React app, install workbox and configure a service worker:

   npm install workbox-cli workbox-build
   

---

2. Enabling Offline Caching with Service Workers

Service workers allow caching of resources to enable offline functionality and faster load times.

2.1 Configuring Service Workers in Angular

In Angular, service workers are managed through ngsw-config.json. By default, it includes cache policies for assets and API responses. Modify it to define caching rules:

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

2.2 Configuring Service Workers in React

React uses Workbox to manage service workers. Modify service-worker.js to define caching strategies:

workbox.routing.registerRoute(
  ({ request }) => request.destination === 'document',
  new workbox.strategies.NetworkFirst()
);

workbox.routing.registerRoute(
  ({ request }) => request.destination === 'image',
  new workbox.strategies.CacheFirst({
    cacheName: 'image-cache',
  })
);

2.3 Testing Offline Functionality

1. Build and serve your application locally:

   ng build --prod && http-server dist/my-angular-app
   

   npm run build && serve -s build
   

2. Open DevTools (F12 or Cmd+Option+I) > Application > Service Workers.
3. Simulate offline mode by checking Offline in the Network tab.

---

3. Deploying a Fully Functional PWA Locally

3.1 Deploying an Angular PWA Locally

1. Build the production version:

   ng build --prod
   

2. Install and run a simple HTTP server:

   npm install -g http-server
   http-server -p 8080 -c-1 dist/my-angular-app
   

3. Visit http://localhost:8080/ to test the application.

3.2 Deploying a React PWA Locally

1. Build the React app:

   npm run build
   

2. Install serve to host the build folder:

   npm install -g serve
   serve -s build -l 5000
   

3. Visit http://localhost:5000/ to verify the PWA is working.

---

Conclusion

In this guide, we have:

✅ Installed and configured PWA modules for Angular and React. ✅ Enabled offline caching using service workers. ✅ Deployed a fully functional PWA locally.

PWAs provide enhanced user experiences, better performance, and offline access. By implementing service workers and optimizing caching strategies, your application can work reliably across all devices. 🚀