Day 3: Creating a Manifest File and Configuring Icons for the App

Today, you’ll create a Web App Manifest file to make your app installable and configure app icons for a native-like user experience. The manifest file provides metadata about your app, such as its name, icons, and theme, allowing users to add it to their home screens.

What You Will Do Today:

1. Understand the Web App Manifest file.
2. Create and configure manifest.json.
3. Add icons for the PWA.

Step 1: Understanding the Web App Manifest File

The Web App Manifest file is a JSON file that provides essential metadata about your app, such as its name, description, icons, theme color, and display options. It enables the “Add to Home Screen” functionality, making your PWA look and feel like a native app.

Step 2: Creating and Configuring manifest.json

The default create-react-app setup already includes a manifest.json file in the public folder. Let’s configure it to match your app’s branding.

1. Open public/manifest.json and edit it as follows:

   {
     "short_name": "MyPWA",
     "name": "My Progressive Web App",
     "description": "A Progressive Web App built with React",
     "icons": [
       {
         "src": "icon-192x192.png",
         "sizes": "192x192",
         "type": "image/png"
       },
       {
         "src": "icon-512x512.png",
         "sizes": "512x512",
         "type": "image/png"
       }
     ],
     "start_url": ".",
     "display": "standalone",
     "background_color": "#ffffff",
     "theme_color": "#333333"
   }

Explanation of Each Field:

• short_name: The short version of your app’s name displayed on the home screen or launcher.
• name: The full name of your app, shown during installation.
• description: A brief description of your app for reference.
• icons: The icons that represent your app on the home screen and splash screen.
• start_url: The entry URL when the app launches, typically set to the root (.).
• display: Defines the display mode. standalone makes the app behave like a native app, hiding the browser UI.
• background_color: Background color of the splash screen when the app loads.
• theme_color: The color of the address bar in supported browsers.

Step 3: Adding Icons for the PWA

1. Create two icons with sizes 192×192 and 512×512. You can use a tool like Favicon Generator to generate icons or create your own.
2. Name the icons icon-192x192.png and icon-512x512.png and place them in the public folder.
3. Confirm that manifest.json references these icons correctly:

   "icons": [
     {
       "src": "icon-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
       "src": "icon-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
     }
   ]

Step 4: Testing the Manifest File

1. Open Google Chrome and navigate to your app’s URL (e.g., http://localhost:3000).
2. Open Developer Tools (F12 or right-click and select “Inspect”).
3. Go to the Application tab and select Manifest on the left sidebar. You should see the details from manifest.json and the icons you added.
4. You should also see an option to Install or Add to Home Screen if everything is set up correctly.

Step 5: Customizing the index.html for PWA Appearance

To enhance your PWA’s appearance further, you can customize the index.html file for consistent branding.

1. Open public/index.html and update the theme color and app title:

   <title>My Progressive Web App</title>
   <meta name="theme-color" content="#333333" />

Summary

Today, you configured the Web App Manifest file to make your PWA installable. You defined the app’s name, icons, theme, and display properties, and you tested these settings in the browser.

Tomorrow, you’ll work on caching strategies with service workers to improve load times and offline functionality.