Splash Screens

[00:00:00]
>> Maximiliano Firtman: So after the icons, something next is talk about the Splash Screens. So when a Splash Screen is just a mobile app design pattern. Be careful with mobile. So it's mobile only that renders an aesthetic image while the app process is loaded. So it's when you open an app and you see in that animation, it's just on a static image while the rest is slowly.

[00:00:21]
So on Android it works this way, they are automatically generated. So I don't need to do anything to get an Splash Screen on Android. You can't provide your own image. They use just the meta data from a Web App Manifest, I will show you which parts. So it looks like this, and it's taking exactly this information.

[00:00:45]
It's taking the theme color from the status bar. Then the background color, it's a property that we haven't defined in our manifest for that background that you see there. Then the icon 512 I prefer there. And finally, the name of your PWA, the large name. And it generates an image with that.

[00:01:10]
Now, let's jump into iOS. So on iOS and iPadOS, I have good news and bad news, okay? We'll start with the good news. It won't use the App Manifest meta data. I hear you say good news, yeah, yeah. Because that means that we can create our own images.

[00:01:28]
So you can customize with your logo, you can create a piece of art, whatever you want, okay? This is where the good news ends, why? Well, they are known as Startup Image. So Apple named them as Startup Images. We define them through a link. So we have to create the PNG files and define them through a link element.

[00:01:53]
Also, for some reason I actually reported this and know an answer to the WebKit team, you must use the deprecated meta tag for them to appear. That is deprecated, and we shouldn't be using that meta tag anymore. So actually, the Web App Manifest spec replaced that one but yeah, I don't know.

[00:02:17]
And here comes the worst problem, it must match exactly the current device's screen size. If the PNG is one pixel more or less than the current image, it will ignore it, okay? On iPad it gets even more complicated. So let's see the code. It's apple-touch-startup-image, and you pass the PNG file.

[00:02:40]
And that the first one is the meta tag that you need to add, apple-mobile-web-app-capable. When Steve Jobs was presenting Web Apps for iOS in the video we saw earlier, he was talking about that meta tag before the display standalone in the manifest. Well, the problem is that we need the image with the exact size of the device screen.

[00:03:05]
And what's the problem? We have a lot of iPhones with different screen sizes, okay? Actually, well, you can see right now you need to create six images. So those are the groups, okay? I'm just showing you this really quickly because you will get the idea. Also, we need Landscape versions.

[00:03:26]
Fortunately, I'm not sure if you know this but only Landscape if you have an iPhone, the home screen works Landscape only in some devices, only on the original Plus now known as Max version. If not, there is no Landscape, so I don't have, I have the Pro only.

[00:03:44]
So if I go Landscape, you don't see my icons going Landscape, okay? You need the Max for that. So we need two versions for Landscape. So for iPad, we have several iPads available. This year we have more, even more. Hey, we have two kinds of iPad, there are two kinds of iPad program.

[00:04:03]
We have the old one, the new ones, blah, blah, blah, blah. Portrait and Landscape in that case, for everyone you need Portrait and Landscape. And then we have a Split View, where it can be a third, two-thirds. So yeah, we have a problem, right? And also, we have Side View.

[00:04:20]
That's when you have one on top of the other one, one window on top of the other one. And now on some iPads, you can even have your own size, Any size. You can resize the window. So it looks like this, all the image if you want. And actually, this chart is outdated, is from a couple of years ago.

[00:04:42]
So we have a problem, right? Because you need to create more than 20 PNGs. And also, the sizes properties is ignored, so you need to use media queries to specify them which is kind of whoo. Imagine your HTML should contain all these things there. So yeah, it's like we're not going to do that, right?

[00:05:09]
So let's talk about two solutions to the problem. One, it's called the PWA static asset generator, it's actually available on npm. You just run command line, you create one SVG with what you want, and some rules, and it will actually create all the versions for you, okay? This is a video, so there we are.

[00:05:30]
So of how that works, so you request that, and it creates all the images for you, okay? Static images for you and then it gives you the links that you need to copy and paste into your HTML, okay? So yeah, it is what it is. But there is another solution, using some hacky solution but it works.

[00:05:52]
It's a Client Side Generator. So using canvas, an invisible canvas or memory only canvas, you can draw on the screen at PNG based on the current device dimensions. Then convert that into the Data URI and inject that into the HTML, and it works. And if you don't wanna do it manually, there is a library known as PWACompat, created by the Chrome team that will actually do that.

[00:06:22]
That it takes the Web App Manifest and generates assets for other browsers as well and including the startup images on the fly with JavaScript for iOS and iPadOS. And actually, it emulates the Android splash screens for iOS. The final screen that you get is similar to the one you get on Android, okay?

[00:06:43]
Which if you're okay, it what it is. And in this case, after you include the manifest in your HTML, you add the script for PWACompat. And if you want, you can even style that image that is going to be generated just by using some styles, okay? So maybe this is the simplest solution to create a good startup image solution, okay?

[00:07:14]
For iOS, PWACompat, okay? Let me get out of here for a sec. So if you Google PWACompat, you will find a couple of, of course, of results. You have the NPM solution, and then we have an article. I'm not sure if you know this guy, okay? That says you shouldn't use Chrome PWACompat libraries.

[00:07:41]
And I explain why, okay? Anyway, you can read my article, it's from five years ago, okay? Why? Because it's actually injecting out of meta tags that are deprecated and yeah, okay, it's fine but just have in mind that you will have that problem. This is the official article talking about this thing, how that works.

[00:08:02]
I think they have a video here so you can see how it looks like. I don't know why, well, they have a problem with rotation, there we are. So you see that's the image, that's this startup image generated by the library, okay? The emoji typer. If you wanna try this on our wall, we just need to copy and paste this into our index.html after the manifest, okay?

[00:08:28]
After the manifest. Let me just highlighten this, just the script, okay? Just that. So if I run this, now if we inspect this, if you go to the head, we may find some other things that we don't have. We have these meta tags. So this x5-page-mode, what is that meta tag?

[00:08:52]
>> Maximiliano Firtman: I don't know, okay? So it's actually a meta tag from 15 years ago from a device of Sony Ericsson, whatever. So I was actually suggesting not to use this just because you think it's a happy library, because it's adding some meta tags, it's injecting some meta tags that you don't know what it's doing.

[00:09:12]
So and they are deprecated, just that if you know what you're doing it's fine, okay? And I'm not seeing any image being injected because this is Chrome. So it's detecting that it's not really an iPhone, so it's not creating images just for the sake of creating images. But if I run this on my iOS simulator, so if I open now here and I inspect my iPhone simulator.

[00:09:40]
So if I go to the iOS simulator and I run my app, I refresh my app just in case, now I go to Safari on my desktop. So Safari on the Mac and I will try to inspect my iPhone session. So now I have my inspector on one side and my iPhone on the other side.

[00:10:01]
So if I inspect the head, you can see that at some points I have two links, apple-touch-startup-image with a base64 image embedded there. For Portrait and Landscape, it is hacky, okay? I can see some of your pain faces, but it works. So that means that when you install this, when you install now a new PWA, it's not going to change the previous installations.

[00:10:33]
Now, when I open this, I see my Splash Screen for iOS and I don't need to create 100 versions of my image.
>> Student: Sorry, I'm confused about which solution this is, cuz it's not using the PWACompat.
>> Maximiliano Firtman: It's using PWACompat, yeah.
>> Student: But you don't want us to use it.

[00:10:52]
>> Maximiliano Firtman: So I want you to at least understand what the thing is doing. For example, it's injecting this meta data, Apple Mobile Web App title. That meta tag is overriding the manifest. So if you don't know that, I mean, you may have some problems. So I mean, the title was kind of click bait, but they was trying to say, hey, don't just add it because it's not harmless.

[00:11:19]
It's injecting things, it's doing little things. So understand what's going on because then you may have a problem in the future and you don't know what's going on, why this is not working. Because the library is injecting some meta data that has nothing to do with the startup image that you may don't want.

[00:11:36]
Maybe what you want is open source so you can just take the part that creates the startup image, the Client Side part, and remove the rest, okay? Things like that. I think that's that's pretty cool. Just have in mind it was just a warning.