Progressive web applications needs some kind of json files at the root of the application which is the Webmanifest file that provides information about that application.

 

 

 

The web-manifest file is a json file that provides information about web apps. This file specifically comes with progressive web applications and contains special information to install the application such as name, logo, description and so on.

Most web technologies nowadays contains manifest especially technologies that generate hybrid mobile apps like Ionic.

Manifest file have the extension “.webmanifest” or “.json”

Let’s look at an example manifest file:

manifest.webmanifest

{
  "name": "Awesome App",
  "short_name": "Awesome App",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "Awesome App description",
  "icons": [
    {
      "src": "assets/imgs/icon48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "assets/imgs/icon72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/imgs/icon96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
   {
      "src": "assets/imgs/icon128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    }
  ]
}

As shown the manifest file contains a json object with particular keys called members. Most of the members is optional but there some which are required:

• name: The web application name
• short_name: like the name and is shown if there is not enough space to the display the full name.
• start_url: The root url of the web application.
• display: The display mode of app, which describes the UI shown to the user and can be fullscreen, standalone, browser.
• description: A breif description of the web app.
• icons: An array of app icon sizes, where each size item has a src, size and the mime type.

For a full list of webmanifest members refer to the MDN.

Manifest file can be deployed using a link tag with rel=”manifest” attribute like so:

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

or

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

When the browsers detects a manifest file it displays an icon on the address bar to install the app. manifest files can be viewed on the browser dev tools like in Chrome in the application tab