CODEWITHSUNDEEP
htmlmanifestprogressive-web-apps
pol_guy
pol_guy

Reputation: 477

Progressive Web App - No Manifest Detected

I am building a Progressive Web App and would like to add a manifest file. I have built one and added a link to it on the home page but I get a message that says, "No manifest detected". Here is what the head looks like in index.html:

<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="app">
<meta name="apple-mobile-web-app-title" content="app">
<meta name="theme-color" content="#233b69">
<meta name="msapplication-navbutton-color" content="#233b69">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="msapplication-starturl" content="/index.html">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="icon" type="image/png" sizes="192x192" href="assets/img/app.png">
<link rel="apple-touch-icon" type="image/png" sizes="192x192" href="assets/img/app.png">

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width">
<meta name="mobile-web-app-capable" content="yes">

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

Here is what the manifest.json file looks like:

{
  "name": "someApp",
  "short_name": "app",
  "lang": "en-US",
  "start_url": "/index.html",
  "display": "standalone",
  "theme_color": "#233b69",
  "icons": [
{
  "src": "assets/img/app.png",
  "sizes": "192x192",
  "type": "image/png"
}
  ]
}

Upvotes: 11

Views: 16916

Answers (3)

Tanveer Ahmad
Tanveer Ahmad

Reputation: 94

Check your index.html file, manifest.json file and service-worker.js file are in root(same) folder. if it is, then check inspect element and go to application menu. see screenshot below. enter image description here

Upvotes: 4

Nash Worth
Nash Worth

Reputation: 2574

Confirmed: sometimes need to close the tab and reload the page to get manifest to re-initialize.

Possibly caused by caching the manifest file... and then not re-initialized in DevTools after cache update. Best guess, hard to tell.

Upvotes: 3

Anand
Anand

Reputation: 10100

It sounds like the manifest file and the index.html is not in the same path or not linked correctly. If it is and still not working, try changing manifest link like below (added "/" in the href),

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

Where do you see the error msg "No manifest detected"? If you can attach the screenshot of what you are getting and also the Chrome developer tool -> network and Application tabs screenshot, we could get whats going with it.

Upvotes: 9

Related Questions