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

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:

The Web App Manifest | Web | Google Developers

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:

Adding a Splash Screen for Installed Web Apps in Chrome 47 | Web | Google Developers

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!