PWA iPhone icon not used when not on the home page

Question

EDIT: I've removed a bunch of the explanation that I had here, because I realized that the issue was intermittent and my previous thoughts were misled.

The issue is that the iPhone loads both a screenshot and your web app's icon when downloading your PWA. Whatever loads last gets used as the icon (race condition bug). My solution was to make the icon file size huge, which causes it to always be loaded last.

Here's how I tried setting the icon using Apple's own documentation. I added this to index.html; <link rel="apple-touch-icon" sizes="180x180" href="ream4.png"> Also tried without sizes, because why not; <link rel="apple-touch-icon" href="ream4.png">

If anyone wants to compare, this is my manifest.

{
    "name": "Ream",
    "short_name": "Ream",
    "display": "standalone",
    "orientation": "portrait",
    "start_url": "/",
    "icons": [
        {
            "src": "assets/ream6.png",
            "sizes": "64x64 180x180",
            "type": "image/png"
        }
    ],
    "background_color": "#f8f7fa",
    "categories": ["books", "stories", "memberships"],
    "homepage_url": "https://reamstories.com"
}

When I download the app from whatever location, it does download as a PWA and I can use it fine, but the icon is not downloaded unless I create it from the home page of the app. I want the icon to always be used regardless of where the user is and stop using screenshots as icons.

EDIT: More details. The issue appears to be intermittent. Sometimes it uses a screenshot, sometimes it uses the icons. I have no idea why. I tested this by closing the tab and reopening it several times, each time I would try to download the PWA again. Sometimes it downloads the icon, sometimes it uses a screenshot. iPhone is just garbage code?

EDIT ( I think I understand what is happening ): It is in fact intermittent. When the cache is cleared, the icon takes longer to load which causes it display because it loads after the screenshot is generated. I think my fix is to make the icon really fng big. So it will always load after the screenshot.

Answer 1

This is a bug in Apple's pigsty code. The only solution is to use a larger image so that the image loads after the screenshot gets taken.

I solved this by increasing the size of the logo image from 180px to 980px. Now it works every time.

I guess this is to be expected from a startup company.