Web manifest properties

Owning your application's appearance is vital to ensuring the best user experience. Every application has unique use cases, eliminating the idea that one size fits all for progressive web applications. While most applications will want to copy a native application full screen experience, some will want to maintain a visible address bar. A standardized manifest file provides brand owners a communication channel with the browser to deliver the best branded experience.

The manifest should contain a series of properties, including name, short_name, description, icons, orientation, colors, and a default page. These are used for the homescreen and launch experience.

A minimal list of manifest properties is as follows:

• name
• short_name
• description
• icons
• orientation
• theme_color
• background_color
• start_url

There are additional official properties which you can specify within the manifest, but their use cases are limited. I would also point out that because the document uses JSON, a mutable data structure notation, it is extensible, and some browsers are experimenting with proprietary properties. Don't worry if you are using a non-standard property – you won't break other browsers because they just ignore those values.

There are two name properties; name and short_name. The short_name is used with the homescreen icon and other places where spaced is constrained. Where space allows, the name property is used.

This is what the first four properties look like in the 2048 app:

{ 
  "name": "2048", 
  "short_name": "2048", 
  "description": "[provide your description here]", 
   "start_url": "/", 
... 
} 

The start_url defines the initial URL that's loaded when the homescreen icon is selected. This eliminates the scenario where the user adds the PWA to the homescreen from a deep link, like a news article. In the past, the icon would be a bookmark to that article, not the home page.

The start_url can be any URL within the application's scope. It does not need to be the public home page; it can be a special PWA home page. You can also use QueryString values to drive additional tracking and dynamic behavior from the server.

Next, the icons property is an array of icon objects defining the URL to an icon, the MIME type, and dimensions:

"icons": [ 
    {     
      "src": "meta/2048-logo-70x70.png", 
      "sizes": "70x70", 
      "type": "image/png" 
    }, 
... 
    { 
      "src": "meta/2048-logo-600x310.png", 
      "sizes": "600x310", 
      "type": "image/png" 
    } 
  ], 

While different image types are supported, I recommend using .png as Chrome is looking for at least one .png of 144 x 144 dimensions. You should include at least four icons, one being at least 144 x 144, but 192 x 192 is better. In Chapter 10, Service Worker Tools, I'll show you how to use https://www.pwabuilder.com/ to help you automate the process of creating a full set of images.

My rule of thumb is to include a dozen or more icon variations to account for differences in potential platform requirements and opportunities. Windows Live Tiles can be 600 pixels wide and can be scaled down to less than 70 pixels wide.

It is also a good idea to use some art direction when creating icons. Some logos do not work well in smaller situations. If you add your icon to the homescreen and find it difficult to locate, chances are your customers will too.

A splash screen image is drawn from the icons array. Chrome chooses the image that is closest to 128dp for the device. The title is simply pulled from the name member. Specify the background color using the appropriately named background_color property.

The following image shows how the Flipkart.com site's colors and logo icon are used to create a brief splash as the web app is loaded:

Reference your PWAs icons as URLs using an array. Each item in the array is an object that describes the icon. Include the src URL, the sizes property, and MIME type. I recommend using .png files since Chrome currently requires this format.