Web app manifests
A web application manifest, defined in the Web Application Manifest specification, is a JSON text file that provides information about a web application.
The most common use for a web application manifest is to provide information that the browser needs to install a progressive web app (PWA) on a device, such as the app's name and icon.
A web application manifest contains a single JSON object where the top-level keys are called members.
Members
This section lists the members that may appear in the manifest.
All members are optional in the specification, but some applications require some members to be present. For example, PWAs must provide certain manifest members.
- background_color
- categories
- description
- display
- display_override Experimental
- file_handlers Experimental
- icons
- id
- launch_handler Experimental
- name
- orientation
- prefer_related_applications Experimental
- protocol_handlers Experimental
- related_applications Experimental
- scope
- screenshots
- serviceworker Experimental Non-standard
- share_target Experimental
- short_name
- shortcuts
- start_url
- theme_color
Note:
The dir
, lang
, iarc_rating_id
, and note_taking
members are not implemented.
Example manifest
{
"short_name": "MDN",
"name": "MDN Web Docs",
"icons": [
{
"src": "/favicon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favicon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
Deploying a manifest
Web app manifests are deployed in your HTML pages using a <link>
element in the <head>
of a document:
<link rel="manifest" href="manifest.json" />
The .webmanifest
extension is specified in the Media type registration section of the specification (the response of the manifest file should return Content-Type: application/manifest+json
). Browsers generally support manifests with other appropriate extensions like .json
(Content-Type: application/json
).
If the manifest requires credentials to fetch, the crossorigin
attribute must be set to use-credentials
, even if the manifest file is in the same origin as the current page.
<link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials" />
Splash screens
In some browsers and operating systems, a splash screen is displayed when an installed PWA is launched. This splash screen is automatically generated and its appearance is defined by members in the web app manifest, specifically:
Browser compatibility
BCD tables only load in the browser