How do I fix manifest.json errors I am receiving using Lighthouse in Web Developer tools in Chrome?

Question

This is driving crazy. Have a simple Wordpress blog. Ran an audit using the Lighthouse tool in web developer tools of Chrome. For the area of Progressive Web App my score is an abysmal 53 with the following three errors. I can't figure out how to fix these errors.

---

1. Does not respond with a 200 when offline.

2. User will not be prompted to Install the Web App

Failures: Manifest's display value is not one of: minimal-ui | fullscreen | standalone, Site does not register a service worker.

3. Does not register a service worker.

The service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications.

---

Here is my manifest.json file. I change URL to example.com. And I know for a fact it's reachable on the server by going to the example.com/manifest.json and that is how it is called in the header as well. Am I missing anything in my manifest to cause these errors?

{
    "name": "My Site",
    "short_name": "My Site",
    "theme_color": "#ffffff",
    "background_color": "#082953",
    "display": "browser",
    "Scope": "/",
    "start_url": "https://www.example.com",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "splash_pages": null
}

Here is my generated header from home page. Not sure if I need all these icons. A bit confused as Lighthouse says a 512x512 is needed for manifest, but realfavicongenerator and other manifest generators don't seem to produce a 512x512 so I just made one in Photoshop and uploaded to root with the rest of the icons, then added the extra code to the manifest.json file.

<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="My Site">
<meta name="apple-mobile-web-app-title" content="My Site">
<meta name="theme-color" content="#ffffff">
<meta name="msapplication-navbutton-color" content="#082953">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="My Site">
<meta name="msapplication-starturl" content="https://www.example.com">
<meta name="msapplication-TileColor" content="#082953">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="manifest" href="/manifest.json">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="384x384" href="/android-chrome-384x384.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#082953">

Answer 1

This can be considered an error depending on whether you are making your blog available offline or not. Do you want your blog to be PWA, if yes then this all errors need to be handled otherwise you can just ignore them. Following is the explanation of errors.

• Does not respond with a 200 when offline- Progressive web apps work offline. If Lighthouse does not receive an HTTP 200 response when accessing a page while offline, then the page is not accessible offline.

• User will not be prompted to Install the Web App- This is the feature which is available for PWA where you have service worker installed and manifest is provided so that a web app is created on your phone's home screen.

• Does not register a service worker- This is the first thing you need to do for a PWA."To register a service worker".

You can uncheck progressive web app in audits and then calculate your score.

Now, lighthouse will not check for PWA compatibility and will not give any errors to it.