Add a Manifest

The final requirement for a PWA is to have a manifest file. The manifest is a json file that is used to specify how the app will look and behave on devices. For example, you can set the app’s orientation and theme color.

Save a file named manifest.json in your root folder and add the following content:

manifest.json

For our app we set the title, its background and theme colors, and tell the browser it should be treated as a standalone app without the browser chrome.

Line-by-line the fields are as follows:

name

The title of the app. This is used when prompting the user to install the app. It should be the full title of the app.

short_name

Is the name off the app as it will appear on the app icon. This should be short and to the point.

lang

The default language the app is localized in. In our case, English.

start_url

Tells the browser which page to load up when the app is launched. This will usually be index.html but it doesn’t need to be.

display

The type of shell the app should appear in. For our app, we are using standalone to make it look and feel like a standard native app. There are other settings to make it full screen or include the browser chrome.

background_color

The color of the splash screen that opens when the app launches.

theme_color

Sets the color of the tool bar and in the task switcher.

To add the manifest to your app, link to it inside the index.html head tag like this:

<head>

...

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

...

</head>

You should also declare the theme color to match the one set in your manifest by adding a meta tag inside the head :

<head>

...

<meta name="theme-color" content="white"/>

...

</head>

If you preview the app and run Lighthouse the score should go up to around 73.

App Icons

After the previous step, you may have noticed that Lighthouse complains about missing app icons. While not strictly necessary for the app to work offline, they do allow your users to add the app to their home screen.

To properly add this feature, you’ll need an app icon that’s been sized for the browser, Windows, Mac/iPhone and Android. That’s a minimum of 7 different sizes: 128x128 px, 144x144 px, 152x152 px, 192x192 px, 256x256 px, 512x512px and a 16x16px favicon. Rather than creating your own, you can download the ones I created for this tutorial from Github. Save them in the images folder and place favicon.ico in the project root folder.

Add the icons to your manifest file after the short_name property like this:

manifest.json

Finally, add them to index.html in the head tag:

<head>

...

<link rel="icon" href="favicon.ico" type="image/x-icon" />

<link rel="apple-touch-icon" href="images/hello-icon-152.png">

<meta name="theme-color" content="white"/>

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="apple-mobile-web-app-title" content="Hello World">

<meta name="msapplication-TileImage" content="images/hello-icon-144.png">

<meta name="msapplication-TileColor" content="#FFFFFF">

...

</head>

If all goes well you should see your Lighthouse score go up to ~91.

Finishing Up

At this point, the coding is finished and the last thing to do is upload the app to a web server. The final requirement for a Progressive Web App is that it must be served via https. Setting up a secure web server is out of scope for this tutorial but I’ve hosted the app on Github as an example:

https://jamesjohnson280.github.io/hello-pwa/

You can also get the full source code to this example on Github:

https://github.com/jamesjohnson280/hello-pwa

Feel free to fork it and make something cool. If you do, send me a link and I’ll post it here.