Web app manifest is a part of a collection of web technologies called progressive web apps.

It is a jSon text file use to provide informations about application (name, author, icon, etc.). The purpose is providing a richer user experience on any devices. With the wep app manifest, the application can be installed to the homescreen of the device without app store installation, add a quicker access to the application.

Deployment

Web app manifest can be deployed using a link HTML tag in the head of the document.

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

Manifest example

{
  "name": "Vincent Faliès - Artisan Codeur",
  "short_name": "VFAC",
  "lang": "en",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/user/themes/vfac/images/vfac192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/user/themes/vfac/images/vfac168x168.png",
      "sizes": "168x168",
      "type": "image/png"
    },
    {
      "src": "/user/themes/vfac/images/vfac144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/user/themes/vfac/images/vfac96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/user/themes/vfac/images/vfac72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/user/themes/vfac/images/vfac48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/user/themes/vfac/images/vfac256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/user/themes/vfac/images/vfac384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/user/themes/vfac/images/vfac512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "background_color": "#FFFFFF"
}

Structure

background_color

Background_color specifies the web application background color. This value is used before the style sheet ahs loaded. This creates a smooth transition between launching the web application and loading the application's content.

"background_color": "#FFFFFF"

The color specified by this entry is not the definitive background color. When the style sheet is loaded, the background color declared in it, is used for the application.

description

Add a short text to describe the application.

"description": "Vincent Faliès - Artisan Codeur"

dir

Specify the language text direction used in name, short_name, description. The entry lang can be add to complete the language declaration.

"dir": "rtl",
"lang": "ar",
"short_name": "حرفي التشفير"

Possible value for dir entry :

  • ltr (left to right)
  • rtl (right to left)
  • auto

If entry is omitted, it defaults to auto

display

Defines default display mode for the web application.

"display": "standalone"

Possible values :

Display mode Description Fallback display mode
fullscreen All of the available display area is used and no user agent chrome is shown. standalone
standalone The application will look and feel like a standalone application. This can include the application having a different window, its own icon in the application launcher, etc. In this mode, the user agent will exclude UI elements for controlling navigation, but can include other UI elements such as a status bar. minimal-ui
minimal-ui The application will look and feel like a standalone application, but will have a minimal set of UI elements for controlling navigation. The elements will vary by browser. browser
browser The application opens in a conventional browser tab or new window, depending on the browser and platform. This is the default. (none)

icons

Specifies application icons in differents contexts.

"icons": [
    {
      "src": "/user/themes/vfac/images/vfac192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/user/themes/vfac/images/vfac168x168.png",
      "sizes": "168x168",
      "type": "image/png"
    },
    {
      "src": "/user/themes/vfac/images/vfac144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/user/themes/vfac/images/vfac96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/user/themes/vfac/images/vfac72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/user/themes/vfac/images/vfac48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/user/themes/vfac/images/vfac256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/user/themes/vfac/images/vfac384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/user/themes/vfac/images/vfac512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]

 lang

Specifies the web application language for entry name and short_name.

"lang": "en-US"

This value is a string containing a single language.

name

Human-readable name for the web application. This name is displayed to the user, for isntance, as a label for an icon.

"name": "Vincent Faliès - artisan codeur"

orientation

Define default orientation for the web application context.

"orientation": "portrait-primary"

Possible values for orientation:

  • any
  • natural
  • landscape
  • landscape-primary
  • landscape-secondary
  • portrait
  • portrait-primary
  • portrait-secondary

prefer_related_applications

Specifies a boolean value to indicate to the user that related applications are available and recommended over the web application. This should only be used if the related native apps really do offer something that the web application can't do.

"prefer_related_applications": false

If ommitted, the value default is false

related_applications

Specifies an array of native applications that are installable or accessible by a platform (like Google play store)

"related_applications": [
  {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=com.example.app1",
    "id": "com.example.app1"
  }, {
    "platform": "itunes",
    "url": "https://itunes.apple.com/app/example-app1/id123456789"
  }]

Applications may contain:

Entry Description
platform The platform on which the application can be found.
url The URL at which the application can be found.
id The ID used to represent the application on the specified platform.

scope

Defines the navigation scope of the web application context. If the user navigates the application outside the scope, it returns to being a normal web page.

"scope": "/app/"

If the scope is a relative URL, the base URL will be the URL of the manifest.

short_name

Defines a short human-readable name for the application.

"short_name": "VFAC"

start_url

Specifies the URL that loads when a user launches the application from a device.

"start_url": "./?utm_source=web_app_manifest"

If given as a relative URL, the base URL will be the URL of the manifest.

theme_color

Defines the default theme color for an application. This sometimes affects how the application is displayed by the OS.

"theme_color": "#000000"

Splash screens

In Chrome 47 and later, a splash screen is displayed for a web application launched from a home screen. This splashscreen is auto-generated using properties in the web app manifest, specifically: name, background_color, and the icon in the icons array that is closest to 128dpi for the device.

 Mime type

Manifests should be served using the application/manifest+json MIME type. However, it is optional to do so.

Compatibility

See on CanIUse.com

More informations

For more informations, you can consult the W3C specification.

Next Post Previous Post