Monday, October 15, 2018

Beginner Guide to manifest.json file example tutorial | Web App Manifest example with tutorials

In this blog post, We are going to  learn web app manifest - manifest.json file example with tutorials.

web app manifest - manifest.json file 

web app manifest is a JSON file that contains metadata information of a web application. It specifies to the browser how it looks User interface during application installed on mobile or desktop.manifest.json is also called manifest.webmanifest. This can also be used in progressive web applications that look web applications as native apps. In browsers like chrome, the manifest file is required to enable add to home screen prompt feature
Manifest.json file can be used by different types of following applications
  • Web Applications or Desktop
  • Mobile Applications
  • Progressive Web Applications PWA
  • Chrome Extension Applications
manifest json file Supports following browsers and devices
  • Firefox 
  • Chrome
  • Safari
  • Android apps
  • IOS apps

manifest.json Sample file example

Here is sample manifest.json sample file which contains basic required properties like name,icons and start_url. remaining properties are optional.


{
  "name": "Todo PWA Application",
  "short_name": "Todo",
  "description": "To Do Progressive web application.",
  "start_url": "./index.html?home=true",
  "icons": [
    {
      "src": "/icons/todo-36.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "/icons/todo-48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/icons/todo-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#111111",
  "background_color": "#DDDDDDD",
  "display": "fullscreen",
  "orientation": "portrait"
}

Properties 

name:- Application name that displays the value on user home screen
short_name:- shorter name of the application. This will be displayed during installation of add to home screen feature
icons - These are icons to be used in application installation, add to home screen, splash screen: This will contain a collection of images that will be displayed when a user adds the website to home screen
start_url This will be default URL when application is started. The landing page of application startup
theme_color- this is the color of the application toolbar background_color this specifies the color of the splash screen
Display - this specifies the application display when it is started, the values are fullscreen, standalone,minimal-ui,browser Orientation - orientation mode of application - landscape or portrait

How to include manifest json file in web application

We can include the manifest.json file in the head using link tag of HTML web page. This tells to the browser about manifest.json.
<link rel="manifest" href="manifest.json">
manifest json file has provided following features in applications
  • Application metadata information like name,icons and start_url etc.. 
  • Add to home screen feature 
  • Spalsh screen details 
  • Application installation prompt information Privacy and content guidelines Permissions details
  • Installation and uninstallation events 
  • Application Display and orientation Configuration details

Related article


EmoticonEmoticon