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!

1. Add a file named manifest.json next to your index.html

2. Set the content of manifest.json to something like this.

   If you’ve added icons, make sure their urls contains actual images

3. Add the following meta-tag to your header in your index.html

   <link rel="manifest" href="http://me.org/manifest.json" />

4. 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" />

5. 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="./icon144white.png" />

Profit! _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.

---

• W3C - Web App Manifest
• MDN – Web App Manifest
• Chrome Developer – Add to Home Screen
• Apple - Configuring Web Applications