Every PWA should have a manifest file, a JSON file specifying metadata of the app. Manifest.json is required to add PWA to the homescreen. It defines how the app should look like and configures the app's behavior on launch.

You can find the manifest.json file in public/ directory.

It should be linked in public/index.html by default.

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

Details on manifest.json config

short_name

Name of your app on home screen.

name

Name of app used on prompt while installing. If not present, short_name will be used.

icons

It is an array of image objects that is displayed in the home screen. Each of the object in the array must have properties src, sizes and type. You may need to add additional property "purpose": "any maskable" for android devices. For Chrome, you need to provide icons of size 192x192 and 512x512 for auto scaling of icons. They are provided by default while creating PWA with create-react-app.

start_url

The home URL of page, so that it does not start from the page the user used to add the app to home screen. By default, it is set to .(home directory). You may modify it according to your needs.

display

It customizes the browser view for your app. It can take the following values:

• fullscreen: Open the app in full screen. Browser UI such as address bar and navigation are hidden. Android status bar is also hidden.
• standalone: The app runs in its own window, separate from the browser. Browser UI elements like address bar and navigation are hidden. Android status bar is not hidden.
• minimal-ui: It is similar to the standalone mode, but minimal set of UI elements for controlling navigation are displayed. However, the UI elements may differ from browser to browser.
• browser: Standard browser behavior. All browser UI are displayed. However, "Add to Home screen" is not displayed.

theme_color

Sets the color of browser toolbar. It also displays this color in browser tabs while tab switching.

background_color

Color to be displayed in splash screen when the app is first launched.

scope

Defines the scope of PWA. If the user navigates out of scope, the page will be served as a normal site. The start_url should be inside of scope. If the user clicks on a link outside of the scope, it will be rendered in the PWA. To open a outside link on a browser window, add target="_blank" to the anchor tag.
If the scope is a relative path, the base location will be where the manifest file is located.

Testing manifest.json

To test if your manifest.json is setup correctly, use the Chrome dev tools. In application section, navigate to Manifest subsection.

Happy Hacking!