I’m trying to make a Progressive Web App! Part 2: manifest.json

Stefan Ledin
Jul 26, 2017 · 2 min read

Phew! The previous part was horrible, so let’s do something a bit more easy today. (Famous last words?)

The Lighthouse report complains about this:

Address bar does not match brand colors

The Lighthouse report gives you a link to the documentation which tells you exactly how to fix the issue, which is quite nice.

Theme color

I need to take two actions. First, I’ll add this meta tag:

<meta name="theme-color" content="#317EFB"/>

To my surprise, I had already done that! It must have been included when I generated touch icons and those things.

The second step is to add the theme color to a manifest file. Here’s a guide for creating a manifest file:

Here’s what the manifest.json file needs to look like in order to make this test pass:

{
“name”: “Klickrubrik — Förändrar allt”,
“short_name”: “Klickrubrik”,
“theme_color”: “#00569f”
}

The manifest.json file is placed in the public/ folder and linked to from a link tag.

<link rel=”manifest” href=”{{ asset(‘manifest.json’) }}”>

Lighthouse report

One down, four to go!

Well that was easy! Let’s do another one, shall we?

Custom splash screen

This sounds like another easy one:

Is not configurated for a custom splash screen

And this is how I solve this issue:

I’ll just add a background_color value to the manifest.json file:

{
“name”: “Klickrubrik — Förändrar allt”,
“short_name”: “Klickrubrik”,
“theme_color”: “#00569f”,
“background_color”: “#00569f”
}

And create an icon that is at least 512 x 512 px:

Lighthouse report

One down, three to go!

Since we’re here, I can see that there’s a couple more things we should add to the mainfest.json file.

“display”: “fullscreen”

And:

“start_url”: “https://klickrubrik.nu"

Great, now we have to deal with service workers, which is something new to me. The good news is that service workers is JavaScript and has nothing to do with server configuration…

See you in the next part!

Progressive Web Apps

Progressive Web Apps Related Articles, Posts and Studies. Discover AngularJS, Ionic & ReactJS progressive web app themes at https://pwathemes.com. Join Progressive Web Apps on Slack: https://pwa-slack.herokuapp.com

Stefan Ledin

Written by

Web developer who makes fast WordPress sites with clean code and awesome backends. Also, JavaScript is nice!

Progressive Web Apps

Progressive Web Apps Related Articles, Posts and Studies. Discover AngularJS, Ionic & ReactJS progressive web app themes at https://pwathemes.com. Join Progressive Web Apps on Slack: https://pwa-slack.herokuapp.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade