Question

我正在开发一个带有react的Web应用程序，并希望将自己的图标作为图标包括在内，我可以单击iPhone主屏幕（单击“在Safari中添加到主屏幕”之后）。您可以在此处找到Beta版：https://konekto-5gtxy7fpu.now.sh/

我用Google搜索并尝试了数小时的其他选项，但无法解决问题。因此，我正在寻求您的支持。

以下是index.html文件中的相关代码段：

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Konekto" />

<link rel="apple-touch-icon" href="%PUBLIC_URL%/_icons/apple-icon.png" />
<link
  rel="apple-touch-icon"
  href="%PUBLIC_URL%/_icons/apple-icon-57x57.png"
  sizes="57x57"
/>
<link
  rel="apple-touch-icon"
  href="%PUBLIC_URL%/icons/apple-icon-60x60.png"
  sizes="60x60"
/>
<link
  rel="apple-touch-icon"
  href="%PUBLIC_URL%/icons/apple-icon-72x72.png"
  sizes="72x72"
/>
<link
  rel="apple-touch-icon"
  href="%PUBLIC_URL%/icons/apple-icon-76x76.png"
  sizes="76x76"
/>
<link
  rel="apple-touch-icon"
  href="%PUBLIC_URL%/icons/apple-icon-114x114.png"
  sizes="114x114"
/>
<link
  rel="apple-touch-icon"
  href="%PUBLIC_URL%/icons/apple-icon-120x120.png"
  sizes="120x120"
/>
<link
  rel="apple-touch-icon"
  href="%PUBLIC_URL%/icons/apple-icon-128x128.png"
  sizes="128x128"
/>
<link
  rel="apple-touch-icon"
  href="%PUBLIC_URL%/icons/apple-icon-144x144.png"
  sizes="144x144"
/>
<link
  rel="apple-touch-icon"
  href="%PUBLIC_URL%/icons/apple-icon-152x152.png"
  sizes="152x152"
/>
<link
  rel="apple-touch-icon"
  href="%PUBLIC_URL%/icons/apple-icon-180x180.png"
  sizes="180x180"
/>
<link
  rel="apple-touch-icon"
  href="%PUBLIC_URL%/icons/apple-icon-precomposed.png"
/>

<link
  rel="icon"
  type="image/png"
  sizes="32x32"
  href="%PUBLIC_URL%/favicon-32x32.png"
/>
<link
  rel="icon"
  type="image/png"
  sizes="16x16"
  href="%PUBLIC_URL%/favicon-16x16.png"
/>
<link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
    <link
      rel="mask-icon"
      href="%PUBLIC_URL%/safari-pinned-tab.svg"
      color="#5bbad5"
/>

Manifest.json文件如下所示：

{
  "short_name": "Konekto",
  "name": "Konekto Emergency App",
  "icons": [
    {
      "src": "android-chrome-192x192.png",
  "sizes": "192x192",
  "type": "image/png"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff"
}

我将图标设置如下： root directory frontend_mpd/public/icons/

因此，我希望在将新添加到iPhone主屏幕时在主屏幕上显示正确的图标，但是仅显示该应用的屏幕截图，并且在Chrome开发人员模式下->应用程序->可安装性如下：显示：“下载的图标为空或已损坏”。

在本地运行时，显示以下内容：App Manifest Local

非常感谢您的帮助！

Web应用清单：下载的文件为空或损坏

0 个答案: