React JS

PWA Support - Add a web app manifest with Create React App #5

A web app manifest is included into Create React App by default and allows anyone to install your React application on their device.

Golang Community Moderator. Software Engineer - Open Source Enthusiast. Goper Lover

Published · May 8 2019

  
If you don't know how web app manifest files work, refer to the Add a Web App Manifest guide first.

  
Create React App (CRA) includes a web app manifest by default. Modifying this file will allow you to change how your application is displayed when installed on the user's device.

Why is this useful? #
Web app manifest files provide the capability to change how an installed application will look like on a device home screen. 

By modifying properties in the JSON file, you can modify a number of details in your application, including its:
Name
Description
App icon
Theme color
The MDN documentation covers all the properties that can be changed in detail.

Modify the default manifest #
In CRA, a default manifest file, /public/manifest.json is included automatically when a new app is created:
{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

This allows anybody to install the device to their home screen and see some default details of the application. The HTML file, public/index.html, also includes a <link> element to load the manifest.
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

Here is an example of an application built with CRA that has a modified manifest file:


To find out if all the properties are working correctly in this example:
Mouse over the editor, press the App button, then press the Show button to preview the app.
Open the DevTools by pressing CMD + OPTION + i / CTRL + SHIFT + i.
Click on the Application panel.
Switch to the Manifest tab.
  
Conclusion #
If you're building a site that you think does not need to be installed on a device, remove the manifest and the <link> element in the HTML file that points to it.
If you would like users to install the application on their device, modify the manifest file (or create one if you are not using CRA) with any properties that you like. The MDN documentation explains all the required and optional attributes.