web-dev-qa-db-ja.com

プログレッシブウェブアプリのアイコンを単純に置き換えると、マニフェストでエラーが発生する

アイコン付きのマニフェストファイルを生成しました。後で、アイコンフォルダーを別のアイコンで（コピーと貼り付けと上書きによって）変更することにしました。その際、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-chromeweb-applicationsmanifestprogressive-web-apps
12
jasan

icons/icon-144x144.png画像の幅は144ピクセル、高さは144ピクセルにする必要があります

chrome inspect のアプリケーションタブでマニフェストを確認できます

https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps#add-to-homescreen

7
Razi Kallayi

アイコンは実際に144x144ピクセルですか？それがエラーが私に示唆していることです。

1
Matt Gaunt

それが良い解決策であるかどうかはわかりませんが、次の行をコメントすることは私にとってうまくいきました：

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

私が画像にチェックインしたのは、上記のサイズのフォルダー画像がそのサイズのアベイルズ画像またはマニフェストにそのサイズのコメントが存在しなかったためです。

0
Sunil Pandey

  1. 画像サイズはmanifest.jsonで記述されたサイズに合わせる必要があります

  2. サイズが正しいことがわかっている場合は、アイコンファイルとmanifest.json内のアイコン名の両方を別の名前に変更してみてください。いくつかの「ブラックマジック」キャッシュが行われています（CTRL-F5は機能しません）。このようにして、それが変更されたと考えるように強制します。

0
Morten_564834

このエラーを表示したくない場合は、パブリックフォルダーに移動してからindex.htmlに移動し、誤ってアイコン画像logo192.pngまたはこのリンクmanifest.jsonを削除した場合はこのリンクを削除するか、 manifest.jsonファイル

0
Sodium United

あなたのコメントを解決する応答がありません。また、PWAのマニフェストで遊んでおり、要素インスペクターの応答ヘッダーでこの問題が発生しました。

GET http：//localhost/Android-icon-144x144.png 404（見つかりません）（インデックス）：1マニフェストから次のアイコンを使用しようとしたときにエラーが発生しました： http：/ /localhost/Android-icon-144x144.png （ダウンロードエラーまたはリソースは有効な画像ではありません）

そして、あなたのファビコンのある場所に画像を向け、** 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
H4NS3L