The web app manifest is a simple JSON file that tells the browser about your web application and how it should behave when 'installed' on the user's mobile device or desktop. A typical manifest file includes information about the app name, icons it should use, and the URL that should be opened when the app is launched.
Manifest files are supported in Chrome, Edge, Firefox, UC Browser, Opera and the Samsung browser, and Safari is currently working on adding support.
Create the manifest.json file
The manifest file can have any name, but is commonly named
served from the root (your website's top level directory).
"name": "Weather: Do I need an umbrella?",
"description": "Weather forecast information",
||Short human-readable name for the application. This is intended for when there is insufficient space to display the full name of the web application, like device home screens.|
||Human-readable name for the site when displayed to the user.|
||General description of what the PWA does.|
||An array of image files that can serve as application icons. Chrome requires a 192x192px and a 512x512px icon. Additional sizes are optional, and recommended for those who want to ensure pixel perfect icons.|
||The URL that loads when a user launches the application. This has to be a relative URL, relative to the manifest url.|
||The background color used on the auto-generated splash screen when the PWA is launched.|
||The developers' preferred display mode for the PWA.|
||The navigation scope of this website's context. This restricts what web pages can be viewed while the manifest is applied. If the user navigates outside the scope, it returns to a normal web page inside a browser tab/window.|
The default theme color for an application. This affects how the OS
displays the site.
Add the web app manifest to your pages
When you have created the manifest, add a
<link> tag to all the pages of your
Progressive Web App.
<link rel="manifest" href="/manifest.json">
Test your manifest
To verify your manifest is setup correctly, use the Manifest tab on the Application panel of Chrome DevTools.
This tab provides a human-readable version of many of your manifest's properties, and makes it easy to verify that all of the images are loading properly.
- Open a new tab to manifest-good.glitch.me.
- Open Chrome DevTools and switch to the Application panel, then the Manifest tab
There are several additional properties that can be added to the web app manifest, refer to the MDN Web App Manifest documentation for full details.