Manifest File In Progressive Web App

In this article, we will learn what is the purpose of manifest.json file in a Progressive web application.

In simple terms, Manifest is a JSON file that allows the users to install a web application to the mobile home screen without needing to go through the Play Store or App Store and install it.

With the help of manifest file, the developer can control the look and feel of the application when it is used through the mobile home screen. For example, developer can display the native like splash screen in their PWA application whenever it is launched, or the icons that are displayed when any native application is installed from the app store and so on. All these things can be controlled and can be implemented through the manifest file. In order to implement these features, we need to use some of the pre-defined properties in our manifest file. Let’s discuss them first and then we will see how each of this works with the help of an example.

1. name property – This property is used to display the name or full name of the application in the splash-screen.
   
   
   
2. short_name property – This property is used to display the name of the application when user adds an application to the home screen.
   
   
   

3. icons property – Whenever we install any native application from the store, short name with the app icon is installed. We can achieve the same thing for a PWA using the icons property. This property expects an array of icon object. Each object is separated by comma. There are three important properties that each icon object expects i.e. src, type, and sizes.
   
   
   • In src property, pass the full image source.
   • In type property, pass the image type i.e. PNG or JPEG.
   • In sizes property, pass the image size.
     
     NOTE - Depending on the screen size where the app is installed or added, the icon    for the app is used.

4. background_color property – This property is used to set the background color of the splash screen.
5. orientation – We can control the orientation of our application using this property. We can set it to portrait, or landscape.
6. start_url – This property is used to set the default page that will be displayed whenever a user launches the application.
   
   NOTE – If user pins any specific page from a PWA then the default page will not be triggered, meaning it will launch that specific page and not the default page.

7. display – In a native application, there is no browser UI but since our application is a web application, so whenever user installs it or add to the home screen, the default browser will also be displayed whenever the application is launched.
   
   
   

If you want to override this rule, set the display property to standalone. It will hide the browser UI.

There are few more properties like theme_color using which you can change the theme or the color of the top bars, or the related_applications property using which you can redirect the user to the native mobile application if you any in the play store.

For more information, please check this link.

Now, let’s see how to create and implement a manifest file but before moving any further please download this starter pack.

Once you have downloaded the pack, extract and open it in vscode, open the terminal using CTRL + ` command and type npm install. You can also right-click on the Package.json file and click on install dependencies.



It will download the dependencies. Once the download is complete, type npm start.



Press Enter and you will see the following –



Open Google Chrome and type – localhost:8081 and press Enter.


At the moment, we don’t have any manifest, so let’s add one in our project.

Inside the public directory, create a new file and name it manifest.json.



In the Index.html page add the reference to the manifest file.

<link rel="manifest" href="/manifest.json">

Add the following in the manifest.json.

{
    "name": "Blog and Share your Knowledge",
    "short_name": "Blogger",
    "display": "standalone",
    "start_url": "/index.html"
}

Run the application using the npm start command. Once the application is displayed open developer tools and navigate to the Application section and click Manifest.



Look at the identity and presentation section in the App Manifest. You will notice the value of name, short name is the same as that of what we have provided in our manifest file, and same for the start URL and display. At the moment we haven’t specified any theme or background color or the icons. So, let’s add them.

{
    "name": "Blog and Share your Knowledge",
    "short_name": "Blogger",
    "display": "standalone",
    "start_url": "/index.html",
    "background_color": "#34495e",
    "theme_color": "#8e44ad",
    "icons": [{
        "src": "src/images/open-book16.png",
        "type": "image/png",
        "sizes": "16x16"
    }, {
        "src": "src/images/open-book24.png",
        "type": "image/png",
        "sizes": "24x24"
    }, {
        "src": "src/images/open-book32.png",
        "type": "image/png",
        "sizes": "32x32"
    }, {
        "src": "src/images/open-book64.png",
        "type": "image/png",
        "sizes": "64x64"
    }, {
        "src": "src/images/open-book128.png",
        "type": "image/png",
        "sizes": "128x128"
    }, {
        "src": "src/images/open-book256.png",
        "type": "image/png",
        "sizes": "256x256"
    }, {
        "src": "src/images/open-book512.png",
        "type": "image/png",
        "sizes": "512x512"
    }]
}

Run the application and now you will also see theme color, background color and icons.



Now let’s test this application in android emulator.

Launch an android emulator and open google chrome.

If you don’t find chrome in your emulator, please check this link

Type this address - 10.0.2.2:8081



Press Enter.


So, our application works on the mobile browser without any issue. Let’s add this application to the home screen.

Click the icon on the right.

Click on Add to Home screen



The icon is picked up by the browser automatically, and look at the name, it is the same name that we have provided in the short_name property in the manifest.json file.

You can change the name.



Click Add.



Once you see this icon on your home screen, click on it and you will see a splash screen and then the default page.

Notice, there are no browser UI at the top and our application looks responsive as well.

You can download the full demo from here.

I hope you like it.