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!
Top comments (2)
Thanks for this, is there a way to dynamically set values in a manifest file or to dynamically render different manifest file let's say based on a domain name.
Thanks for the question. I researched a bit and found a solution that might help you.
Here he is dynamically creating a link element for custom manifest based on current subdomain.
However, this may be relevant as long as the app has not been installed. Once the app has been added to home screen, in order to change the manifest file, we need to delete the app (optionally delete browsing data for the website) and reinstall it again.
medium.com/@rajathans/dynamic-pwa-...