# How to add Web App Manifest

- Published: 2016-11-29
- URL: https://notes.webutvikling.org/how-to-add-web-app-manifest
- Tags: progressive apps, web app manifest

The [manifest.json for web apps](https://developer.mozilla.org/en-US/docs/Web/Manifest) 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](https://gist.github.com/tomfa/0dabc8f36ae5c9e10ee48c40f5e17a56).

    _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

    ```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)

    ```html
    <meta name="mobile-web-app-capable" content="yes" />
    ```

5.  And the same with this, which is necessary for similar features for iOS

    ```html
    <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](https://dutytime.org/) _ _Note: A splash screen is [not well supported yet](https://developer.mozilla.org/en-US/docs/Web/Manifest#Splash_screens), 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](https://www.w3.org/TR/appmanifest/)
- [MDN – Web App Manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest)
- [Chrome Developer – Add to Home Screen](https://developer.chrome.com/multidevice/android/installtohomescreen)
- [Apple - Configuring Web Applications](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html)