Understanding the Web App Manifest

person carlosrojasofolder_openUncategorizedaccess_time October 8, 2017

The Manifest file is a way to tell the Web and especially mobile devices how to display your App. It is basically a JSON file where you specify properties like an Icon, a name and so on.

How do I add a manifest file to my web?

1. You must create a manifest.json file at the root level of your web project.
2. This file must have the following basic structure.

{
  "short_name": "CarlosRojasBlog",
  "name": "CarlosRojasBlog",
  "icons": [
    {
      "src": "launcher-icon-1x.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "launcher-icon-2x.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "launcher-icon-4x.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "index.html?launcher=true"
}

You can see more properties for this file in this link.

3. Add in your index.html the existence of a manifest.json.

<link rel="manifest" href="/manifest.json">

How to customize the start of my App on my mobile?

1. We must create good icons and place them at the root level of our project. Use the names that appear in the manifest.json

launcher-icon-1x.png, launcher-icon-2x.png and launcher-icon-4x.png

with the sizes described respectively.

2. Add properties.


"background_color": "#0598EC",
"theme_color": "#0598EC",
"orientation": "portrait",
"display": "standalone",

Customizing with your colors.

How do I test my manifest?

1. Enter the URL of your site with Chrome and use Chrome Developer Tool.

2. From the Application tab, visit the Manifest. You should see all the properties you defined.

3. You can test in my site. https://www.carlosrojasblog.com

Well, i hope this post be useful and see you in the post 🙂

Liked it? Take a second to support carlosrojaso on Patreon!