The Importance of manifest.json for the Website

In a nutshell, there are several configurations in this manifest for the website. The use of manifest on the website is not mandatory, however, the use of manifest will make your website more recognizable by the device and the device will know what to do on the website when the user uses Google Chrome's default feature "Add To Home Screen".

What is Add to Home Screen ?

Here is a sample of "Add To Home Screen" in Google Chrome for Android, for this case I use https://kompetisi.id.

After clicking, Chrome will generate the website icon.

And when you click on the new icon, the "splash screen" appears.

End with full display. This experience is the same as when using a native application.

by default, if user use add to home screen on the website, it will only open in Google Chrome when the application icon is selected from the home screen. There are users who get the same experience as the https://kompetisi.id application, it takes several configurations that will be stored on manifest.json.

The first thing that needs to be made is a file named manifest.json, here is an example of the contents of the file, adjust it to your application.

Create manifest.json

{
  "name": "Kompetisi.id",
  "short_name": "Kompetisi.id - Ada hadiah setiap hari",
  "theme_color": "#cc5454",
  "background_color": "#cc5454",
  "display": "standalone",
  "Scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "./assets/icons-red/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "./assets/icons-red/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "./assets/icons-red/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "./assets/icons-red/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "./assets/icons-red/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "./assets/icons-red/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./assets/icons-red/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "./assets/icons-red/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

Theme color explain what color will be used for the navbar on the target device.

Background color for basic background color configuration, and will appear if it is not covered by content, or occurs if the components above use background color transparent.

Display : there are 4 options that can be filled, including:

• browser: standard browser display, just like when opened using Google Chrome.
• standalone: the web will open like a native application without losing the device's notification bar.
• minimal-ui: similar to standalone, but equipped with a url bar.
• fullscreeen: if you play the game the notification bar will disappear, that's the picture.

Icons it can be filled with one piece, it doesn't need to be as complete as an example if you don't have time to compress it. But make sure the format matches the example, which contains: src, sizes and types.

Make sure the manifest.json is placed in a strategic place and can be accessed by the web that uses it at any time.

Tell the Browser About Manifest

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

Add the tag to the head section, make sure the href also points to the valid manifest.json

Testing

To ascertain whether the manifest has been read properly in the browser. You can use Google Chrome. After the website opens, right-click, select application and manifest. Make sure all options are filled in according to the image.

Reference :

• From Google it self https://developers.google.com/web/fundamentals/web-app-manifest/
• Automaticaly create manifest.json, just upload image and fill in the form https://app-manifest.firebaseapp.com/
• Case study https://kompetisi.id