pwa manifest display options 2021 code example

Example 1: add manifist to html

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

Example 2: manifest.webmanifest example

{  "short_name": "Weather",  "name": "Weather: Do I need an umbrella?",  "description": "Weather forecast information",  "icons": [    {      "src": "/images/icons-192.png",      "type": "image/png",      "sizes": "192x192"    },    {      "src": "/images/icons-512.png",      "type": "image/png",      "sizes": "512x512"    }  ],  "start_url": "/?source=pwa",  "background_color": "#3367D6",  "display": "standalone",  "scope": "/",  "theme_color": "#3367D6",  "shortcuts": [    {      "name": "How's weather today?",      "short_name": "Today",      "description": "View weather information for today",      "url": "/today?source=pwa",      "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]    },    {      "name": "How's weather tomorrow?",      "short_name": "Tomorrow",      "description": "View weather information for tomorrow",      "url": "/tomorrow?source=pwa",      "icons": [{ "src": "/images/tomorrow.png", "sizes": "192x192" }]    }  ]}