Web App Manifest
Explore how to create and configure the web app manifest file used in Progressive Web Apps to enable installation on devices. Learn about required properties like name, start URL, display settings, and icons, plus optional fields to enhance user engagement and app behavior.
From the MDN docs:
The web app manifest provides information about a web application in a JSON text file; this is necessary for the web app to be downloaded and presented to the user, similar to a native app (e.g., be installed on the home screen of a device to provide users with quicker access and a richer experience).
Register the web manifest
Typically, the manifest file is stored at the root of our web application. It can be named manifest.json or anythingYouWant.webmanifest (as long as it has .webmanifest at the end) and serve it with the media type application/manifest+json.
To associate a manifest to a web application, we use the <link> tag in the <head> section of an HTML document (usually index.html):
The code snippet above indicates to the user agent that the manifest metadata must be adopted rather than the one in the document object, which is the root node of the HTML document.
If some properties are not set correctly, the user agent will fall back to the document metadata.
The request for the manifest is made without any credentials (even if it is on the same domain). Therefore, if the manifest requires credentials, we have to add the attribute crossorigin="use-credentials":
If the attribute is not present, the resource is fetched without a CORS request (i.e., without sending the Origin HTTP header), preventing its non-tainted usage. If invalid, it ...