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
It should be linked in
public/index.html by default.
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
Name of your app on home screen.
Name of app used on prompt while installing. If not present, short_name will be used.
It is an array of image objects that is displayed in the home screen. Each of the object in the array must have properties
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.
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.
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.
Sets the color of browser toolbar. It also displays this color in browser tabs while tab switching.
Color to be displayed in splash screen when the app is first launched.
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.
To test if your manifest.json is setup correctly, use the Chrome dev tools. In application section, navigate to Manifest subsection.