Setting up a PWA with create-react-app in React JS

Introduction

Progressive Web Apps (PWAs) combine the best of both web and mobile apps. They are fast, reliable, and engaging. In this tutorial, you will learn how to set up a PWA using React and the create-react-app tool. We will walk through the process of creating a new React app, enabling PWA features, and testing the PWA functionality.

Step 1: Create a New React Application

Start by creating a new React app using the create-react-app tool. Open your terminal and run the following command:


  npx create-react-app my-pwa-app
  cd my-pwa-app

This will create a new React application named my-pwa-app and navigate into the project directory.

Step 2: Enable Service Worker

Next, we need to enable the service worker to enable offline functionality. The create-react-app template comes with service worker support, but it is not enabled by default. To enable it:

  1. Open the src/index.js file.
  2. Find the line that says serviceWorker.unregister();.
  3. Change it to serviceWorker.register();.

  import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import * as serviceWorkerRegistration from './serviceWorkerRegistration';
  
  ReactDOM.render(
    
      
    ,
    document.getElementById('root')
  );
  
  // Register service worker for offline functionality
  serviceWorkerRegistration.register();

By registering the service worker, the app will be able to cache assets and work offline.

Step 3: Set Up the Web App Manifest

The web app manifest is a JSON file that provides metadata about your app, such as the app's name, icons, theme color, and startup behavior. It allows users to install the app on their device's home screen.

The create-react-app template comes with a manifest file, located at public/manifest.json. Edit this file to provide the appropriate metadata for your app.


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

This manifest file provides key details such as:

  • short_name: The short name for your app.
  • name: The full name of your app.
  • icons: The app icons used when the app is installed on the user's device.
  • start_url: The URL the app should open to when launched from the home screen.
  • display: Defines the app’s display mode, typically "standalone" for a full-screen app experience.
  • background_color: The background color of the splash screen.
  • theme_color: The color of the browser toolbar when the app is open.

Step 4: Add Icons for the App

In the public/icons folder, add the icon images for your app. These images will be used as the app's icon when installed on the user's device.

Make sure the icons are at least 192x192 pixels and 512x512 pixels for good compatibility with most devices.

Step 5: Build the App for Production

Once your app is ready and you have set up the service worker and manifest file, it is time to build the app for production. Run the following command to build the app:


  npm run build

This will create a production-ready build of your app in the build folder. The build folder contains all the files that are optimized for performance and ready to be deployed.

Step 6: Test the PWA

To test the PWA functionality, you can use the Chrome Developer Tools. Follow these steps:

  1. Run your app locally by running npm start or yarn start.
  2. Open your app in Google Chrome.
  3. Open the Developer Tools (right-click and choose "Inspect" or press Ctrl+Shift+I).
  4. Go to the "Application" tab in the Developer Tools.
  5. Under the "Service Workers" section, check if your service worker is active and running.
  6. In the "Manifest" section, ensure that your manifest file is properly loaded.

Step 7: Install the PWA on Your Device

If you want to install the app on your device, go to the Chrome DevTools, open the "Application" tab, and click the "Install" button. This will allow you to install the app on your desktop or mobile device.

Conclusion

Congratulations! You have successfully set up a Progressive Web App (PWA) using React and the create-react-app tool. With the service worker enabled and a manifest file in place, your app is now capable of functioning offline and can be installed on users' devices. PWAs are a powerful way to create fast, reliable, and engaging web applications that provide an app-like experience for users.




Advertisement