Example 1: add manifist to html
<link rel="manifest" href="/manifest.webmanifest">
Example 2: manifest for pwa
{ "short_name": "WAM", "name": "Web App Manifest", "theme_color": "#eb5252", "background_color": "#000000", "display": "fullscreen", "Scope": "/", "orientation": "portrait", "icons": [ { "src": "images/android/android-launchericon-48-48.png", "type": "image/png", "sizes": "48x48" }, { "src": "images/android/android-launchericon-96-96.png", "type": "image/png", "sizes": "96x96" }, { "src": "images/android/android-launchericon-192-192.png", "type": "image/png", "sizes": "192x192" } ], "start_url": "index.html?utm_source=homescreen"}
Example 3: 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" }] } ]}