我之前也碰到过一模一样的情况，核心问题出在路径解析的上下文或者服务器的静态文件配置上，咱们一步步来搞定：

1. 优先改用绝对路径引用manifest #

最直接有效的办法就是把相对路径换成基于服务器根目录的绝对路径。把你的link标签修改成：

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

这样不管你是从http://127.0.0.1:8887/webapp还是其他路径访问index.html，浏览器都会精准请求http://127.0.0.1:8887/webapp/manifest.json，彻底规避相对路径的上下文混淆问题。

2. 确认服务器的静态文件路由配置 #

如果换了绝对路径还是不行，就得检查服务器是否正确把/webapp路径映射到了实际的webapp文件夹：

• 要是用Node.js Express框架，必须确保有这条配置：

  app.use('/webapp', express.static('webapp'));
  

• 如果是用Python的http.server，直接在根目录启动python -m http.server 8887的话，默认应该能正确解析/webapp路径，但如果有自定义路由规则，得保证没拦截这个路径的静态文件请求。

3. 手动验证manifest的可访问性 #

先在浏览器地址栏直接输入http://127.0.0.1:8887/webapp/manifest.json，看看能不能正常返回文件内容：

• 如果返回404，说明服务器没正确配置路径映射，得调整服务器设置；
• 如果能正常返回内容，那大概率是Chrome的缓存问题，试试按Ctrl+Shift+R强制刷新页面，或者打开DevTools的Application面板，手动添加manifest来测试。

至于为什么直接在webapp文件夹启动服务器就正常？因为这时服务器的根目录就是webapp，./manifest.json对应的就是http://127.0.0.1:8887/manifest.json，刚好是正确的路径，所以Chrome能顺利检测到。

内容的提问来源于stack exchange，提问作者Nigel