Manifest

In order to create a Progressive Web App, the browser must first know that it is a PWA. This is down by creating a Web App Manifest . A Web App Manifest is a JSON file that defines some information about the application. It is very similar to how an Android’s manifest file looks like and contains info such as name, author, and more.

Inside the root directory of the project, create a new file named manifest.json .

Once again, this file is used to describe the app with the help of some meta data as shown below:

{

"name": "DC-Covers",

"short_name": "Covers",

"start_url": "index.html",

"display": "standalone",

"theme_color": "#0476F2",

"background_color": "#fff",

"icons": [

{

"src": "", // usually kept in the static/icons folder

"sizes": "", // enter the size of the image

"type": "" // enter the type of the image eg: image/png,

},

]

}

Here we have written the name as DC-Covers and a short_name as Covers. If your apps name is already short, you can skip adding this property. You can’t give a shorter name to an app named something like Whatsapp! 😆

Next we have a property named start_url , this refers to the main html file of our app, which in this case is the index.html file. We will then use the display property to tell our browser how to open the app. standalone value will open the app like a normal one. You can set this property to something like fullscreen or minimal-ui.

The theme_color will be used to set the color of any toolbar on our mobile devices, and the background_color will be used by the PWA’s splash screen.

icons property is an array of object and can be used to define the icons of our app.

One last thing left to do! Go to the index.html file and add a link tag that points to this manifest.json file.

<html>

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.css" />

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

<title>DC Comics Rebirth - Covers</title>

</head>

<body>

<div id="app"></div>

<script src="/build/build.js"></script>

</body>

</html>

But how do we know if this has worked?

If we go open the DevTools in our browser, you will see a tab named Application. In there, you should get something like this