Web app manifests

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Web app manifests are part of a collection of web technologies called progressive web apps (PWAs), which are websites that can be installed to a device’s homescreen without an app store. Unlike regular web apps with simple homescreen links or bookmarks, PWAs can be downloaded in advance and can work offline, as well as use regular Web APIs.

The web app manifest provides information about a web application in a JSON text file, necessary for the web app to be downloaded and be presented to the user similarly to a native app (e.g., be installed on the homescreen of a device, providing users with quicker access and a richer experience). PWA manifests include its name, author, icon(s), version, description, and list of all the necessary resources (among other things).

Members

Web manifests can contain the following keys. Click each one for more information about it:

Example manifest

{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "A simply readable Hacker News app.",
  "icons": [{
    "src": "images/touch/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "related_applications": [{
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
  }]
}

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.webmanifest">

Note: 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).

Note: 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.

Splash screens

In Chrome 47 and later, a splash screen is displayed for sites launched from a homescreen. This splashscreen is auto-generated from properties in the web app manifest, specifically:

name
background_color
The icon in the icons array that is closest to 128dpi for the device.

Specifications

Specification	Status	Comment
Web App Manifest	Working Draft	Initial definition.

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`background_color` Experimental	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android Full support 46 Notes Full support 46 Notes Notes Does not support `lang` or `scope`.	Chrome Android Full support 46 Notes Full support 46 Notes Notes Does not support `lang` or `scope`.	Firefox Android ?	Opera Android Full support Yes	Safari iOS ?	Samsung Internet Android Full support 5.0 Notes Full support 5.0 Notes Notes Does not support `lang` or `scope`.
`categories` Experimental	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`description` Experimental	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`dir` Experimental	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`display` Experimental	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 47	Opera Android ?	Safari iOS ?	Samsung Internet Android Full support Yes
`iarc_rating_id` Experimental	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`icons` Experimental	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 53 Notes Disabled Full support 53 Notes Disabled Notes By default, used for as the source for "Add to home screen" (see bug 1234558). Disabled From version 53: this feature is behind the `manifest.install.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android ?	Safari iOS ?	Samsung Internet Android Full support Yes
`lang` Experimental	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`name` Experimental	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 53 Notes Disabled Full support 53 Notes Disabled Notes By default, used for as the source for "Add to home screen" (see bug 1234558). Disabled From version 53: this feature is behind the `manifest.install.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android ?	Safari iOS ?	Samsung Internet Android Full support Yes
`orientation` Experimental	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`prefer_related_applications` Experimental	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`related_applications` Experimental	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`scope` Experimental	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`screenshots` Experimental	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`serviceworker` ExperimentalDeprecatedNon-standard	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`short_name` Experimental	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 53 Notes Disabled Full support 53 Notes Disabled Notes By default, used for as the source for "Add to home screen" (see bug 1234558). Disabled From version 53: this feature is behind the `manifest.install.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android ?	Safari iOS ?	Samsung Internet Android Full support Yes
`start_url` Experimental	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
`theme_color` Experimental	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 53 Notes Disabled Full support 53 Notes Disabled Notes By default, used for as the source for "Add to home screen" (see bug 1234558). Disabled From version 53: this feature is behind the `manifest.install.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android ?	Safari iOS ?	Samsung Internet Android Full support Yes

Legend

Full support: Full support
Compatibility unknown: Compatibility unknown
Experimental. Expect behavior to change in the future.: Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.: Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.: Deprecated. Not for use in new websites.
See implementation notes.: See implementation notes.
User must explicitly enable this feature.: User must explicitly enable this feature.