We write the correct manifesto for the site

I think many people know about the possibility of adding a site icon to the desktop of a mobile device. This is convenient and the reasons may be different (there is no mobile application that provides the same information, or you want to immediately open a certain page of the site, etc.). For some properties of how the site will be displayed and how the icon will look after the addition and the manifest file is responsible.

The manifest for the site is a simple JSON file that allows you to configure the following things:
1. What will be the icon of the user, after he adds your website to your desktop
2. How your site will run (with address bar, without it, or in full screen mode)
3. Splash screen
4. Color theme
5. Screen orientation
6. Starting url
and much more

Read more

To show how manifest affects the display of a site, I created a simple, test web application that returns the name of a region by code.

First, we fix the state of affairs before adding the manifest file.

After the user added an icon, it will look like this (on Android 5.0)
The name of the browser pulled out of the tilte tag. So, if you do not have a manifest file, then at least the title should be normal. But the icon in the form of the letter “G” itself appeared (it is not clear why it was G).
And the site itself will look like this

Here, in fact, nothing special, except that we can remove the address bar, so that the application was similar to the native.
')

Meet manifest.json!

An example of a manifest can be found at this link . Briefly go through the parameters:
name - the name that will be displayed under the icon, well, in general, wherever your “application” will be displayed
short_name - will be used when there is not enough space to display the full name
icons - a set of icons of different sizes
start_url - determines the url that opens when you click the icon (can be used to fix the users who open the site via the icon on the desktop, adding a parameter, say? src = homescreen to the url)
display - is responsible for how your site will be displayed (with the address bar without it, etc.)
background_color - sets the color of the page before it is loaded. Until the page is loaded, the user sees in front of him a white empty field. To somehow decorate his gray days, you can change this color. For example, put the background color of the site.

Generate and Conquer.

Of course, you can write the whole manifesto with pens, but this is boring, long and you can be mistaken. There have already been many craftsmen who automated this process. Below is a brief overview of the tools for automatic manifest generation.

brucelawson.imtqy.com/manifest - all you need is to fill in the fields (there is a brief description of each parameter, so the process is quite easy), the generator will do the rest for you.

www.favicon-generator.org - at least the direct purpose of this site is to generate icons, not a manifest. He still creates it and, unlike the previous one, you will already have icons (for iOS and Adnroid) and a manifest. True, the manifesto will have to be corrected (change the name and other settings).

manifest-validator.appspot.com - this tool is designed to validate your manifest.

Result

So the icons are drawn, the manifest is done. Next, you need to inform the browser about the manifest by adding the following to the head tag

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

Everything. We look what happened
Icon:

Left to. Right after (the icon was unimpressive, I’m happy to change it if you send better). There is already noticeable that Android used the name from the short_name field, since the name does not fit, apparently.

Application Download:

Here are the most pleasant changes. First, instead of the white screen, you see the similarity of the splash screen, which itself is created by the system from the icon, the full name and color specified in the manifest (perhaps this happens only on android 5.0 above). Secondly, this splash screen fades smoothly, which is visually beautiful.

The site itself:

Here, too, everything became concise. Without a UI browser, the site looks much better and looks more like a native application.

---

I have listed not all the properties that can be specified in the manifest file. The full list can be found here.
Demo app
Application repository

It is also necessary to emphasize that all this will not work on Apple devices. They can achieve approximately the same result, just need to use another method.