Is there a way to generate only two (portrait and landscape) apple splash screen images?
justingolden21 opened this issue · comments
Is your feature request related to a problem? Please describe.
Too many files are generated. They are huge, clutter, and require more network requests for the user, more time to build, etc, and seem generally unnecessary when you could have one high res image per screen orientation.
Describe the solution you'd like
A CLI flag to only generate one specific portrait/landscape resolution for apple
Describe alternatives you've considered
Doing this manually
Additional context
I have no idea why apples requires a 2048x2732 image, when all other companies and devices (google, microsoft) are good with a 512 image and a color... But regardless of the reason, having this one image should suffice. The generator makes 2 manifest icons and 25 (!) apple startup images... I mean the HTML alone is over 5kb... It's just too much for a lightweight PWA; I'd rather at least have the option (default to how it currently works) to only generate a few splash files. Currently, it runs forever, then generates a bunch of files I don't need, I have to delete them all, and remove the links from my html page(s). Or, the user is stuck with a dozen more files than they need, a bunch more network requests, and my app takes longer to load and to install, more data is used hosting, etc.
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2048-2732.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2732-2048.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1668-2388.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2388-1668.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1536-2048.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2048-1536.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1668-2224.jpg" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2224-1668.jpg" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1620-2160.jpg" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2160-1620.jpg" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1284-2778.jpg" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2778-1284.jpg" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1170-2532.jpg" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2532-1170.jpg" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1125-2436.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2436-1125.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1242-2688.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2688-1242.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-828-1792.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1792-828.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1242-2208.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2208-1242.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-750-1334.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1334-750.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-640-1136.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="img/icons/apple-splash-1136-640.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">Also, have you considered https://realfavicongenerator.net/ for favicon sizes and guidelines?
Can I link to multiple html files?
When running npx, will it remove chromium once it's done? If I'm only running it once, I wouldn't want all of chromium sitting on my hard drive for each project I run this on...
You are absolutely correct when you say that Apple's requirements are ridiculous, but I wouldn't recommend just delivering one startup image. Apple/Safari has a long history of botching webapps, especially the ones that don't conform to all of Apple's demands. As an example, I believe there currently is an issue where Safari will simply stretch the startup image out of proportions if it doesn't perfectly fit the aspect-ratio of the device.
the user is stuck with a dozen more files than they need, a bunch more network requests
Non-Safari browsers will not download the images generated for Apple devices, and Safari will only download the appropriate image for the device it runs on, so this is not a huge issue.
If you really want to get rid of these extra images, I think you should ask for an option to completely disable generation of Apple startup images. That will make the experience worse for your Apple users, but not as much as if you only generate some of the images.
Also, is there a way to generate transparent icons but opaque splash screen images?
Thanks in advance for listening to my input : )
One more thing (although I don't want to flood your repo with issues so I'll comment here for rn)
Is there a way to use multiple manfiests? I'm planning on localizing my app, which means a manifest for each supported language. As is right now, I'd have to copy and paste the same pwa asset generator line with links to different manifests each time, have a command to run all of those commands at once, which would also then go through the entire image creation process multiple times
One more thing (although I don't want to flood your repo with issues so I'll comment here for rn)
Is there a way to use multiple manfiests? I'm planning on localizing my app, which means a manifest for each supported language. As is right now, I'd have to copy and paste the same pwa asset generator line with links to different manifests each time, have a command to run all of those commands at once, which would also then go through the entire image creation process multiple times
Hi @justingolden21, thanks for your feedback. I will quote reply your questions, starting with this one.
pwa-asset-generator doesn't support changing multiple manifest files at once. You need to run your command multiple times. I'm curious about your use case as I haven't seen such a scenario where multiple manifest files are provided, per locale. Do you expect your users to add your app to their home screens per locale?
Also, is there a way to generate transparent icons but opaque splash screen images?
Thanks in advance for listening to my input : )
You need to execute two commands, one for splash images another for icons only. Please see the relevant section on FAQ in docs - https://github.com/onderceylan/pwa-asset-generator#how-can-i-generate-a-transparent-favicon-and-app-icons-with-opaque-background.
Can I link to multiple html files?
When running npx, will it remove chromium once it's done? If I'm only running it once, I wouldn't want all of chromium sitting on my hard drive for each project I run this on...
No, you can't link to multiple HTML files. You need to run the command multiple times or manually duplicate.
npx commands cache the dependencies under your configured npm cache folder, see https://docs.npmjs.com/cli/v7/configuring-npm/folders#cache. npm clears the cache with it's internal logic.
If you worry about your disk storage, you can download pwa-asset-generator globally, with npm i -g pwa-asset-generator command and you'll still be able to execute it on any project you might have.
If you have any chromium based browser installed on your system, pwa-asset-generator won't install the browser anyway, but will use your system browser instead.
Also, have you considered https://realfavicongenerator.net/ for favicon sizes and guidelines?
Yes, we did. Please see the discussion here - #606
Is your feature request related to a problem? Please describe.
Too many files are generated. They are huge, clutter, and require more network requests for the user, more time to build, etc, and seem generally unnecessary when you could have one high res image per screen orientation.Describe the solution you'd like
A CLI flag to only generate one specific portrait/landscape resolution for appleDescribe alternatives you've considered
Doing this manuallyAdditional context
I have no idea why apples requires a 2048x2732 image, when all other companies and devices (google, microsoft) are good with a 512 image and a color... But regardless of the reason, having this one image should suffice. The generator makes 2 manifest icons and 25 (!) apple startup images... I mean the HTML alone is over 5kb... It's just too much for a lightweight PWA; I'd rather at least have the option (default to how it currently works) to only generate a few splash files. Currently, it runs forever, then generates a bunch of files I don't need, I have to delete them all, and remove the links from my html page(s). Or, the user is stuck with a dozen more files than they need, a bunch more network requests, and my app takes longer to load and to install, more data is used hosting, etc.<link rel="apple-touch-startup-image" href="img/icons/apple-splash-2048-2732.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"> <link rel="apple-touch-startup-image" href="img/icons/apple-splash-2732-2048.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"> <link rel="apple-touch-startup-image" href="img/icons/apple-splash-1668-2388.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"> <link rel="apple-touch-startup-image" href="img/icons/apple-splash-2388-1668.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"> <link rel="apple-touch-startup-image" href="img/icons/apple-splash-1536-2048.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"> <link rel="apple-touch-startup-image" href="img/icons/apple-splash-2048-1536.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"> <link rel="apple-touch-startup-image" href="img/icons/apple-splash-1668-2224.jpg" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"> <link rel="apple-touch-startup-image" href="img/icons/apple-splash-2224-1668.jpg" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"> <link rel="apple-touch-startup-image" href="img/icons/apple-splash-1620-2160.jpg" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"> <link rel="apple-touch-startup-image" href="img/icons/apple-splash-2160-1620.jpg" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"> <link rel="apple-touch-startup-image" href="img/icons/apple-splash-1284-2778.jpg" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"> <link rel="apple-touch-startup-image" href="img/icons/apple-splash-2778-1284.jpg" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"> <link rel="apple-touch-startup-image" href="img/icons/apple-splash-1170-2532.jpg" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"> <link rel="apple-touch-startup-image" href="img/icons/apple-splash-2532-1170.jpg" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"> <link rel="apple-touch-startup-image" href="img/icons/apple-splash-1125-2436.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"> <link rel="apple-touch-startup-image" href="img/icons/apple-splash-2436-1125.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"> <link rel="apple-touch-startup-image" href="img/icons/apple-splash-1242-2688.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"> <link rel="apple-touch-startup-image" href="img/icons/apple-splash-2688-1242.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"> <link rel="apple-touch-startup-image" href="img/icons/apple-splash-828-1792.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"> <link rel="apple-touch-startup-image" href="img/icons/apple-splash-1792-828.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"> <link rel="apple-touch-startup-image" href="img/icons/apple-splash-1242-2208.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"> <link rel="apple-touch-startup-image" href="img/icons/apple-splash-2208-1242.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"> <link rel="apple-touch-startup-image" href="img/icons/apple-splash-750-1334.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"> <link rel="apple-touch-startup-image" href="img/icons/apple-splash-1334-750.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"> <link rel="apple-touch-startup-image" href="img/icons/apple-splash-640-1136.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"> <link rel="apple-touch-startup-image" href="img/icons/apple-splash-1136-640.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
This is a duplicate of #446.
Hi @justingolden21, thanks for your feedback. I will quote reply your questions, starting with this one.
pwa-asset-generator doesn't support changing multiple manifest files at once. You need to run your command multiple times. I'm curious about your use case as I haven't seen such a scenario where multiple manifest files are provided, per locale. Do you expect your users to add your app to their home screens per locale?
Yeah, I will be serving my app in different languages, so the manifest for the correct locale is dynamically linked and automatically used
Hi @justingolden21, thanks for your feedback. I will quote reply your questions, starting with this one.
pwa-asset-generator doesn't support changing multiple manifest files at once. You need to run your command multiple times. I'm curious about your use case as I haven't seen such a scenario where multiple manifest files are provided, per locale. Do you expect your users to add your app to their home screens per locale?
Yeah, I will be serving my app in different languages, so the manifest for the correct locale is dynamically linked and automatically used
Have you had a chance to visit this issue and read the discussion over suggestions and possible roadblocks?
Thank you so much : )
Checking that out rn