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
* file\_handlers
* icons
* id
* launch\_handler
* name
* orientation
* prefer\_related\_applications
* protocol\_handlers
* related\_applications
* scope
* screenshots
* serviceworker
* share\_target
* short\_name
* shortcuts
* start\_url
* theme\_color
Example manifest
----------------


```json
{
  "name": "HackerWeb",
  "short\_name": "HackerWeb",
  "start\_url": ".",
  "display": "standalone",
  "background\_color": "#fff",
  "description": "A 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:


```html
<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.


```html
<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:

* `name`
* `background_color`
* `icons`
Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Progressive Web Apps (PWAs)