Generating Splash Screens for iOS PWA

[Falco]

In Android, the splash screen is auto generated using information in the webmanifest (icon, short_name, and background_color). But on iOS the web app must provide the splash screen, and it should match the device size.

I suggest generating those splash screens automatically in Discourse, using the site logo. This can happens in a background job, and it should refresh every time the logo changes.

Using ImageMagick (which we already bundle) convert utility:

convert -background '#{background_color}' -gravity center logo_big.png -extent #{size} -fill '#{secondary_color}' -pointsize 72 -stroke '#{secondary_color}' -annotate +0+400 'Meta' splash_#{size}.png

We will get the following images:

|Landscape|Portrait|
|–|–|–|
|

|

|

Other images

Which would be inserted into the page HEAD

code

<!-- Portrait -->
<!-- iPhone X (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="/apple-launch-1125x2436.png">
<!-- iPhone 8, 7, 6s, 6 (750px x 1334px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-750x1334.png">
<!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus (1242px x 2208px) -->
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" href="/apple-launch-1242x2208.png">
<!-- iPhone 5 (640px x 1136px) -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-640x1136.png">
<!-- iPad Mini, Air (1536px x 2048px) -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-1536x2048.png">
<!-- iPad Pro 10.5" (1668px x 2224px) -->
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-1668x2224.png">
<!-- iPad Pro 12.9" (2048px x 2732px) -->
<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-2048x2732.png">

<!-- Landscape -->
<!-- iPhone X (2436px x 1125px) -->
<link rel="apple-touch-startup-image" media="(device-height: 375px) and (device-width: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation:landscape)" href="/apple-launch-2436x1125.png">
<!-- iPhone 8, 7, 6s, 6 (1334px x 750px) -->
<link rel="apple-touch-startup-image" media="(device-height: 375px) and (device-width: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation:landscape)" href="/apple-launch-1334x750.png">
<!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus (2208px x 1242px) -->
<link rel="apple-touch-startup-image" media="(device-height: 414px) and (device-width: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation:landscape)" href="/apple-launch-2208x1242.png">
<!-- iPhone 5 (1136px x 640px) -->
<link rel="apple-touch-startup-image" media="(device-height: 320px) and (device-width: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation:landscape)" href="/apple-launch-1136x640.png">
<!-- iPad Mini, Air (2048px x 1536px) -->
<link rel="apple-touch-startup-image" media="(device-height: 768px) and (device-width: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation:landscape)" href="/apple-launch-2048x1536.png">
<!-- iPad Pro 10.5" (2224px x 1668px) -->
<link rel="apple-touch-startup-image" media="(device-height: 834px) and (device-width: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation:landscape)" href="/apple-launch-2224x1668.png">
<!-- iPad Pro 12.9" (2732px x 2048px) -->
<link rel="apple-touch-startup-image" media="(device-height: 1024px) and (device-width: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation:landscape)" href="/apple-launch-2732x2048.png">

[sam (Sam Saffron)]

For v1 while apple PWA is messy maybe just ship a blank 1x1 gif? or a stock “discourse loading” single image.

If we are cleaning this stuff up and entering auto generation territory we should clean this up first:

I should be allowed to just upload one large icon and then discourse should resize it to all those things for me and fill the blanks… plus calling this thing apple touch icon these days is misleading.

[Falco]

@sam

For v1 while apple PWA is messy maybe just ship a blank 1x1 gif? or a stock “discourse loading” single image.

The PWA works fine without a splash screen, it stays blank until the page loads, so no need for that.

@sam

I should be allowed to just upload one large icon and then discourse should resize it to all those things for me and fill the blanks… plus calling this thing apple touch icon these days is misleading.

So we hide favicon and apple touch icon and generate those based on large icon?

[sam (Sam Saffron)]

@Falco

So we hide favicon and apple touch icon and generate those based on large icon ?

In some rare cases people may want to override smaller images. But our happy path should be … you upload one logo… as big as you got… say 400x400 and we just do our magic to have optimized images in all the sizes we need.

Probably best just re-purpose “large icon” and make it the only recommended thing to fill up.

Yeah if the PWA still works now I would hold off on any fancy here that is PWA specific.