I'm building a progressive web app. Chrome says it has icon problems: "Manifest does not include a suitable icon" and "No supplied icon is at least 144px square".
I have icons and they do work on my phone (so it's installable on android, at least).
I have several different icon sizes, including up to 512px.
I have tried pre-caching the icons, but that didn't seem to help.
Here's an excerpt from my manifest:
{
"src": "images/icons/icon-96x96.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "maskable"
},
screenshot of error
"purpose" should be "any" or "maskable any"
just "maskable" will not be detected like a regular icon
You need to include at least 2 images, one must be 192x192 and another 512x512
I had the same problem and I solved the problem with "any" for the 144px image.
While you can specify multiple space-separated purposes like "any maskable", in practice you shouldn't. Using "maskable" icons as "any" icons is suboptimal as the icon is going to be used as-is, resulting in excess padding and making the core icon content smaller. Ideally, icons for the "any" purpose should have transparent regions and no extra padding, like your site's favicons, since the browser isn't going to add that for them.
For more information web.dev
As #pakut2 said https://stackoverflow.com/a/65618862/1977459, I use this and I no longer have a warning
"icons": [
{
"src": "assets/icons/favicon-16x16.png",
"sizes": "16x16",
"type": "image/png",
"purpose": "any"
},
{
"src": "assets/icons/favicon-180x180-apple-touch-icon.png",
"sizes": "180x180",
"type": "image/png",
"purpose": "any"
},
{
"src": "assets/icons/favicon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "assets/icons/favicon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
Related
I turned my site into a pwa, but the slash with the URL still appears, I made some changes to my manifest.json but so far I couldn't hide it, how to do it correctly?
This is my manifest.json
"lang": "pt",
"dir": "ltr",
"name": "GuiaCorretorPro",
"short_name": "GuiaCorretorPro",
"icons": [
{
"src": "https://painel.guiacorretor.com/public/favicon.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "maskable"
},
{
"src": "https://painel.guiacorretor.com/public/favicon.png",
"type": "image/png",
"sizes": "144x144",
"purpose": "any"
}
],
"theme_color": "#341864",
"background_color": "#9b67f7",
"start_url": "/auth/login",
"display": "standalone",
"orientation": "portrait",
You need to add a scope to your manifest.json file for it
"scope": "https://painel.guiacorretor.com/"
The scope member is a string that defines the navigation scope of this web application's application context. It restricts what web pages can be viewed while the manifest is applied. If the user navigates outside the scope, it reverts to a normal web page inside a browser tab or window
https://developer.mozilla.org/en-US/docs/Web/Manifest/scope
I'm trying to make a PWA using Vite and the Quasar framework (Vite Plugin).
My manifest and icons are all stored in the root folder of my project, but the manifest somehow can't find them.
When I run my application in dev mode, everything works fine, but when I build and host my application the manifest file gets a lot of errors:
property 'start_url' ignored, URL is invalid
property 'src' ignored,
URL is invalid
Icon URL 'android-chrome-256x256.png' failed to parse
...
This is my site.webmanifest file:
{
"name": "foo",
"short_name": "foo",
"start_url": "/index.html",
"id": "/",
"description": "foo",
"display": "fullscreen",
"background_color": "#D3D5E1",
"theme_color": "#D3D5E1",
"orientation": "portrait-primary",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-256x256.png",
"sizes": "256x256",
"type": "image/png",
"purpose": "any"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}
I link to it in my index.html file: <link rel="manifest" href="/site.webmanifest" />
Could somebody please tell me what I'm missing?
It seems to me I'm doing something wrong in my relative paths, but I tried a lot to no avail.
I've also tried to place the icons in the public folder, but that didn't work.
Thanks in advance!
I am trying to build a PWA, and in that process have added a manifest file to of my webpage, but I am getting "No Manifest Detected" in the Application tab in Chrome Dev Tools.
I have seen other threads on this and have tried solutions like restarting, clearing the cache etc. but to no avail.
I tried some other tools like https://manifest-validator.appspot.com/ and they don't seem to show any issues in the manifest file.
You can also try the website at https://beegle.app/apporter-book-help and see that when you do "view source", you can find manifest file added in header and the manifest file link working fine too.
Here's how it has been added
<link rel="manifest" href="/manifest.json">
Here's how the file looks like:
{
"name": "Beegle Apporter",
"short_name": "Apporter",
"icons": [{
"src": "/beegle-logo-128x128.png",
"sizes": "128x128",
"type": "image/png"
}, {
"src": "/beegle-logo-144x144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "/beegle-logo-152x152.png",
"sizes": "152x152",
"type": "image/png"
}, {
"src": "/beegle-logo-192x192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "/beegle-logo-256x256.png",
"sizes": "256x256",
"type": "image/png"
}, {
"src": "/beegle-logo-512x512.png",
"sizes": "512x512",
"type": "image/png"
}],
"start_url": "/apporter-book-help",
"display": "standalone",
"background_color": "#3E4EB8",
"theme_color": "#2F3BA2"
}
Any suggestions and thoughts on what could be going wrong?
Finally managed to solve it. I was using some plugin which was adding "body" tag within "head", and somehow that was causing the manifest to not get detected.
I have 2 questions about PWA.
I have installed PWA long time ago, than in a half year I have removed it from main screen like common application. Now i cant installed it from my browser. Chrome do not show popup and also do not fire event 'beforeinstallprompt'. How i can fix it?
When i see chrome installation PWA popup and push close button, pop up will never show up again. How come? How to show this pop up all the time?
My manifest:
{
"name": "Name of app",
"short_name": "Name of app",
"theme_color": "#55525d",
"background_color": "#275981",
"display": "standalone",
"start_url": "/",
"scope": "/",
"icons": [
{
"src": "\/android-icon-36.png",
"sizes": "36x36",
"type": "image\/png"
},
{
"src": "\/android-icon-48.png",
"sizes": "48x48",
"type": "image\/png"
},
{
"src": "\/android-icon-72.png",
"sizes": "72x72",
"type": "image\/png"
},
{
"src": "\/android-icon-96.png",
"sizes": "96x96",
"type": "image\/png"
},
{
"src": "\/android-icon-144.png",
"sizes": "144x144",
"type": "image\/png"
},
{
"src": "\/android-icon-192.png",
"sizes": "192x192",
"type": "image\/png"
},
{
"src": "\/android-icon-512.png",
"sizes": "512x512",
"type": "image\/png"
}
]
}
All ok with PWA. Chrome do not show any errors in lightroom.
For question 1, assuming you're using Android, when you removed the app from your homescreen did you "remove" or "uninstall"? It might be that the app was removed but is in fact still installed so you won't get prompted to reinstall. In the Chrome three dot menu, does it show "Open in Your_App_Name" or "Install "Your_App_Name"? If it shows "Open in...", it is still installed.
For question 2, that sounds like Chrome is just remembering that you chose not to install it. IMO it sounds like it would be a bad user experience to force an install popup every load, especially after the user has chosen to ignore it. Clearing browser data in the Chrome app settings would bring it back.
I've created a PWA that installs correctly, with a launcher icon. I want a different image for the splash screen, so I've included 192px and 512px png's, both 128dpi and listed them both in manifest.json - however, my splash screen still displays the launcher icons (which I have provided in 36, 48, 72, 96, 128, 144 px versions)
How do I ensure the correct image gets used for splash screen vs launcher icon?
manifest.json:
{
"short_name": "app",
"name": "app",
"icons": [
{
"src": "assets/pwa/android-launchericon-36-36.png",
"sizes": "36x36",
"type": "image/png"
},
{
"src": "assets/pwa/android-launchericon-48-48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "assets/pwa/android-launchericon-72-72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "assets/pwa/android-launchericon-96-96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "assets/pwa/android-launchericon-128-128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "assets/pwa/android-launchericon-144-144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "assets/pwa/android-launchericon-192-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "assets/pwa/splash-512-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff",
"orientation": "portrait"
}
According to this documentation, as you have already known, Chrome will choose the icon that closely matches the 128dp icon for that device.
Please take note that dp (Density-independent Pixels) is different from dpi (Dots Per Inch). Simply put, 128dpi is not necessarily equal to 128dp, which is most likely the problem in your case.
This SO answer explains the difference between the two well.
For example, on a 160dpi screen, 1dp == 1px == 1/160in, but on a
240dpi screen, 1dp == 1.5px. So no, 1dp != 1px. There is exactly one
case when 1dp == 1px, and that's on a 160dpi screen. Physical
measurement units like inches should never be part of your design—that
is, unless you're making a ruler.
A simple formula for determining how many pixels 1dp works out to is
px = dp * (dpi / 160).
Based on this simple formula, your 192px, 128dpi image has 240dp, while your 512px, 128dpi image has 640dp. Assuming your other images all have 128dpi as well, then Chrome is most likely picking your 96px image due to it having the closest dp to 128dp.
In conclusion, for your 192px or 512px images to have 128dp, they need to have 160dpi.