Rich Install UI

[00:00:00]
>> Maximiliano Firttman: The last thing that I have for the installation is this, if we look at the Squoosh installation, let me uninstall the app so we can see the installation again. Also we can check edge as well, Microsoft Edge, just to see something different, look at the Squoosh. Look at our installation, let me also install mine.

[00:00:23]
Uninstall, okay, so this is our installation dialog, okay? That you're happy with it, and this is a Sqooch installation dialogue. This one, it's better, right? So, why? In fact, let's try on Edge. Localhost 3000, that's not our app actually, this is our app. That was probably a service worker that has installed the previews on the same port.

[00:00:59]
We have this one here, it's a different one. It says tab mode master, you can also open as a tab window from here. Look at that actually pretty cool. So you can enable tab mode as a user in Edge. And Squoosh,
>> Maximiliano Firttman: .app, you can install the Squoosh app, and here it has the same.

[00:01:24]
Well, here we are the same in Edge, okay? But in Chrome, the other one is better. Why? I mean, I have the slide, I have the theory, but let's try to inspect, let's be hackers. I mean, if I go to the application on the Manifest, I can try to see the Manifest.

[00:01:41]
They're using the old name Manifest.json. If you right-click, you can open the manifest in the new tab. We can see the manifest. The manifest is public of every PWA. This is their manifest. Let me select pretty print so we can see it better. So name, short_name, start_url, theme, color, icon, and then we have description, categories and screenshots with form factor narrow and form factor wide.

[00:02:11]
Let's say phones Dex. And the magic is actually the description and the screenshorts. If you have description and screenshot it will work. So let's do at least one just for testing this. So I will go to the manifest app.webmanifest. So I need to add let's add the description.

[00:02:38]
>> Maximiliano Firttman: So the best notepad app for taking notes while doing Frontend Masters courses. Okay, that's the description, that's the text. And then I have screenshots. That screenshot is using the same schema as icons, so we are talking about objects with a source. So I'm going to create a screenshot.png or jpeg.

[00:03:05]
Wherever, a size that, actually sizes is optional. You don't need to specify the size. They have it here, but I think they're not optional. We can mandatory, but we can add a size, the type. I'm leaving the size for later. So I will take a screen, read a screenshot, and I will use it, image/png.

[00:03:26]
And then it is important you just specify form_factor, narrow or wide. For desktop, it's wide, for mobile, it's narrow. So if you want to see that, reach UI installation dialog, that's the name, that right now works in Chrome, on desktop and Android, you need to specify a description and at least one screenshot for the current form factor.

[00:03:54]
So at least one wide, and one narrow, okay? Okay, so now I will open or take a screenshot. I can just for the screenshot. I can just do something like this. It doesn't matter, right? So,
>> Maximiliano Firttman: Let's take that screenshot. So I will create an image of that.

[00:04:18]
And, what is this? I don't know, the preview. Other images that I had in the preview. So I will save this. Of course, the file I'm going to save is not compressed. It's nothing, justified. But do you know any web app to compress emissions? Yeah, we know. So I've saved this, but I can open a Squoosh.

[00:04:44]
Well, I have uninstalled it that I have it here. Now you know how to create this install button. By the way, look at the bottom. How fortunate you are that we have just got that message. What is that? Update available, what do you think that is?
>> Male Speaker: Probably a server push of new assets, of-

[00:05:09]
>> Maximiliano Firttman: Some assets have changed, and it's asking me, hey, do you wanna reload the app so we can take it now? Okay, I didn't tweet it. Or need to send a message to the team. So they did, I don't know, but it was just luck. [LAUGH] So now I can take my app here, I can open now my web app.

[00:05:31]
So the screenshot is what is 35k it's not so bad anyway. And I can convert it to, no maybe I want.
>> Maximiliano Firttman: This is JPEG. This is so big. There we are. Now we are talking so I kind of use OxPNG. Will save me 55%, which is okay, save it as.

[00:06:00]
Screenshot, actually not this one screenshot. So a screenshot, png is here, okay? It's this is the size.
>> Maximiliano Firttman: Okay? We have a description. We have one screenshot. Let's try. So go back here, refresh, cross your fingers, click here, there we are. We have a better, a richer UI installation, just because I added one screenshot and one,
>> Maximiliano Firttman: And the description.

[00:06:42]
And by the way, in applications manifest, you can see the errors. I'm still having an error. Say, hey, Reacher PWA install UI won't be available on mobile. Why? Because I don't have a narrow screenshot. So, just don't tell anyone, but I will just say you know what this is narrow yeah, yeah.

[00:07:05]
So I have now a narrow screen. So I'm using the same one. So now I don't have any warnings here. So I would also get a Reach UI installation available on moving.
>> Male Speaker: Is the Desktop Safari's New add to dock option, essentially the same as installing.
>> Maximiliano Firttman: Yeah, that's correct.

[00:07:23]
Add to dock in Safari is the the installation part. Unfortunately, they don't call it install. It's add to dock, okay, but yeah, is one. There is a webkit blog post that shows how that works. It's called WebApp on Mac. They don't say PWAs, they say WebApps. And they explain the add to dock, Safari file, add to dock, where you can go to file and from here add to dock, okay?

[00:08:00]
And you can add it as a PWA. Actually, we can try our own, localhost 3000 PWA file, add to dock, it's taking my name, it's taking my icons, so it's reading my data. Let me change the name because I can add more than one. With the same idea on iOS that you can maybe you want more.

[00:08:24]
Let's change the name. Let's say Frontend pal, wherever I change the name. So now I have in my Mac Frontend pal, and this is how Safari is rendering my PWA. I'm not seeing the install, button by the way, that's my media query in action. Okay, that's my media query.

[00:08:44]
Yeah, you should do something with the space and you need to work with that. But yeah, now it's working, right? Actually, I have two versions of my app now. I can see them here. This is Frontend pal, and the other one I think the other one is not installed yet.

[00:08:58]
But if I click here, I have two screenshot now, I have this one and the other one is here, the phone size. I can try to match the 100%. I think that both are 100%. Yeah, it's not exactly the same now. Now they're both are 100% font size.

[00:09:21]
So one is Chrome, the other one is Safari.
>> Maximiliano Firttman: Two apps. This is Frontend app, this is, oops, sorry, it was just do something like this. This is CodePen Masters. This is the Chrome one and this is Frontend pal.
>> Maximiliano Firttman: So yeah, add to dock is how you install PWAs on Safari.