Application Icons

[00:00:00]
>> Maximiliano Firtman: Let's get deeper with the standalone user experience before talking about offline. We have already been talking about the experience, different experiences, like minimal UI, full screen, let's talk about the icon, okay? So when you install a PWA on desktop, your icon will appear as any other icon in the system, okay?

[00:00:19]
No matter what, it will look like any other acronym system, if it's window, Mac or Linux. On Android, there are two possibilities, we can get the shortcut, or we can get a web APK. So let's try to dig into these two options. By default, let's talk about shortcut icons.

[00:00:44]
They create a shortcut to a browser's engine in the home screen, only in the home screen, not in the launcher. On Android, you have two places, iOS is kind of the home screen, and then we have also the gallery. But here you have two places, the home screen and then the applications.

[00:01:06]
Incase you are not an Android user, let me show you that here.
>> Maximiliano Firtman: So this is my home screen, and this is my launcher. I have both options. Well, a shortcut will only be available at the home screen, okay? No icon in the launcher. So, it's an app experience, but it doesn't feel like a full app, okay, 100%.

[00:01:37]
So it doesn't appear at the apps list, that's the problem. So, all browsers use this method by default, okay? By default. And from Android 8, they include a browser's badge. What is that? Here I have the same Starbucks PWA installed with a lot of different browsers. What's about that little icon there that says, this is Edge, actually this is the old Edge icon, and Samsung Internet browser, Firefox, and so on.

[00:02:15]
And yeah, it doesn't look so nice, right? We don't wanna see that small icon there. So what we want is webAPK icons. WebAPK icons will appear only if we are passing the PWA criteria, that right now our web app is not passing because, for example, we don't have the icon set yet, okay?

[00:02:42]
In this case, the webAPK is a full Android native package. Actually, APK is Android package. If you have ever played with native Android development, it's the file format that the Android operating system uses to install and execute apps. So it's a full Android native package. But be careful, the package only contains metadata.

[00:03:05]
So it's not going to download your HTML, CSS and ship that, no, okay, it's just the metadata, the URL, the name of your app, your icon. This is kind of mind-blowing, the APK is installed silently. Of course, the user has to invoke Chrome PWA installation, but then we won't see any dialog saying, hey, do you wanna install this APK?

[00:03:30]
No, no, it's installed silently. Why? Because that APK is signed by Google, by the Play Store. It has the Play Store signature. It says, Google is shipping this, so the browser is trusting the signature and installing the app silently. It will add an icon to the home screen and also to the launcher, both.

[00:03:59]
And for that, you need to use Google Chrome as your browser, and you need a phone with Play Services, but most devices have Play services, but have in mind that there are some that are not, Huawei devices. And you need to use Google Chrome, so if you're using other browsers, Firefox, Firefox don't have the ability, the power, the phone number of the Google person that is responsible for this.

[00:04:29]
But actually, Google is not yet, unfortunately, offering the webAPK service to other browsers, only Chrome has it, okay? On the other hand, if you have a Samsung device, because in this case Samsung has also signature. If you're using the Internet browser, I'm not sure if you know that Samsung has its own browser.

[00:04:51]
It's called the Internet browser, Samsung Internet. If on that one, on Samsung devices, you can also install webAPKs. I mean, users don't realize if it's webAPK or shortcut, but you will get the full experience, the full Android experience. Okay, make sense? And something similar happened with Huawei devices, they're not using webAPK, they're using something similar, but the effect is the same one.

[00:05:18]
When you install PWA on a Huawei device using their own browser, you get the full experience. Okay, make sense? Any question on that, on webAPK? Nope? So, to finish the process and finally meet the PWA criteria, we need to add the icons to the web app manifest. So, what is that?

[00:05:44]
It's actually pretty simple, it's an array of icons that we define in the manifest. For each icon you win in the source, the size is property, and the type, okay? So some recommendations, because actually, what are the sizes we need to use? I mean, the spec, it's agnostic.

[00:06:02]
It's, do wherever you want, okay? So every device will try to pick the closest icon that matches their requirements. But for the real world out there, it's a good idea to have one PNG in the SRGB color space that Android is going to use and desktop is going to use as well.

[00:06:24]
And if there is no exact icon available for that particular phone, it would be the closest one, and the sizes that I recommend are at least 192 by 192, 512 and 1024, okay? I mean, you can just provide one, and it was just the only icon it has, okay?

[00:06:45]
There are some deprecated sizes, and actually if you go and ask ChatGPT, what are the recommended sizes? I'm pretty sure it would recommend a lot, because there are a lot of articles out there on the web that are outdated. That they will say, you need to put this and that there, all sizes that no one is using it anymore, so it doesn't worth the time.

[00:07:06]
Also, today, you can also provide an SVG file, and some platforms will take it. WebAPK will take it, and also some other devices, mostly on desktop, will take the SVG, so then you don't need to create different versions, okay? So on some operating systems, such as MacOS, it will use the SVG if you have it.