Our volunteers haven't translated this article into 한국어 yet. Join us and help get the job done!
You can also read the article in English (US).

The web app manifest provides information about an application (such as its name, author, icon, and description) in a JSON text file. The manifest informs details for websites installed on the homescreen of a device, providing users with quicker access and a richer experience[citation needed].

Web app manifests are part of a collection of web technologies called progressive web apps, which are websites that can be installed to a device’s homescreen without an app store, along with other capabilities like working offline and receiving push notifications.

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, but browsers generally support manifests with other appropriate extensions like .json

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"
  }]
}

Members

background_color

Defines the expected “background color” for the website. This value repeats what is already available in the site’s CSS, but can be used by browsers to draw the background color of a shortcut when the manifest is available before the stylesheet has loaded. This creates a smooth transition between launching the web application and loading the site's content.

"background_color": "red"

Note: The background_color member is only meant to improve the user experience while the pinned site is loading, and must not be used by the user agent as the background color when the progressive web app's stylesheet is available.

description

Provides a general description of what the pinned website does.

"description": "The app that helps you find the best food in town!"

dir

Specifies the primary text direction for the name, short_name, and description members. Together with the lang member, it helps the correct display of right-to-left languages.

"dir": "rtl",
"lang": "ar",
"short_name": "أنا من التطبيق!"

It may be one of the following values:

  • ltr (left-to-right)
  • rtl (right-to-left)
  • auto (hints to the browser to use the Unicode bidirectional algorithm to make a best guess about the text's direction.)

Note: When the value is omitted, it defaults to auto.

display

Defines the developers’ preferred display mode for the website.

"display": "standalone"

The possible values are:

Display Mode Description Fallback Display Mode
fullscreen All of the available display area is used and no user agent chrome is shown. standalone
standalone The application will look and feel like a standalone application. This can include the application having a different window, its own icon in the application launcher, etc. In this mode, the user agent will exclude UI elements for controlling navigation, but can include other UI elements such as a status bar. minimal-ui
minimal-ui The application will look and feel like a standalone application, but will have a minimal set of UI elements for controlling navigation. The elements will vary by browser. browser
browser The application opens in a conventional browser tab or new window, depending on the browser and platform. This is the default.  (None)

Note: You can selectively apply CSS to your app based on the display mode, using the display-mode media feature. This can be used to provide a consistent user experience between launching a site from an URL and launching it from a desktop icon.

icons

Specifies an array of image files that can serve as application icons, depending on context. For example, they can be used to represent the web application amongst a list of other applications, or to integrate the web application with an OS's task switcher and/or system preferences.

"icons": [
  {
    "src": "icon/lowres.webp",
    "sizes": "48x48",
    "type": "image/webp"
  },
  {
    "src": "icon/lowres",
    "sizes": "48x48"
  },
  {
    "src": "icon/hd_hi.ico",
    "sizes": "72x72 96x96 128x128 256x256"
  },
  {
    "src": "icon/hd_hi.svg",
    "sizes": "72x72"
  }
]

Image objects may contain the following values:

Member Description
sizes A string containing space-separated image dimensions. 
src The path to the image file. If src is a relative URL, the base URL will be the URL of the manifest.
type A hint as to the media type of the image. The purpose of this member is to allow a user agent to quickly ignore images of media types it does not support.

lang

Specifies the primary language for the values in the name and short_name members. This value is a string containing a single language tag.

"lang": "en-US"

name

Provides a human-readable name for the site when displayed to the user. For example, among a list of other applications or as a label for an icon.

"name": "Google I/O 2017" 

orientation

Defines the default orientation for all the website's top level browsing contexts.

​​"orientation": "portrait-primary"

Orientation may be one of the following values:

  • any
  • natural
  • landscape
  • landscape-primary
  • landscape-secondary
  • portrait
  • portrait-primary
  • portrait-secondary

Specifies a boolean value that hints for the user agent to indicate to the user that the specified native applications (see below) are recommended over the website. This should only be used if the related native apps really do offer something that the website can't.

"prefer_related_applications": false

Note: If omitted, the value defaults to false.

An array of native applications that are installable by, or accessible to, the underlying platform — for example, a native Android application obtainable through the Google Play Store. Such applications are intended to be alternatives to the website that provides similar/equivalent functionality — like the native app version of the website.

"related_applications": [
  {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=com.example.app1",
    "id": "com.example.app1"
  }, {
    "platform": "itunes",
    "url": "https://itunes.apple.com/app/example-app1/id123456789"
  }]

Application objects may contain the following values:

Member Description
platform The platform on which the application can be found.
url The URL at which the application can be found.
id The ID used to represent the application on the specified platform.

scope

Defines 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.

If the scope is a relative URL, the base URL will be the URL of the manifest.

"scope": "/myapp/"

short_name

Provides a 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 homescreens.

"short_name": "I/O 2017"

start_url

The URL that loads when a user launches the application (e.g. when added to home screen), typically the index. Note that this has to be a relative URL, relative to the manifest url.

"start_url": "/pwa-examples/a2hs/index.html"

theme_color

Defines the default theme color for an application. This sometimes affects how the OS displays the site (e.g., on Android's task switcher, the theme color surrounds the site).  

"theme_color": "aliceblue"

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.

Mime type

Manifests should be served using the application/manifest+json MIME type. However, it is optional to do so.  

Specification

Specification Status Comment
Web App Manifest Working Draft Initial definition.

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support No support 39.0 ? ? 32.0 ? 39.0
background_color No support 46.0[1] ? ? (Yes) ? 46.0 [1]
theme_color No support 46.0[1] ? ? No support ? 46.0 [1]
icons, name, short_name, and theme_color used for Add to home screen feature. ? (Yes) 53.0 (53)[2] ? No support ? (Yes)
display ? (Yes) 47.0 (47)[3] No support ? ? (Yes)
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support No support No support No support No support No support

[1] Does not support lang or scope.

[2] The icons, name, short_name, and theme_color fields of the Web App Manifest (if present) can now be as the source of the homescreen/apps window icons, apps window title, homescreen icon title, and apps window color (respectively) for "Add to home screen" (Firefox Mobile only; see bug 1234558). Experimental support for this feature is available behind the boolean flag manifest.install.enabled in about:config.

[3] Only the browser value of display was supported in 47. minimal-ui, standalone , and fullscreen were added in Firefox 57.