Valid manifest (manifest-is-valid)

manifest-is-valid checks if the content of the web app manifest file is valid JSON, valid according to the specification, and the property values work in all targeted browsers.

Why is this important?

Web app manifest files that don't contain valid JSON are ignored by user agents. The same goes for invalid property values or non-standard properties.

Also, providing property values that are only supported by certain user agents for which the specification does not define a fallback, can lead to compatibility issues.

What does the hint check?

manifest-is-valid checks if:

• The content of the web app manifest file is valid JSON, and valid according to the specification, namely:

  • No additional properties are specified.
  • All property values are of the type specified by the specification.

• The property values work in all targeted browsers.

Examples that trigger the hint

The web app manifest file contains invalid JSON:

{
    "name": "invalid
}

The web app manifest file contains additional non-standard properties

{
    "additional_non-standard_property": "invalid",
    "name": "example name",
    ...
}

or deprecated properties:

{
    "icons": [{
        "density: 2",
        ...
    }],
    ...
}

Web app manifest file contains property values of a type different then what is specified by the specification, e.g. name is a number instead of a string:

{
    "name": 5,
    ...
}

The web app manifest file contains properties with invalid values:

{
    "lang": "en-x",
    ...
}

{
    "theme_color": "invalid",
    ...
}

The web app manifest file contains properties with values not supported by all the targeted browsers.

{
    "theme_color": "#ff0000aa",
    ...
}

Examples that pass the hint

The content of the web app manifest file is valid JSON, valid according to the specification, and the property values work in targeted browsers:

{
  "background_color": "red",
  "description": "Example of a progressive web app",
  "icons": [{
      "src": "icon.png",
      "sizes": "512x512",
      "type": "image/png"
  }],
  "name": "Example progressive web app",
  "short_name": "Example",
  "start_url": "index.html",
  "theme_color": "red"
}

How to use this hint?

This package is installed automatically by webhint:

npm install hint --save-dev

To use it, activate it via the .hintrc configuration file:

{
    "connector": {...},
    "formatters": [...],
    "hints": {
        "manifest-is-valid": "error",
        ...
    },
    "parsers": [...],
    ...
}

Note: The recommended way of running webhint is as a devDependency of your project.

Further Reading

• Web App Manifest specification