Chrome 简单地替换渐进式Web应用程序的图标会导致清单中的错误

4uqofj5v 于 2022-12-06 发布在 Go

关注(0)|答案(9)|浏览(265)

我生成了一个带有图标的清单文件，后来我决定用不同的图标更改图标文件夹（通过复制&粘贴和覆盖），当我这样做时，我在chrome devtools中得到以下错误，因为我在应用程序选项卡中单击添加到主屏幕：
尝试使用清单中的以下图标时出错：https://x.firebaseapp.com/icons/icon-144x144.png（资源大小不正确-清单中是否存在排印错误？）x.firebaseapp.com/:1应用程序横幅未显示：没有可显示的图标
然而，在chrome移动的上，图标已更新（使用添加到主屏幕确认）

{
  "name": "Duckr",
  "short_name": "Duckr",
  "theme_color": "#2196f3",
  "background_color": "#2196f3",
  "display": "standalone",
  "orientation": "portrait",
  "Scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

google-chrome

来源：https://stackoverflow.com/questions/39198644/simply-replacing-icons-for-progressive-web-app-leads-to-error-in-manifest

9条答案

按热度按时间

lnlaulya1#

icons/icon-144x144.png图像的宽度应为144px，高度应为144px
You can check your manifest in your application tab in chrome inspect
https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps#add-to-homescreen

赞(0）回复(0）举报 2022-12-06

1l5u6lss2#

这个图标实际上是144px × 144px吗？这就是错误提示给我的。

赞(0）回复(0）举报 2022-12-06

ctehm74n3#

错误-“尝试使用清单中的以下图标时出错：“当我使用以下更改修改manifest.json时，它对我有效。

"icons": [
{
  "src": "favicon.ico",
  "sizes": "64x64 32x32 24x24 16x16",
  "type": "image/x-icon"
}

这可能会帮助面临类似问题的人。

赞(0）回复(0）举报 2022-12-06

i5desfxk4#

我没有看到任何解决你的评论的响应，我也在玩我的PWA的清单，并在我的元素检查器的响应头中得到了这个问题。
GET http://localhost/android-icon-144x144.png 404（未找到）（index）：1尝试使用清单中的以下图标时出错：http://localhost/android-icon-144x144.png（下载错误或资源不是有效的图像）
只是您需要将图像指向favicon所在的位置，并在manifest.json中更改密钥：

"icons": [
    {
      "src": "/favicon/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    }
]

并在应用程序中放置以下路径。

<link rel="icons" type="image/png" sizes="144x144"  href="/favicon/android-icon-144x144.png">

如果你使用一个图标生成器，你会得到不同的rel，如下所示：

<link rel="icon" type="image/png" sizes="144x144"  href="/favicon/android-icon-144x144.png">

赞(0）回复(0）举报 2022-12-06

kgqe7b3p5#

不知道这是不是一个好的解决方案，但评论以下行为我工作：

{
      "src": "icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },

由于，我检查到图像文件夹中提到的大小图像不存在，无论是该大小的可用图像或在清单中的大小评论。

赞(0）回复(0）举报 2022-12-06

ubbxdtey6#

如果您不想看到这个错误，请转到您的公共文件夹，然后转到index.html，如果您不小心删除了图标图像logo192.png或此链接manifest.json，请删除此链接，或者尝试更改manifest.json文件的大小

赞(0）回复(0）举报 2022-12-06

eoigrqb67#

1.图像大小需要符合manifest.json中写入的大小
1.如果您知道大小是正确的，尝试将图标文件和manifest.json中的图标名称都重命名为其他名称。这是一种“黑魔法”缓存（CTRL-F5不起作用）。这样您就可以迫使它认为它已经更改。

赞(0）回复(0）举报 2022-12-06

wvmv3b1j8#

当我将我的--script-version1.1.5更改为1.0.13时，我遇到了这个错误。我通过更改我的manifest.json来解决它，例如：

"icons": [
  {
     "src": "favicon.ico",
     "sizes": "64x64 32x32 24x24 16x16",
     "type": "image/x-icon"
  }
]

赞(0）回复(0）举报 2022-12-06

bwntbbo39#

这是因为你改变了画面：所以你需要更新manifest json中图片的旧名称为新名称。例如在manifest json中，我的图片源是logo192.png，大小为192*192我下载了一个相同大小的名为android.png的图片，所以我将源SRC的名称从logo192.png替换为android.png。

赞(0）回复(0）举报 2022-12-06

我来回答

Chrome 简单地替换渐进式Web应用程序的图标会导致清单中的错误

9条答案

相关问题

热门标签

最新问答