Clover13 Posted January 17 Posted January 17 I actually posted this last night and then deleted it thinking it was fixed, but it wasn't. I've tried everything I can think of to get the PWA app icon and splash screen to display correctly, but can't seem to figure it out. Device: iPhone 13 Pro Max I've uploaded various sizes (full size, 512x512), solid background color, transparent background, etc. Each iteration I've manually deleted all S3 images generated and cleared the CF cache. I've also cleared my browser cache. I've manually checked the S3 linked images and they appear correct, however when I open my site and "Add to Home" the background of the logo is always white and the splash screen is always just a blank white screen. The app/site opens fine. The share logo in the browser menu (i.e. where you'll find "Add to Home") is correct. Any ideas?
opentype Posted January 17 Posted January 17 I’ve never seen a splash screen on any IPS website on my iPhone.
Clover13 Posted January 17 Author Posted January 17 (edited) 7 minutes ago, opentype said: I’ve never seen a splash screen on any IPS website on my iPhone. I have 3 sites. Site 1: Incorrect app icon Correct splash screen icon Correct splash screen background color Site 2: Correct app icon Correct splash screen icon Incorrect splash screen background color Site 3: Incorrect app icon Incorrect splash screen icon Incorrect splash screen background color Consistently inconsistent. Edit: I have not done cleanup procedures and rebuilds on the first two sites. I'm trying to figure out Site 3 and then apply it to the others. Edited January 17 by Clover13
Marc Posted January 17 Posted January 17 Are they always consistently inconsistent on a consistent server? Clover13 1
Clover13 Posted January 17 Author Posted January 17 3 minutes ago, Marc Stridgen said: Are they always consistently inconsistent on a consistent server? Yes, consistently the same result on each site. Also, all three sites are running on the same server with the same setup of all software including IPS.
Stuart Silvester Posted January 17 Posted January 17 If you're using a CDN with default cache-control headers for static files, it's very likely that the device itself is caching these resources. The good news is that the current beta (4.7.15) introduces cache-busting for web app icons, so that may resolve your issue after upgrading. SeNioR- and Clover13 2
Clover13 Posted January 17 Author Posted January 17 3 minutes ago, Stuart Silvester said: If you're using a CDN with default cache-control headers for static files, it's very likely that the device itself is caching these resources. The good news is that the current beta (4.7.15) introduces cache-busting for web app icons, so that may resolve your issue after upgrading. I am deleting the CDN files (S3) so it forces an entire rebuild the next time I upload images via the IPS AdminCP and purging the entire site cache in CF. When I visit the physical links in no-cache private/incognito browser window, they do appear correctly. Part of me wonders if the Apple device is just not interpreting it correctly OR if there is something specific about each image required in the IPS AdminCP for setting up the PWA (i.e. certain exact sizing is required, or certain image properties are required, etc).
Stuart Silvester Posted January 17 Posted January 17 14 minutes ago, Clover13 said: I am deleting the CDN files (S3) so it forces an entire rebuild the next time I upload images via the IPS AdminCP and purging the entire site cache in CF. When I visit the physical links in no-cache private/incognito browser window, they do appear correctly. Part of me wonders if the Apple device is just not interpreting it correctly OR if there is something specific about each image required in the IPS AdminCP for setting up the PWA (i.e. certain exact sizing is required, or certain image properties are required, etc). Right, but if your Cloudfront/Cloudflare configuration said "Cache this static image for 1 year" for example; The device (iPhone) itself is going to cache that resource for a long time and not check the CDN/Website for a newer version. Clover13 and SeNioR- 2
Clover13 Posted January 17 Author Posted January 17 38 minutes ago, Stuart Silvester said: Right, but if your Cloudfront/Cloudflare configuration said "Cache this static image for 1 year" for example; The device (iPhone) itself is going to cache that resource for a long time and not check the CDN/Website for a newer version. Clearing my Safari history and website data should get rid of it though, no?
teraßyte Posted January 17 Posted January 17 17 minutes ago, Clover13 said: Clearing my Safari history and website data should get rid of it though, no? No, because you request the image from Cloudflare, and Cloudflare already has it cached for 1 year.
Clover13 Posted January 17 Author Posted January 17 34 minutes ago, teraßyte said: No, because you request the image from Cloudflare, and Cloudflare already has it cached for 1 year. Even if you purge your entire CF cache for the site?
teraßyte Posted January 17 Posted January 17 7 minutes ago, Clover13 said: Even if you purge your entire CF cache for the site? Sorry, I missed that part in your previous reply. If you cleared also the CDN's cache too, then yes, it should work. Clover13 1
Randy Calvert Posted January 17 Posted January 17 Remember… order of operations matters. Once a change is made on the server, the cdn cache needs popped and then the local browser cache needs popped if it’s there also. If you do it out of order, you could end up redownloading an old/bad object again unintentionally. Clover13 1
Clover13 Posted January 18 Author Posted January 18 Well, not sure if this definitively indicates anything, but the PWA does display both the app icon saved to the Home Screen and the splash screen correctly with my device simulated on Safari Developer Tools ala XCode Simulator 15.2 with iOS 17.2 on my iPhone 13 Pro Max. The PWA also shows correctly on Browserstack's simulator for my device. So either the simulators are off or there is something on my device that is either not displaying correctly or something is cached somewhere other than Safari website data. Also worth noting, 15.2/17.2 on an iPhone 15 did not display the splash screen correctly. Not sure if there is a new size for their latest device that is missing from the meta tags and images generated. Will keep tinkering, but that's as close as I can simulate my device vs completely different behavior on the same actual physical device.
Stuart Silvester Posted January 18 Posted January 18 Give the beta a try, see if the new way we handle the icons flushes out the cache. It's unlikely we'll be making any other changes to the beta before final release. Clover13 1
KT Walrus Posted January 18 Posted January 18 Perhaps reading this web.dev article will help you to understand manifest updates on various devices. https://web.dev/learn/pwa/update Not sure if article is updated to reflect latest OS/browser versions.
Clover13 Posted February 2 Author Posted February 2 This does appear to be fixed across all three of my sites now with the latest release after rebuilding the images. I did notice some nuances when doing a second update where I had to reupload the same images again to force a third rebuild, but eventually everything look good. Correct app icon when saved to home screen. Correct splash screen icon on startup Correct splash screen background color on startup Thanks!
Recommended Posts