Notes and anecdotes

Techstuff rambling

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="/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="/static/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.


progressive appsweb app manifest

tomfa • 2016-11-29


Previous Post

Next Post