Adding a Maskable App Icon

[00:00:00]
>> Maximiliano Firtman: Okay, so maskable.app, that was the idea. Actually, it's a PWA, you can open an icon file, see how it looks like. So you can take any icon you have here. Actually, I do have the icon on our project in the icons folder, we do have an icon.

[00:00:17]
So that's the icon, so we can see that, yeah, maybe it doesn't fill and I can see here there are some options, like see a ghost image, you can see in different shapes how my icon will look like. So you realize that maybe we need to work with that, okay?

[00:00:36]
So we're going to do that. So let's go to the code now and let's add the icons collection.
>> Maximiliano Firtman: So, it's an array. In the icons folder, we have two icons here for testings, which is okay. So we create objects with source, so it's icons/icon-512.png. The sizes property is the same property that we have in img or the picture element, actually, the source of the picture element.

[00:01:11]
This is 512 by 512, always square, and the type, image/png. And I have two at this point, okay?
>> Maximiliano Firtman: 1024 by 1024, okay?
>> Maximiliano Firtman: Do we have any maskable one? Not yet, so I'm going to create one, okay? How can I quickly know if this is working before actually starting the PWA?

[00:01:40]
Chrome, remember Chrome? Well, we can go to localhost 3000, open DevTools in the Application tab, in the Manifest tab, I have a way to debug my manifest, so I can see all the details. It's really my computed app ID. The start URL, the color, I have some properties that I haven't used, and I can see here my icons, so they're working.

[00:02:08]
And also here I have a check mark, Show only the minimum safe area. I can see that I have a problem, okay? That I need to solve. But this is a quick way to see that. Another quick way is use the iOS simulator. So, let me go back to the iPhone, that looks bigger on the screen.

[00:02:30]
Let me close the iPad. So if I refresh, and if I try to add this to the home screen again, I should see the icon. That means it's working. On iOS, it's fine, I don't think I need, I mean, it's adding some rounded corners, but yeah, it's an iOS thing.

[00:02:47]
I mean, it looks fine, right? Looks good. So now my Codepad Masters look good when I'm trying to get into the home screen with the similarities, not simple. Cmd+Shift+H will actually do that for me. If the gesture is not simple, okay? It will work, so you can see the icon there as well, okay?

[00:03:08]
Here. So let's make the maskable version of the icon. So I will use this app, Maskable.app. The Maskable.app has two versions, the Viewer and the Editor, okay? Right now we need the Editor, because we have already viewed that. So you go to Editor, the first step is to upload a layer.

[00:03:35]
So I'm going to upload my current icon. So I will go and take PWA>webapp>Icons>1024, that one. And we see that, yeah, it doesn't look nice, here I can check on every possible shape on Android. So what, do I need any more padding until I'm happy? And yeah, maybe the background is not what I want, but here I have the layer, this is the background.

[00:04:04]
So I need to just click here, and try to change the color. I do have a color picker, so I can go, pick the color, voila, have it. And I export this, and I'm done. So, simple. So I export this and it says, okay, which version do you want?

[00:04:22]
Well, they have a rounded issue, they should round the number. But anyway, I know actually the author, so I can send a Tweet to him later. So, which version do you want? Typically, for this one, it's 512. That's the one that we did, typically used for the, but you can use any number actually, it's going to be resized.

[00:04:45]
Okay, download it, I will download this here, icons, maskable_icon, let's call it maskable_icon. Let's use the same pattern like kebab case, this is maskable-icon-512. Okay, cool, let's go back here, and I need to add a third one. I'm not replacing the other one, okay, because we still need the other one.

[00:05:10]
So I'm just adding another one that will have another purpose, maskable, that is now the maskable-icon-512. And with that, we are done, okay? So now if I try this here, I have these two versions, and if I show only meme, I can see that this one is okay, because this one is a maskable one, so I'm good now.

[00:05:38]
On Android, it will get the best possible icon on any shape.