Valid manifest
User guide
- Getting Started
Api
Concepts
Configurations
Configuring webhint
Connectors
Development flow integration
Extensions
Formatters
Hints
- Avoid CSS limits
- Avoid HTTP redirects
- axe accessibility check
- Babel configuration hint set
- Compatibility of CSS, HTML and JavaScript features
- Correct `Content-Type` header
- Correct manifest extension
- Correct viewport
- Detect CSS Reflows
- Disallowed HTTP headers
- External links disown opener
- Has web app manifest
- Highest document mode
- HTTP cache
- Leading '.' in `classList.add` or `classList.remove`
- Manifest has name
- Minify JavaScript
- Modern DOCTYPE
- No `createElement` with SVG
- No `P3P` headers
- No broken links
- No byte-order mark
- No Inline CSS Styles
- No protocol-relative URLs
- No small error pages
- No vulnerable libraries
- Nu HTML test
- Optimal compression
- Optimize images
- Performance budget
- Prefixed CSS first
- scoped-svg-styles
- Specify button type
- SSL server test
- TypeScript configuration hints set
- Unneeded HTTP headers
- Use `Strict-Transport-Security` header
- Use `X-Content-Type-Options` header
- Use Apple touch icon
- Use charset `utf-8`
- Use HTTPS
- Use subresource integrity
- Valid `Set-Cookie` header
- Valid `theme-color`
- Valid manifest
- webpack configuration hints set
Parsers
Server configurations
Troubleshoot
- Api
- Concepts
- Configurations
- Configuring webhint
- Connectors
- Development flow integration
- Extensions
- Formatters
- Hints
- Parsers
- Server configurations
- Troubleshoot
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",
...
} |
{
"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.