The new web application manifest

Introduction

The manifest for web applications is a W3C standard to define, via a JSON file (usually manifest.json), how our web site behaves when acting as a web application.

Until now our option was to rely on the <title> tag for the application title and a bunch of <link> and <meta> (apple-touch-icon, icon, msapplication, etc.) tags to manage icons at different resolutions. When a user added our website to the home screen of their mobile phone, it appeared using this title and icons depending on the platform the user had. This technique was not very developer friendly and did not offer flexibility or ease of maintenance of these guidelines.

The W3C got to work and now we can make use of the manifest for web applications.

Creating the manifest

To create our manifest we will use a .json file, which can be called whatever we want (usually manifest.json). More or less a basic example would be the following:

{
  "short_name": "felixsanz",
  "name": "Félix Sanz | Blog",
  "icons": [
    {
      "src": "launcher-icon-2x.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-3x.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "orientation": "landscape"
}

These properties come to say the following:

short_name

This is the short name of the application and will be used by default.

name

The long version of the name.

icons

Specifies a list of images to be used depending on the device.

start_url

Specifies the address to load when opening the web application.

display

The display mode that our application will get when opened. It can be fullscreen, standalone, minimal-ui or browser. This also allows us to make use of display-mode in our @media to apply CSS styles depending on the display.

orientation

The orientation that our application acquires when opened. It can be portrait or landscape.

You can check the rest of the properties in the official standard.

Using the manifest

To use the manifest just include a reference in the header of our HTML code:

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

And that's it, by making use of functions such as "Add to home screen" of the Chrome browser for Android, users will use our website as if it were a native application.