Mikes Notes
I recently used Favicon.io, an online app to create the favicons for the Ajabbi websites. One of the generated files was called site.webmanifest, which I had never heard of before. Everything below comes from MDN.
This is not in production.
Notes
"A web application manifest, defined in the Web Application Manifest specification, is a JSON text file that provides information about a web application.
The most common use for a web application manifest is to provide information, such as the app's name and icon, that the browser needs to install a progressive web app (PWA) on a device.
A web application manifest contains a single JSON object with the top-level keys called members." - MDN.
Example
{
"name": "HackerWeb",
"short_name": "HackerWeb",
"start_url": ".",
"display": "standalone",
"background_color": "#fff",
"description": "A readable Hacker News app.",
"icons": [
{
"src": "images/touch/homescreen48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "images/touch/homescreen72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "images/touch/homescreen96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "images/touch/homescreen144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "images/touch/homescreen168.png",
"sizes": "168x168",
"type": "image/png"
},
{
"src": "images/touch/homescreen192.png",
"sizes": "192x192",
"type": "image/png"
}
],
"related_applications": [
{
"platform": "play",
"url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
}
]
}
Deployment of Manifest
Web app manifests are deployed in your HTML pages using a <link> element in the <head> of a document:
HTML
<link rel="manifest" href="manifest.json" />
The .webmanifest extension is specified in the Media type registration
section of the specification (the response of the manifest file should
return Content-Type: application/manifest+json). Browsers generally support
manifests with other appropriate extensions like .json
Content-Type: application/json
If the manifest requires credentials to fetch, the cross-origin attribute must be set to use credentials, even if the manifest file is in the exact origin as the current page.
HTML
<link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials" />
No comments:
Post a Comment