Web App Manifest
The web manifest provides metadata to *instruct* the browser about how the PWA should be rendered and displayed on a user's device. This is the first step to install a PWA on a device.
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):
<head><link rel="manifest" href="/manifest.webmanifest"></head>
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":
<head><link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials"></head>
If the attribute is not present, the resource is fetched without a CORS request (i.e., without sending the Origin ...