Your guide to Manifest.json

If you are working on progressive web apps. Then you are very familar with Manifest.json. For those who are not aware of Manifest.json — “It is a simple json file with all the necessary information required to save a web app to the user mobile’s home screen as well as how it ll look in terms of the user experience — launch screen, theme color, icons etc.”

Here is the demo of how Manifest will work with your PWA when user will interact with the app.

Manifest.json is not just for Progressive Web Apps. You can use it with any site.

tl:dr; You can watch this video and see how to use manifest.json

#1 Code

#2 Glossary of Manifest.json:

• Icons — Icons are the different size and density icons of your PWA. This is the one which will get saved on the user’s mobile home screen.

• short_name — this is the short app name and it will come below the icon. This is indent to display where there is no space to display the full name.
• name- The human-readable app name. This is the name of your app which will display on the banner of the app
• description — Provides a general description of the app.

• orientation — You can control the orientation of your app by using this feature. Below are the few properties of orientation. These are good for those apps which wants to support only 1 specific orientation.

— landscape

— portrait

. display — Defines the developer’s preferred display mode for the web application.

— standalone → hide the browser’s UI

— fullscreen → All of the available display area is used and no user agent is shown.

— browser → prefer to view your page as a normal site in a browser,

— minimal-ui → The application will look and feel like a standalone application, but will have a minimal set of UI elements for controlling navigation. The elements will vary by browser.

• background_color — This defines the background color of the app while the app is getting launched. This helps in smooth transition between launching the web application and loading the application’s content.
• theme_color — Defines the default theme color for an application. This sometimes affects how the application is displayed by the OS (e.g., on Android’s task switcher, the theme color surrounds the application).
• scope — this restricts the scope of the PWA. This controls which page will be open from the manifest.json. If user will navigate to page put of the scope. The page will be served as normal site.
• start_url- Specifies the URL that loads when a user launches the application from a device (e.g. when added to home screen), typically the index file. Note that this has to be a relative URL pointing to the index file, relative to the site origin.

#3 How to include on webpage?

#4 Testing Time

Desktop Testing on chrome:

Extra:

• dir — Direction of the content in the app
• related_applications -
• lang

Things to Remember:

• On phone a user need to visit the site 3 times with the gap of 5 mins then it ll get the notification of ‘Add to Home screen’ [AHS]
• IOS already has the feature of add to home screen hence it won’t show any notification
• When you do any change in Manfiest.json. The user need to re-add the icon after deleting the previous icons and removing all cache.

Loved it? Liked it? why don’t you hit the clap icon and share on your social media? or let me know what I missed or what you enjoyed?