Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

simply replacing icons for progressive web app leads to error in manifest

Tags:

I had generated a manifest file with icons, later i decided to just change the icons folder with different icons(by copying & paste and overriding) when i did that I get the following error in chrome devtools as i click add to home screen in the application tab:

Error while trying to use the following icon from the Manifest: https://x.firebaseapp.com/icons/icon-144x144.png (Resource size is not correct - typo in the Manifest?) x.firebaseapp.com/:1 App banner not shown: no icon available to display

However, on chrome mobile the icon is updated(confirmed using add to homescreen)

{   "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 } 
like image 609
jasan Avatar asked Aug 29 '16 04:08

jasan


People also ask

What is manifest in web application?

A web application manifest, as defined in the Web Application Manifest specification, provides information about a web application in a JSON text file, necessary for the web app to be downloaded and be presented to the user similarly to a native app (e.g., be installed on the homescreen of a device, providing users ...

What should be in manifest JSON?

Using manifest. json , you specify basic metadata about your extension such as the name and version, and can also specify aspects of your extension's functionality (such as background scripts, content scripts, and browser actions).

What is start_ url in manifest JSON?

The start_url member is a string that represents the start URL of the web application — the preferred URL that should be loaded when the user launches the web application (e.g., when the user taps on the web application's icon from a device's application menu or homescreen).

What is the purpose of manifest JSON?

The web app manifest provides information about an application (such as name, author, icon, and description) in a JSON text file. The purpose of the manifest is to install web applications to the homescreen of a device, providing users with quicker access and a richer experience.


2 Answers

icons/icon-144x144.png image should have width 144px and height 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

like image 194
Razi Kallayi Avatar answered Oct 10 '22 05:10

Razi Kallayi


Is the icon actually 144px by 144px? That's what the error suggests to me.

like image 35
Matt Gaunt Avatar answered Oct 10 '22 05:10

Matt Gaunt