網站無法安裝：從清單下載的圖標是空的或已損壞

網站：圖標從清單下載爲空或損壞

我無法找到問題所在。以下是我的manifest.json。我正在使用材質設計的Angular 4 Progressive Web應用程序。

的manifest.json

{ 
    "dir": "ltr", 
    "lang": "en", 
    "name": "Hello", 
    "scope": "/", 
    "display": "standalone", 
    "start_url": "./?utm_source=web_app_manifest", 
    "short_name": "Hello", 
    "theme_color": "#f27b00", 
    "description": "", 
    "orientation": "any", 
    "background_color": "#3a1c8d", 
    "related_applications": [], 
    "prefer_related_applications": false, 
    "icons": [{ 
     "src": "/assets/icons/android/android-launchericon-512-512.png", 
     "sizes": "512x512", 
     "type": "image/png" 
    }, 
    { 
     "src": "/assets/icons/android/android-launchericon-192-192.png", 
     "sizes": "192x192", 
     "type": "image/png" 
    }, 
    { 
     "src": "/assets/icons/android/android-launchericon-144-144.png", 
     "sizes": "144x144", 
     "type": "image/png" 
     }, 
     { 
     "src": "/assets/icons/android/android-launchericon-96-96.png", 
     "sizes": "96x96", 
     "type": "image/png" 
     }, 
     { 
     "src": "/assets/icons/android/android-launchericon-72-72.png", 
     "sizes": "72x72", 
     "type": "image/png" 
     }, 
     { 
     "src": "/assets/icons/android/android-launchericon-48-48.png", 
     "sizes": "48x48", 
     "type": "image/png" 
     }, 
     { 
     "src": "/assets/icons/chrome/chrome-extensionmanagementpage-48-48.png", 
     "sizes": "48x48", 
     "type": "image/png" 
     }, 
     { 
     "src": "/assets/icons/chrome/chrome-favicon-16-16.png", 
     "sizes": "16x16", 
     "type": "image/png" 
     }, 
     { 
     "src": "/assets/icons/chrome/chrome-installprocess-128-128.png", 
     "sizes": "128x128", 
     "type": "image/png" 
     } 
    ], 
    "gcm_sender_id": "XXXXXXXX" 
}

來源

2017-09-22 Gaurav Sharma

檢查此相關[SO帖子]（https://stackoverflow.com/a/43307709/5995040）中提供的解決方案，您的圖標路徑引用根目錄。嘗試在開頭刪除'/'並重新編譯。這也在文檔[自定義圖標]（https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/#customize_the_icons）中完成。希望這可以幫助。 –

謝謝@bennygenel，它的作品！ –

Gaurav Sharma你應該感謝@ Mr.Rebot我只是固定你的帖子的格式。 – bennygenel

如本文件中所述 - Customize the icons，將所述圖標的src路徑時，必須參照根目錄。您應該通過在開始時刪除/並重新編譯它來更改路徑。

"icons": [{ 
    "src": "images/touch/icon-128x128.png", 
    "type": "image/png", 
    "sizes": "128x128" 
    }, { 
    "src": "images/touch/apple-touch-icon.png", 
    "type": "image/png", 
    "sizes": "152x152" 
    }, { 
    "src": "images/touch/ms-touch-icon-144x144-precomposed.png", 
    "type": "image/png", 
    "sizes": "144x144" 
    }, { 
    "src": "images/touch/chrome-touch-icon-192x192.png", 
    "type": "image/png", 
    "sizes": "192x192" 
    }],

您也可以檢查這個related SO post作爲參考。

來源

2017-09-24 17:21:51

網站無法安裝：從清單下載的圖標是空的或已損壞

回答

相關問題