How to add Web App Manifest
The manifest.json for web apps can make your mobile experience a bit sweeter. Force rotation? Check! Home screen icon? Check! Splash loading screen and no url bar? Check, check! Amount of work? 5 minutes!
- Add a file named manifest.json next to your index.html
- Set the content of manifest.json to something like this.
- (If you’ve added icons, make sure their urls contains actual images)
- Add the following meta-tag to your header in your index.html
<link rel="manifest" href="/manifest.json">
- You might also want to add the following to <head> in index.html, which is necessary for icons at least on my Nexus 5x (svg was not supported)
<meta name="mobile-web-app-capable" content="yes">
- And the same with this, which is necessary for similar features for iOS
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <link rel="apple-touch-icon" href="/static/icon144white.png">
See live example at dutytime.org
Note: A splash screen is not well supported yet, but when supported: autogenerated from background and your icons. Also: The reason it’s not supported well is that web app manifests is a working draft. Also: That means everything I’ve just said is subject to change.