Next.js & PWA：Lighthouse未识别manifest.json中的图标问题排查

你遇到的问题根源在于manifest文件里的icons字段格式错误——你在icons数组里额外嵌套了一层数组，导致浏览器无法正确解析图标配置，自然Lighthouse也就识别不到那张大图标和maskable属性了。

错误的格式（你的代码） #

看你提供的manifest：

"icons": [
  [
    {
      "src": "./icons/1024.png",
      "sizes": "1024x1024",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
],

这里icons是一个数组，但里面的每一项应该是单个图标对象，而不是再套一个数组。浏览器解析时会把这个内层数组当成无效的图标配置直接忽略掉。

修正后的正确格式 #

把内层的数组去掉，改成直接放图标对象：

{
  "name": "my-app",
  "short_name": "my-app",
  "theme_color": "#eee57c",
  "background_color": "#eee57c",
  "display": "fullscreen",
  "orientation": "portrait",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "/icons/1024.png",
      "sizes": "1024x1024",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "splash_pages": null
}

另外，图标路径建议用绝对路径/icons/1024.png，因为Next.js的public文件夹是静态资源根目录，绝对路径能确保在任何路由下都能正确加载图标。

额外排查技巧 #

1. 修复后重新执行yarn build && yarn start，然后打开浏览器开发者工具的Application面板，找到左侧的Manifest选项，查看是否能正确加载图标，有没有报错信息。
2. 如果还是有问题，可以检查图标文件的实际尺寸是否真的是1024x1024，避免文件命名和实际尺寸不符的情况。

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