This site uses cookies for analytics. By continuing to browse this site, you agree to this use.
A JS Foundation Project

Require valid manifest

Require 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 interoperability 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?

To use it you will have to install it via npm:

npm install @hint/hint-manifest-is-valid

Note: You can make npm install it as a devDependency using the --save-dev parameter, or to install it globally, you can use the -g parameter. For other options see npm's documentation.

And then activate it via the .hintrc configuration file:

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

Further Reading