I have a PWA operating at 'https://www.ajcproperties.com'. On an iphone, when I 'add to home screen' the first time, there is no icon. However, the iphone behaves as if the icon was added.
As debug, I observe that adding the PWA to the home screen results in increasing the number of home-screen pages, but doesn't place the icon on any home-screen page [the last page is blank].
If I restart the phone, the icon appears on the last page.
If I add to home-screen a second time, the icon appears on the last page. but the device believes there are two apps... I have to remove twice.
manifest.json
{
"short_name": "AJC",
"name": "AJC Properties",
"icons": [
{
"src": "AJC_favicon.ico",
"sizes": "32x32 24x24 16x16",
"type": "image/x-icon"
}, {
"src": "/images/AJC_LogoLG_FINAL_SQUARE_64.png",
"sizes": "64x64",
"type": "image/png"
}, {
"src": "/images/AJC_LogoLG_FINAL_SQUARE_192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "/images/AJC_LogoLG_FINAL_SQUARE_512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": ".",
"scope": "/",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
I expect adding once results in the Icon on the home-screen immediately. Apparently something in my set-up is wrong, but gets cleaned up with a restart or a second add.
This is a bug on iOS. It is a special case of adding an app [whether PWA or native]. In the case of a PWA, when the last home page is full of icons. Upon selecting add to home screen, the device creates a new page for icons, but does not place the icon on the screen. A power cycle will reveal that the app was indeed added.
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 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.
Flutter version: 1.19.0-4.0.pre
I am trying to generate a PWA app using Flutter web, but when I open the web app, it doesn't behave as a PWA should and it doesn't show add to home screen banner either on my android device.
Here's my manifest.json file:
{
"name": "Flutter PWA Demo",
"short_name": "PWA Demo",
"start_url": ".",
"scope": ".",
"display": "standalone",
"background_color": "#FFFFFF",
"theme_color": "#E50D7F",
"description": "A Flutter pwa application.",
"orientation": "portrait",
"icons": [
{
"src": "images/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "images/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "images/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "images/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "images/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
I tried it on master and dev but it doesn't work. It doesn't show add to home screen option on device or desktop chrome browser.
Firt become sure that you have registered "flutter_service_worker.js" in your "index.html" file, just like below:
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker.register("/flutter_service_worker.js");
});
}
Then open your pwa on chrome, right click on page and select "Inspect" option. Then go to "Application" tab and check if there is an error for "Manifest" and if there is you should fix it.
Then check "Service Workers" tab to see if "flutter_service_worker.js" is registered.
If it is registered and the "Manifest.json" file works fine, then you should see "Add to Home screen" option.
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"
}
]
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.