Web App Manifest

The web app manifest provides information about an application (such as name, author, icon, and description) in a JSON text file. The purpose of the manifest is to install web applications to the homescreen of a device, providing users with quicker access and a richer experience.

Web app manifests are part of a collection of web technologies called progressive web apps, which are web applications that can be installed to the homescreen of a device without needing the user to go through an app store, along with other capabilities such as  being available offline and receiving push notifications.

Deploying a manifest

Web app manifests are deployed in your HTML pages using a link tag in the head of your document:

<link rel="manifest" href="/manifest.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": "web"
  }, {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
  }]
}

Members

background_color

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

"background_color": "red"

description

Provides a general description of what the web application 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 can help provide 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.)

display

Defines the developer's preferred display mode for the web application.

"display": "standalone"

Valid values are:

icons

Specifies an array of image objects that can serve as application icons in various contexts. 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:

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 application as it is intended to be 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 web application'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

prefer_related_applications

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

"prefer_related_applications": false

related_applications

Specifies an array of "application objects" representing 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 web application that provide similar or equivalent functionality — like the native app version of the web app.

"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:

scope

Defines the navigation scope of this web application's application context. This basically restricts what web pages can be viewed while the manifest is applied. If the user navigates the application outside the scope, it returns to being a normal web page.

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 use where there is insufficient space to display the full name of the web application.

"short_name": "I/O 2017"

start_url

Specifies the URL that loads when a user launches the application from a device. If given as a relative URL, the base URL will be the URL of the manifest.

"start_url": "./?utm_source=web_app_manifest"

theme_color

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

"theme_color": "aliceblue"

Splash screens

In Chrome 47 and later, a splash screen is displayed for a web application launched from a home screen. This splashscreen is auto-generated using properties in the web app manifest, specifically: name, background_color, and 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

Browser compatibility

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