What fields you should include in a web manifest file?

The manifest.json file is required for your website to qualify for Progressive Web App (PWA). Here is an example manifest.json file.

1{
2 "short_name": "itsrakesh",
3 "name": "itsrakesh - blog",
4 "description": "Browse programming tutorials and articles written by Rakesh Potnuru. Learn Web Development, Blockchain, Web3 and Technical writing.",
5 "scope": "/",
6 "icons": [
7  {
8   "src": "\/android-icon-36x36.png",
9   "sizes": "36x36",
10   "type": "image\/png",
11   "density": "0.75"
12  },
13  {
14   "src": "\/android-icon-48x48.png",
15   "sizes": "48x48",
16   "type": "image\/png",
17   "density": "1.0"
18  },
19  {
20    "src": "\/blog-icon-maskable-512x512.png",
21    "sizes": "512x512",
22    "type": "image/png",
23    "purpose": "maskable"
24  }
25 ],
26 "start_url": "/",
27 "background_color": "#7868E6",
28 "display": "browser",
29 "theme_color": "#7868E6",
30 "orientation": "any",
31 "screenshots": [
32    {
33      "src": "\/home-page-light.png",
34      "type": "image/png",
35      "sizes": "920x551"
36    },
37    {
38      "src": "\/search-page-light.png",
39      "type": "image/png",
40      "sizes": "920x551"
41    },
42    {
43      "src": "\/post-page-light.png",
44      "type": "image/png",
45      "sizes": "920x551"
46    },
47    {
48      "src": "\/snippet-page-light.png",
49      "type": "image/png",
50      "sizes": "920x551"
51    }
52 ]
53}

Resources:

• Learn more about PWA manifest file.
• PWA Studio VSCode extension.