无法找到应用程序清单——Progressive Web Applications 开发问题

Hey there, let's work through why your manifest isn't showing up in Chrome DevTools—this is a super common snag when setting up PWAs for SPAs, so I’ve got a list of the most likely fixes to check step by step:

First off, make sure the <link> tag pointing to your manifest is formatted perfectly. The correct syntax should look like this:

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

Pay attention to these details:

• The rel attribute must be exactly "manifest"—no typos like "manifests" or "manifesto" (I’ve made that mistake before!)
• For the href path: If your manifest is in the same directory as index.html, using the root path /manifest.json is more reliable than ./manifest.json, especially since SPA routing can mess with relative paths. If your app lives in a subdirectory, adjust the path accordingly (e.g., /my-app/manifest.json)
• While not strictly required anymore, adding type="application/manifest" can avoid weird MIME type edge cases:

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

A tiny JSON error—like an extra comma, unclosed quote, or missing bracket—will make Chrome completely ignore the file. Test this by navigating directly to http://your-domain/manifest.json (or http://localhost:port/manifest.json for dev) in Chrome. If you see a JSON parse error instead of your manifest content, that’s the problem.
You can also check the Application > Manifest tab in DevTools: if there’s a syntax issue, it’ll show a red error message at the top of the panel.

Your server needs to return either application/manifest or application/json as the Content-Type header for manifest.json. If it sends text/plain or another type, Chrome won’t recognize it as a valid manifest.
To check this:

1. Open DevTools’ Network panel
2. Refresh your page
3. Find the manifest.json request in the list
4. Look at the Response Headers section for the Content-Type field
   If it’s wrong, fix your server config:

• For Nginx: Add types { application/manifest json; } to your server block
• For Apache: Add AddType application/manifest .json to your .htaccess file
• Most frontend dev servers (Webpack Dev Server, Vite, CRA) handle this automatically, but double-check if you’re using a custom setup.

Browser cache can be a sneaky culprit here—sometimes old versions of index.html or manifest.json get stuck. Try:

• Pressing Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac) for a hard refresh
• Or, in DevTools’ Network panel, check the Disable cache box and then refresh the page

PWAs require a secure context to work properly. The only exception is localhost for development. If you’re testing on a non-localhost HTTP server, Chrome won’t load the manifest. Stick to localhost for dev, and make sure production is deployed to an HTTPS server.

Since it’s an SPA, your routing setup might be intercepting all requests and returning index.html—including the request for manifest.json. This happens with routers like React Router, Vue Router, etc.
You need to configure your server to:

• Serve actual static files (like manifest.json, service-worker.js) when they’re requested
• Only fall back to index.html for paths that don’t correspond to a static file
  Most modern frontend toolchains (Vite, CRA) handle this out of the box, but if you’re using a custom server setup, you’ll need to adjust the routing rules accordingly.

内容的提问来源于stack exchange，提问作者Cj O Sullivan