Progressive Web Apps

PWA Manifest: Creating Your Web App Manifest the Easy Way

A properly configured web app manifest is crucial to the installation process of your PWA, as without it the whole process just isn’t possible. And surprisingly, it isn’t that hard to have your web app manifest properly configured either.

What is it for?

The web app manifest is a vital part of your PWA as it determines how your app presents itself to the user in the splash screen and on the user’s home screen. These are all important initial stages contributing to the shaping of the users’ impressions of your app, which is why it’s important for you to get it right.

Ways to configure your manifest.json

Starting from scratch

With a little bit of familiarity with the JSON data format, you can create a web app manifest of your own without any effort required.

To start off, you should know that in JSON, properties are also known as members, and a property/member contains a keyvalue pair, with key being the name of the property and value being, well, the value of the property.

{
"key"         : "value",
   "another_key" : "another_value"
}

A typical manifest.json should look something like this:

{
  "background_color": "#3367D6",
  "theme_color": "#3367D6",
  "description": "Cute and random little cat pictures.",
  "display": "fullscreen",
  "scope": "/",
  "theme_color": "#3367D6",
  "icons": [
    {
      "src": "icon/cat-icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "name": "Cute cat pictures",
  "short_name": "Cats",
  "start_url": "/simicart/cats-a2hs/index.html"
}

You can leave some parts of the code out but there are still some required members, without which the user won’t be able to install your PWA:

name, short-name, icons, display, start_url

name: Indicates your app’s name which is displayed under the icon of your app on the home screen and various other places. Keep the value of your name property short and simple.

short-name: When the value of your name property fails to fit within the user’s screen, the value of this property is then the replacement to it. It’s recommended that your short-name should be under 20 characters and lower. In fact, shoot for 10 characters.

icon: Indicates your app’s icon image, which can consist of several images for different OSs and devices. It’s always better to have an array of variables as your icon member’s value as you don’t want your app to fail to present itself.

For example, iOs alone requires 4 different sizes for 4 of its device:

  • iPhone: 120 x 120 pixels & 180 x 180 pixels
  • iPad Pro: 167 x 167 pixels
  • iPad & iPad mini: 152 x 152 pixels

Even Google Chrome requires at least 2 different sizes for full usability on iOS and Android:

  • 512 x 512 pixels
  • 192 x 192 pixels

A safer approach, however, is to provide a large icon (512 x 512 pixels) and a smaller icon (192 x 192 pixels). As Google has put it, a 192-pixel icon is always the optimal choice as your app user’s OS can scale down the icon—should the need arise—with reasonable accuracy.

In order for your image icon to be called, a set of properties is used, namely src, types and sizes.

src: is used to provide the path to the icon’s image.

types: is used to provide the kind of file type of the image.

sizes: is used to provide a width x height description of the image’s dimension.

"icons" : [ 
    {
       "src" : "/imgs/icon152.png",
       "type" : "image/png",
       "sizes" : "192x192"
    },
    {
       "src" : "/imgs/icon215.png",
       "type" : "image/png",
       "sizes" : "512x512"
    }
]

display: Indicates how the app should be displayed. For an immersive and app-like experience, it’s recommended that you should set it to fullscreen (no UI). However, options such as standalone, minimal-ui are also available which are less costly in terms of performance, but they come at the cost of losing the immersive experience (status bar might still be shown).

start_url: Indicates the path from which your application starts. Your start_url value could be a simple / if your application starts from the same .root directory where your manifest.json is stored.

Join with thousands of other enthusiasts to receive the latest Magento and Progressive Web App news & tips.

Optional members

Going by the book is one thing but there’s always room for you to try to be better. Below are our recommended keys for a better and a more detailed web app manifest:

scope: limits the extent to which a user can go. With this scope member, you don’t have to worry about some quick-witted users who use your app to browse other websites for god knows what reason. To scope your website, simply put a / or put in your website’s full URL.

Notes:
– The default behavior of scope is the directory where your manifest.json is served from.
– Any link opened in the web app will be rendered within the existing PWA window. To open any link in a browser tab, you need to add target="_blank" to the <a> tag.
start_url must in the scope.

  • background_color: Indicates the background color in certain app contexts. More specifically, this field can be used to set the background color for the splash screen.
  • theme_color: Indicates the theme color of the web app’s UI elements such as the address bar. The change is applied site-wide and effective only when the site is launched from the home screen.
theme_color in web app manifest
A site with and without theme_color applied
Image in courtesy of Paul Kinlan

Notes: Your page-level configurations — e.g., theme-color meta tag: <meta name="theme-color" content="#3367D6"> — will override your theme_color‘s value in the web app manifest.

  • description: This should be self-explanatory.
  • shortcuts: Defines shortcuts to pages within the web app. The app shortcuts can be accessed by long-pressing on the app’s launcher icon on Android or by right-clicking the app icon on the taskbar (Windows)/the dock (macOS).
"shortcuts" : [
  {
    "name": "Notifications",
    "url": "/user/notifications/",
    "description": "News you have missed"
  },
  {
    "name": "Create new order",
    "url": "/create/order"
  },
  {
    "name": "My wishlist",
    "url": "/user/wishlist"
  }
]

Using a web app manifest generator

An easier and more effortless way of doing this would be to use a web app manifest generator. The generator takes in your input and, based on which, it generates a fully functional web app manifest that can be used as-is.

SimiCart Web App Manifest Generator
Automatically generate your web app manifest with Manifest Generator

Link your manifest.json

When everything is properly configured, the next step is to reference the web app manifest in your HTML header.

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

After referencing the web app manifest, all supported browsers should now properly recognize your manifest.json. For a full list of the currently supported browsers, do check out CanIUse.

Conclusion

And that’s it for a simple web app manifest. The whole process used to be much more complicated but with the recent invention of web app manifest generators, it should take no time at all for you to create a fully functional manifest.json. And just with a few additional tweaks, your web app can be made installable just like any other PWAs.

Is it helpful?

A content writer with a passion for the English language.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments