iOS web app splash screens

Question

Created Jul ’23

Replies 3

Boosts 0

Views 3.5k

Participants 3

After watching the WWDC 2023 “What’s new in web apps” session, I am unclear on current best practice for custom icons and custom splash screens in iOS PWAs (progressive web apps). Should we now use manifest.json entries, or the old link/meta tags way still?

Is there any Apple sample code for a PWA that, when added to the Home Screen on iOS, shows an app with custom icon and a custom splash screen compatible with all devices? The Configuring Web Applications documentation is marked as Archived. Is there a newer version?

Specifically, do we still have to provide a splash screen PNG for every possible device resolution? This is a serious burden and likely to break whenever a new device is released. It would be ideal if a splash screen could be synthesized by centering an icon on a background of a given color. I can’t get that to work.

Boost

Answer 1

joseph_e OP

Oct ’23

Hey. Were you ever able to figure this out? I am on 16.4, and it seems that the apple-touch-startup-image link functionality does not work anymore.

0

Answer 2

benqwerty OP

Oct ’23

Not resolved to my satisfaction. I still use the apple-touch-startup-image link method. It does still work for me but it involves specifying every i-device resolution and is a complete pain.

If it is not working for you, double check that you have an exact match for your device's screen resolution in your list of apple-touch-startup-image links.

I got the method from here: https://medium.com/appscope/adding-custom-ios-splash-screens-to-your-progressive-web-app-41a9b18bdca3

and the sizes from here: https://www.ios-resolution.com

0

Answer 3

l008com OP

Feb ’24

Count me in. I've been googling all over trying to find some detailed information and authoritative documentation for this feature and I find NOTHING. Other than the 15 year old half a paragraph from the iOS 4 documentation linked to above. One would think there must be documentation somewhere, but where? The fact you have to use the image resolution, I have not seen that documented absolutely anywhere, just comments in stackexchange posts. This is crazy! And i REALLY want to add a launch screen to my webapp. This is a real bummer :/

0