@hint/hint-manifest-is-valid

hint that that checks if the web app manifest file is valid

Stats

StarsIssuesVersionUpdatedCreatedSize
@hint/hint-manifest-is-valid
3,1412933.4.24 months ago3 years agoMinified + gzip package size for @hint/hint-manifest-is-valid in KB

Readme

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.