66

I am using a HTML Boilerplate and I see a file called site.webmanifest. I have searched information on the Internet and I don't understand the use of it.

Is it a mandatory file in the development of web pages? When and why it is used? How do I know when I have to use it?

Mayank Kumar Chaudhari
  • 16,027
  • 10
  • 55
  • 122
JusitoFelix
  • 770
  • 1
  • 5
  • 6
  • 3
    https://developer.mozilla.org/en-US/docs/Web/Manifest should answer all your questions. – CBroe Mar 13 '20 at 11:44
  • 1
    Also, assuming you are referring to this one, https://github.com/h5bp/html5-boilerplate/blob/ffd36de013ff00e2623c6ea35675b1c4763a4524/src/doc/html.md#web-app-manifest - basic explanation right there. – CBroe Mar 13 '20 at 11:47
  • 1
    "This allows for much greater control over the UI of a saved site or web app on a mobile device." I dont understand that. Can you give me an example and you know how to answer all the questions I ask? @CBroe – JusitoFelix Mar 13 '20 at 12:40

2 Answers2

37

Please refer to documentation here.

It is not a necessary file. You need to use it or you should use it when you are designing a web app that can run offline. Examples are whatsapp web, todoist webapp, amazon webapp, etc.

Web app manifests are part of a collection of web technologies called progressive web apps (PWAs), which are websites that can be installed to a device’s homescreen without an app store. Unlike regular web apps with simple homescreen links or bookmarks, PWAs can be downloaded in advance and can work offline, as well as use regular Web APIs.

The web app manifest provides information about a web application in a JSON text file, necessary for the web app to be downloaded and be presented to the user similarly to a native app (e.g., be installed on the homescreen of a device, providing users with quicker access and a richer experience). PWA manifests include its name, author, icon(s), version, description, and list of all the necessary resources (among other things).

Mayank Kumar Chaudhari
  • 16,027
  • 10
  • 55
  • 122
4

That's how I understand it

site.webmanifest is basically a JSON file, which is used by Android devices (Apple uses apple-touch-icon) to look for some parameters (favicon, theme color, long and short name of your application) in order to display your application properly on your mobile or tablet device. This JSON file should have the format compatible with PWA.

For example, you would like to add some website to the home screen on your device and use it as a regular (pre-installed, native) app. If the website doesn't have webmanifest file, your device would not be able to determine website icon, so it will have to display that ugly default one. That's bad for user experience.

A simplified example of site.webmanifest would look like this:

{
  "name": "<your app name>",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Andrey Sitnik has a great article about favicon and webmanifest, if you want to go deeper.

So,

Is it a mandatory file in the development of web pages?

No, your web app will be working fine without it. But it's highly recommended for improving user experience on every device.

When and why it is used?

It lets your web app to be used as PWA and improve user experience.

How do I know when I have to use it?

If your app is used by certain category of people and you are 100% sure they dont't need (and don't want) to use PWA features, you probably shouldn't care about it. For example, if you are building a corporate B2B admin dashboard or portal, you most likely don't need PWA. But if you are building an app that can be used by anyone in the Internet (e.g. Trello, Notion, GitHub), you should care about it.

pkirilin
  • 332
  • 2
  • 8