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 file provides information about a web application in JSON format.This information is necessary for the web app to be downloaded and 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), and ensuring discoverability.

PWA manifests include several values such as the application's name, author, icon(s), version, description, a list of all the necessary resources such as app icons, and other things besides.

Creating a valid manifest

A basic manifest file consists of just the following members:

  • name: An identifying name for the app. Can be used by app stores, browsers on startup screens and prompts, or by operating systems on app launchers and settings screens.
  • short_name: A short name, used to display the name to the user where there is limited display space, such as below the icon on a homescreen or app launcher menu.
  • description: A paragraph that provides descriptive information and additional context about the app.
  • display: The preferred display mode for the web app. Available values are fullscreen, standalone, minimal-ui, and browser. For most browsers, standalone is the most compatible value for PWAs.
  • scope: An origin / path that defines which navigations will happen within the installable app and which navigations will happen in an external web browser. If the user navigates outside this scope, those pages will be opened in a standard web browser.
  • icons: An array of icons that the browser can choose from to suit different contexts, which includes src, sizes, and type sub-members.

There are other fields that you can include — see the Members section below.

Below you can see an example of a basic manifest file that is compatible with most browsers:

{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "description": "A simply readable Hacker News app.",
  "display": "standalone",
  "scope": "/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"
  }]
}

Members

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

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 extensions such as .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:

Specifications

Specification Status Comment
Web App Manifest Working Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung 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 YesSafari 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 YesChrome Android Full support YesFirefox Android Full support 47Opera 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 YesChrome Android Full support YesFirefox 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 YesChrome Android Full support YesFirefox 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 YesChrome Android Full support YesFirefox 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 YesChrome Android Full support YesFirefox 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.

See also