manifest-exists warns when a web app manifest
file is not provided.
The web app manifest file constitutes a standard centralized place to put metadata about your web application, and providing it:
-
informs browsers (and possible others) where to look for information about your web app, information that they may need in different contexts (e.g. what icon and name should be used if your web app is added to the home screen)
-
is an essential piece in the context of progressive web apps, being one of the signals used by some browsers (e.g. Chrome, Opera, Samsung Internet) in deciding if they will show the add to home screen prompt to users
This hint checks if:
-
The web app manifest file is specified correctly in the page (i.e. the page contains a single, valid declaration such as:
<link rel="manifest" href="site.webmanifest">) -
The specified web app manifest file is accessible (i.e. requesting it doesn’t result in a
404,500, etc.)
The web app manifest file is not specified:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>example</title>
...
</head>
<body>...</body>
</html>The location of the web app manifest file is not specified:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>example</title>
<link rel="manifest">
...
</head>
<body>...</body>
</html><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>example</title>
<link rel="manifest" href="">
...
</head>
<body>...</body>
</html><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>example</title>
<link rel="manifest" href="site.webmanifest">
...
</head>
<body>...</body>
</html>More than one web app manifest file is specified:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>example</title>
<link rel="manifest" href="site.webmanifest">
<link rel="manifest" href="another-site.webmanifest">
...
</head>
<body>...</body>
</html><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>example</title>
<link rel="manifest" href="site.webmanifest">
...
</head>
<body>...</body>
</html>This package is installed automatically by webhint:
npm install hint --save-devTo use it, activate it via the .hintrc configuration file:
{
"connector": {...},
"formatters": [...],
"hints": {
"manifest-exists": "error",
...
},
"parsers": [...],
...
}Note: The recommended way of running webhint is as a devDependency of
your project.