Flutter构建Web版PWA Chrome报错No Manifest Detected问题求助

问题说明 #

• head标签内已配置合法的manifest.json，以及<link rel="manifest" href="manifest.json">引用
• Chrome开发者工具应用面板提示No Manifest Detected，且网络面板无manifest.json的请求记录
• http://127.0.0.1:8080/manifest.json可直接正常访问，Service Worker已成功安装
• 项目为Flutter项目，Web产物由flutter build web --release命令构建

解决步骤 #

• 调整manifest链接标签位置，确保写在index.html内<base href>标签的后面

  Flutter Web构建产物的index.html默认会在头部插入<base>标签用于路径解析，若manifest的link标签位于<base>之前，相对路径会解析异常，Chrome会直接跳过该资源请求，且不会抛出可见错误

• 检查link标签的跨域属性配置：如果manifest和站点同域，不要额外添加crossorigin="use-credentials"属性，否则会触发跨域校验失败导致请求被浏览器拦截
• 若站点部署在域名子路径下，将manifest的href改为绝对路径，示例：<link rel="manifest" href="/你的子路径/manifest.json">，避免相对路径解析错误
• 清理浏览器站点缓存后重试：
  1. 打开Chrome开发者工具 -> 应用(Application)面板 -> 存储(Storage)
  2. 勾选「解除未使用的缓存」「应用缓存」「Service Worker」等选项，点击「清除站点数据」
  3. 关闭当前标签页重新打开访问站点
• 检查Flutter Web的PWA配置是否开启：在项目web/index.html中确认未注释掉Flutter默认的PWA初始化相关代码，手动注释PWA逻辑会导致manifest不会被框架主动触发加载

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