ManUp.js
Provides the function manup()
which given a Web App Manifest object generates according meta
and link
tags for older browsers. Output is an array of arrays of which the first value is the tag (meta
or link
) and the second value is the object of attribute/value pairs.
Install
npm i manup
Usage
import manup from 'manup';
const manifest = JSON.parse(fs.readFileSync('./manifest.json', 'utf8'));
const headElements = manup(manifest);
Example manifest.json
:
{
"short_name": "ManUp.js",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"theme_color": "#f44336"
}
Example output headElements
array:
[
[ 'meta', { name: 'theme-color', content: '#f44336' } ],
[ 'meta', { name: 'mobile-web-app-capable', content: 'yes' } ],
[ 'meta', { name: 'apple-mobile-web-app-capable', content: 'yes' } ],
[ 'meta', { name: 'apple-mobile-web-app-title', content: 'ManUp.js' } ],
[ 'meta', { name: 'application-name', content: 'ManUp.js' } ],
[ 'meta', { name: 'msapplication-navbutton-color', content: '#f44336' } ],
[ 'link', { rel: 'icon', sizes: '192x192', href: '/icon-192.png' } ]
]
Browsers will choose whether to use the manifest.json
or the tags.
Usage with React
const Html = ({ headElements }) => (
<html lang='en-EN'>
<head>
<title>ManUp.js</title>
<link rel='manifest' href='/manifet.json' />
{headElements.map(([tag, props], idx) =>
React.createElement(tag, { ...props, key: idx })
)}
</head>
<body>
<div id='app' />
</body>
</html>
);
Props
The foundation for this comes from https://github.com/boyofgreen/ManUp.js -- thanks! The code was simplified and rewritten as a node module and some more supported tags added.