Skip to main content

PWA Features in React Applications

In this tutorial, we'll explore the key features of Progressive Web Apps (PWAs) and how to implement them in a React application.

PWA Features

  1. App shell architecture: The app shell is the minimal HTML, CSS, and JavaScript required to power the user interface. It provides a fast-loading, offline-capable experience for users.

  2. Offline support: PWAs use service workers to cache assets and provide offline support, allowing users to access your app even without an internet connection.

  3. Push notifications: Push notifications help re-engage users by sending timely and relevant updates directly to their devices.

  4. Add to Home Screen: PWAs can be added to a user's home screen, providing easy access and a native app-like experience.

  5. Web App Manifest: The web app manifest is a JSON file that provides information about your app, such as its name, icons, and display settings.

Implementing PWA Features in a React App

1. Create a React app with PWA support

To get started, create a new React app using create-react-app with the --template cra-template-pwa flag.

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

2. Update the Web App Manifest

Edit the public/manifest.json file to customize your app's appearance and behavior. You can update the name, short_name, icons, and display properties.

"short_name": "My PWA",
"name": "My Progressive Web App",
"icons": [
"src": "icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
"src": "icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"

3. Add the service worker registration

In the src/index.js file, uncomment the following line to enable the service worker registration:


4. Add the app shell

In your src/App.js, create the app shell by defining the basic layout and navigation structure.

import React from 'react';
import './App.css';

function App() {
return (
<div className="App">
<header className="App-header">
<h1>My Progressive Web App</h1>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
<h2>Welcome to My PWA</h2>
<p>Here you will find information about our app and its features.</p>

export default App;

5. Implement push notifications

To implement push notifications, follow these steps:

  1. Set up a Firebase project and enable Cloud Messaging.

  2. Install the firebase npm package:

npm install firebase
  1. Initialize Firebase in your React app:
// src/firebase.js
import firebase from 'firebase/app';
import 'firebase/messaging';

const firebaseConfig = {
apiKey: 'YOUR_API_KEY',
authDomain: 'YOUR_AUTH_DOMAIN',
projectId: 'YOUR_PROJECT_ID',
storageBucket: 'YOUR_STORAGE_BUCKET',
messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
appId: 'YOUR_APP_ID',
measurementId: 'YOUR_MEASUREMENT_ID',


export const messaging = firebase.messaging();
  1. Request user permission for push notifications:
// src/App.js
import React, { useEffect } from 'react';
import { messaging } from './firebase';
// ...

function App() {
// ...

useEffect(() => {
.then(() => messaging.getToken())
.then(token => {
console.log('Notification token:', token);
.catch(error => {
console.error('Notification permission denied:', error);

messaging.onMessage(payload => {
console.log('Message received:', payload);
// Display notification or process data here
}, []);

// ...

export default App;


With these steps, your React app is now a Progressive Web App that includes an app shell, offline support, push notifications, and the ability to be installed on a user's device.