A Web Manifest is basically a json file, that is; JavaScript Object Notation. It includes a bunch of Meta information about your site, in this case, your progressive web app.

Getting started

And that information could be things like the icons that you want to be used, the description of your web app, the short name to be used like on like a home screen for instance or on the start menu, web app long name.

  {
    "background_color": "#fff",
    "display": "standalone",
    "orientation":"portrait",
    "theme_color": "#fff",           
    "short_name": "PWA Fire",
    "name": "PWA Fire",
    "description": "description or purpose of your progressive web app",
    "lang": "en-US",
    "icons": [
    {
    "src": "images/icons/icon-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
    },
    {
    "src": "images/icons/icon-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
    }
    ],
    "start_url": "index.html?launcher=true",
    }
    

All this information is put in one file where it’s accessible by browsers in any sort of build system that may want to create an installable PWA for you and can be used by browsers to do installation from the web browser as well.

There has been a lot of modification to the Web Manifest. They have evolved to add support for “categories” which can be used in a web app store context where you want your PWA findable as a productivity app.

There are all sorts of things like screenshots, things to do with description as I mentioned above. The different sizes of icons which are more appropriate for different platforms.

You can setup your start page so your PWA starts from your desired page or directory from wherever it’s launched from, say desktop or a mobile device for instance.

There are also bits that you can add to basically describe how your whole progressive web app should look like. Talk of theme color and what sort of the initial orientation is. There is Minimal UI option, Standalone option. Standalone seeds all of browser control over to the developer.

Developer Notes

Browsers will automatically display an install banner for your web app when it meets certain criteria for progressive web apps.

Web Manifest Tool

We have a Web Manifest Generator tool that allows you to automatically get your Web Manifest best for your web app needs.