Web App Manifest - Githubissues

Guidelines

1.0 Definition
2.0 Tell the browser about your manifest
3.0 Key properties

1.0 Definition

The Web App Manifest is a simple JSON file that tells the browser about your web application and how it should behave when 'installed' on the user's mobile device or desktop. [1]

Normally it includes information: [1]

app name,
icons it should use,
the URL that should be opened when the app is launched.

e.g. [2]

{
  "short_name": "Maps",
  "name": "Google Maps",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/maps/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/maps/",
  "theme_color": "#3367D6"
}

2.0 Tell the browser about your manifest [2]

When you have created the manifest, add a link tag to all the pages that encompass your web app:

<link rel="manifest" href="/manifest.json">

The request for the manifest is made without any credentials (even if it's on the same domain), thus if the manifest requires credentials, you must include crossorigin="use-credentials" in the manifest tag.

3.0 Key properties

Properties	Required	Usage
short_name	Required	If both are provided,`short_name` is used on the user's home screen, launcher, or other places where `space may be limited`
name	Required	`name` is used in the app install prompt. Human-readable name for the site when displayed to the user.
start_url	Required	tells the browser where your application should start when it is launched, and prevents the app from starting on whatever page the user was on when they added your app to their home screen.
icons	Required	An array of image files that can serve as application icons. Chrome requires a 192x192px and a 512x512px icon. These icons are used in places like the home screen, app launcher, task switcher, splash screen, etc. Each object should include the `src`, a `sizes property`, and the `type of image`.
display	Required	You can customize what browser UI is shown when your app is launched. For example, you can hide the address bar and browser chrome. `Values` are `fullscreen`, `stanalone`,`minimal-ui`,`browser`
scope	Recommanded	defines the set of URLs that the browser considers to be within your app, and is used to decide when the user has left the app. The scope controls the URL structure that encompasses all the entry and exit points in your web app.

If you don't include a scope in your manifest, then the default implied scope is the directory that your web app manifest is served from.
The scope attribute can be a relative path (../), or any higher level path (/) which would allow for an increase in coverage of navigations in your web app.
A start_url starting with / will always be the root of the origin.
The start_url must be in the scope.
The start_url is relative to the path defined in the scope attribute.

4.0 Test the manifest

To manually verify your manifest is setup correctly, you can use the Manifest tab on the Application panel of Chrome DevTools.

Reference

[1] https://web.dev/add-manifest/ [2] https://developers.google.com/web/fundamentals/web-app-manifest

puddlejumper26 / blogs