时间戳

首页 > 解决方案 > Web 应用清单：下载的文件为空或已损坏

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

问题描述

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

我已经用谷歌搜索并尝试了几个小时的不同选项，但无法解决问题。因此，我正在寻求您的支持。

以下是 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"
}

我已将图标设置如下： 根目录 frontend_mpd/public/icons/

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

在本地运行时，显示如下：App Manifest Local

非常感谢您的帮助！

标签： reactjsprogressive-web-appsfaviconhomescreenweb-app-manifest

解决方案

推荐阅读