Stopped working?

[BorisAnthony]

Sadly this brilliant brilliant solution seems to have stopped working. Even your demo longer works.
Either Apple made it so the file must be served and can't be injected via a data: url, or they are strictly looking for an http media-type header.

[avadhesh18]

Can you please share these details?

1. iOS version
2. device name
3. If possible verify using safari web inspector if the link tags are being added to the html? and if they are, what is the size of the two generated images. Also share the device screen size. (measure using screen.width and height).

It should most probably be something easy to fix.

[BorisAnthony]

iOS 18
iPhone 15 Pro

// console.log(screen);
Screen
    availHeight: 852
    availLeft: 0
    availTop: 0
    availWidth: 393
    colorDepth: 24
    height: 852
    pixelDepth: 24
    width: 393

( reference: https://www.ios-resolution.com/ )

I have spent literally 6 hours trying to debug this with web inspector and cache clearing / busting and trying all kinds of crazy stuff. 😅

The link tags are being generated, the data URLs work when I copy and paste them into the browser location bar. PNG gets downloaded and is the right size.

The image that is generated is 3x (pixelRatio) the screen measures.

I added the media directives
e.g.: <link rel=​"apple-touch-startup-image" media=​"screen and (device-width:​ 393px)​ and (device-height:​ 852px)​ and (-webkit-device-pixel-ratio:​ 3)​ and (orientation:​ portrait)​" href=​"data:​image/​png;​base64,...">​

Here is the code change I made to your (brilliant!) script:

const appleTouchStartupImageLink = document.createElement('link');
appleTouchStartupImageLink.setAttribute('rel', 'apple-touch-startup-image');
// appleTouchStartupImageLink.setAttribute('media', "screen and (orientation: portrait)");
appleTouchStartupImageLink.setAttribute('media', "screen and (device-width: "+window.innerWidth+"px) and (device-height: 852px) and (-webkit-device-pixel-ratio: "+pixelRatio+") and (orientation: portrait)");
appleTouchStartupImageLink.setAttribute('href', imageDataURL);
document.head.appendChild(appleTouchStartupImageLink);

When I hard code an actual png, it works. (And oddly it works without a media= attribute!)
So at this point I am thinking they did something that blocks the data: url. I tried to use blob + URL.createObjectURL but that didn't work either.

[avadhesh18]

Filed a bug report https://bugs.webkit.org/show_bug.cgi?id=280262

It's strange that they disabled data URLs I couldn't find any mention of this in the WebKit changelog. I was planning to use the prefers-color-scheme media query to offer both dark and light splash screens, but unfortunately, that idea is now out the window.

[ryanbrill]

@BorisAnthony I just tested this on iOS 18 on an iPhone 16 Pro and this works for me. Note that you need to add the <meta name="apple-mobile-web-app-capable" content="yes"> meta tag to your page or it will not work.

@avadhesh18 You may want to consider adding this to the README file, so it's clear that this tag is needed for this to work.

[BorisAnthony]

@BorisAnthony I just tested this on iOS 18 on an iPhone 16 Pro and this works for me. Note that you need to add the <meta name="apple-mobile-web-app-capable" content="yes"> meta tag to your page or it will not work.

@ryanbrill, the tag is present. 😅 As mentioned above, I have now spent well over 8 hours trying to figure this out.
But also: flutter/flutter#154596

I have tried every permutation of meta and link tags, manifests, clear caches and rebooted the device many, many times.

Not having official documentation from Apple about what they actually require/look for, not any known way to observe the web app installation process (to see what's going on).

One hilarious fact: it works on a fully updated iPad Pro (10.5-inch), which just got dropped from iPadOS updates and will forever more be stuck at 17.7…

I should mention, I noticed this stopped working this past spring but I didn't have the time then to dive into fixing it. I should have noted the iOS version, but as @avadhesh18 noted in the webkit bug report, it was still working on iOS 17.5.1

My next, and last step, is to set up a bare test, which I will commit and share here… now that webkit team is looking… 👀

p.s.: @avadhesh18 's demo also does not work for me on my iPhone 15 Pro / iOS 18.0

[BorisAnthony]

So, I set up a minimal test.
Code is here:
https://github.com/BorisAnthony/iosPWASplash/tree/test

If you want to try it out:
https://r.c8l.ca/

As the Readme says, at this point I only have evidence that the test doesn't work on my iPhone 15 Pro/18.0. Happy to get your results. 🙏🏼

[ryanbrill]

@BorisAnthony Your test page works for me on iPhone 16 Pro running iOS 18.0.

https://www.dropbox.com/scl/fi/3v0wic8yasetcr9mct7kb/ScreenRecording_09-25-2024-05-46-44_1.MP4?rlkey=ds3ngs5ehkkxcqt0znd6yvnze&dl=0

[BorisAnthony]

I have a confirmed case of another iPhone 16 Pro/iOS 18.0 where it doesn't work. 🤔

ScreenRecording_09-25-2024.07-52-38_1.MP4

[arnaudambro]

for me iPhone SE it never works either

[ecancil]

Is there anyway you can enable the crossorigin anonymous as an option?

[mat-0]

@BorisAnthony I stumbled across this I have an iPhone 15 Pro on iOS 18.3.1 and cannot get this to work either, nor your POC, nor by hard-coding touch icons into the HTML and manifest.json file. My hypothesis is that this is a bug with Apple.

[drmencos]

It works for me on iPhone 13 Pro on iOS 18.1.1, and even added the page from private mode (#3). Before adding the apple-mobile-web-app-capable tag, the splash screen wasn't working.