next.js＆amp; PWA：灯塔在清单中找不到图标。

发布于 2025-02-08 11:49:18 字数 1186 浏览 4 评论 0原文

我正在尝试将现有的NextJS应用程序转换为PWA。当我在http：// localhost上运行灯塔报告时：3000 yarn build＆amp;＆amp;纱线开始我看到了这两个错误：

失败：清单没有至少512px的PNG图标。
清单没有可掩盖的图标

，但是我的清单确实包含一个大小的单个图像文件

：1024x1024
类型：任何掩模

这是我的清单文件：

{
  "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
}

下面也是我的public的屏幕截图/在public> public/icon下显示1024.png的文件夹。

我还尝试更改路径ICONS/1024.png /icons/1024.png 和当前./ icons/ 1024.png，但没有一个使错误消失。

为什么Lighthouse报告没有大小＆GT的PNG； 512px还是可掩盖的图像？

原文

I'm trying to convert an existing NextJS app to a PWA.
When I run lighthouse report on http://localhost:3000 after yarn build && yarn start I see these 2 errors:

Failures: Manifest does not have a PNG icon of at least 512px.
Manifest doesn't have a maskable icon

However my manifest does contain a single image file that is

size: 1024x1024
type: any maskable

This is my manifest file:

{
  "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
}

Below is also a screenshot of my public/ folder showing there is indeed an 1024.png under public/icon.