Search code examples
google-chromegoogle-chrome-devtoolsprogressive-web-apps

PWA: Manifest is There, but Chrome Says "No Manifest Found"?

UPDATE

With no changes having been made, Lighthouse has mysteriously stopped showing the "No usable web app manifest found on page" message and is now showing "Timed out waiting for start_url to respond." That's a topic for another post of course.

I do not yet know why Lighthouse stopped showing the previous error message.

I've just added PWA features to my app for the first time. Chrome Lighthouse says "No usable web app manifest found on page."

enter image description here

But the Chrome Application>>Manifest tool reports that the manifest.json file is there -- and even reads in the data from it:

enter image description here

Here's what the manifest.json file looks like:

{
  "short_name": "mySiteName",
  "name": "mySiteName",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#ffffff",
  "theme-color": "#ffffff",
  "background_color": "#000000",
  "background-color": "#000000",
  "description": "my site description",
  "icons": [
    {
      "src": "/images/app-images/myLogo.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/app-images/myLogo.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

Why is Lighthouse saying the manifest.json isn't found -- when the Chrome Application>>Manifest tool says that it is?

Update:

A commenter asked if I'd linked the manifest in the <head>. Going to the production server and clicking view source, I see in the <head> tag:

<head>
    [.....]
    <meta charset="utf-8">

    <meta name="robots" content="noindex">
    <link rel="manifest" href="manifest.json" crossorigin="use-credentials">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <noscript>This site requires Javascript. Please activate JavaScript in your browser.</noscript>
    [.....]
</head>

If I paste https://www.mywebsite.care/manifest.json into the browser, my manifest.json file comes up. So it appears that I have linked the manifest.json file in the <head> section.

Solution

  • I found out that when you are updating a pwa implementation, it's not enough to delete the old serviceworker from the Chrome devtools Application tab -- it's also often necessary to delete the old Cache Storage on the Application tab as well. I guess what was happening may have been a stale cache error.