App Shell UI Spacing

[00:00:00]
>> Coming back on iOS that we know it's working there it looks like an app, we have a couple of problems. The first problem that I see is that because it's a web I can actually select part of the website like this, okay? And sometimes I can select parts that I don't want to, like the buttons content including the icon and it looks like to webby and it doesn't look nice, okay.

[00:00:32]
So it's weird. Maybe we went out, I mean, if I add some notes here, maybe I want to copy the note content, but not the button, not the delete button. It doesn't make any sense. So by default, everything is selectable as web content. And because now we are an app, the user expectation is that we should react like an app.

[00:01:00]
So we need to work on this. And so we need to work a little bit on our CSS to make it more up capable, if you want. So back in our CSS, what we need to do is disable user selection, that's a CSS property user-select on some parts, at least.

[00:01:22]
For example, we can look at our icons. It's a span icon. And also you we have the buttons. So we can say that the buttons with the icon inside. It's going to read user-select, none. Just to be safe with all the browser's we still need a prefix, sorry about that that's -webkit-user select.

[00:01:51]
So we can apply these to the button. Maybe we can start the class here, to the icons and maybe to the title, the h1. So if I do this If I go back here we have the refresh problem, okay. We need to refresh and we don't know how.

[00:02:18]
So the only way is to actually kill the app and open the app again. Now, if I try to select the title it doesn't work, if I tried to select the button, that's what I'm trying, it's not working, okay. And if I try to something here, like lunch, okay.

[00:02:43]
I can select lunch, the text but not the icon, okay? So again this is not specifically for PWA's, but it's something that it's a design pattern that we should follow. So that's the first part. Another thing that I have here if you look at the bottom, our toolbar, something's wrong.

[00:03:05]
So what's wrong? Well, that Learn button doesn't feel like being in the right place. And probably think it will. In Safari, we don't have the problem because Safari has its own tab bar at the bottom, even when it's hidden, but I don't have enough content here to hide that URL.

[00:03:26]
But even when it's hidden, I can hide that from here probably hide toolbar, there. We still have a little piece of browser's UI at the bottom that maybe work, so my button is working. However, when we are in a standalone application, the problem that we have is that this area, the bottom is used by the West to actually trigger the multitask mode, or to go right and left and move between apps.

[00:04:02]
And that's known as an unsafe area. And if you want to render content there, you need to understand that that content won't be interactive. So my Baton, my whole toolbar is not interactive. So we have a problem, how to solve the problem. Well, maybe you are thinking, well, Hey, max, that simple, just go find the toolbar.

[00:04:25]
I think I'm pointing to the main toolbar here and add the padding bottom of value I don't know the value but let's try like I know 32 pixels, okay. If I save this, Kill the app, we can pull the refresh button while we're debugging and now it works, okay.

[00:04:47]
Yeah, but the problem is that I also have the padding here. And it's, I don't like it. Well, we can use media queries, okay and apply. We haven't used a media query yet, but we can apply this padding only in standalone mode. Can we do that? Yes, it's possible to do that.

[00:05:07]
Let me show you how, because it will be useful later on. But I don't think it's necessary for this particular example. You can have immediate query and there is a new attribute that we can query it's called display mode. And as values, I can use all the values From the display property in the manifest, such as standalone.

[00:05:29]
So I can say on standalone, I wanna apply to this selector, the padding bottom. So if I do that, I'm kind of better Even on desktop, I'm not seeing that. If I refresh here, I'm not seeing the padding, and I'm still seeing the padding. Let me close the PWA I should still see the padding here.

[00:06:04]
But this is not yet a good idea. Why? Because there are some iPhones or Androids without that problem. For example, I can open another simulator that it's the iPhone SE the iPhone SE, okay? Or the iPhone 8 if you want, has a home button. So we don't have those gestures, we don't have that unsafe area and we will still be adding a padding.

[00:06:33]
So it seems more complicated that just putting in a value there. Fortunately, we have a solution. Today, modern browsers are exposing some CSS environmental variables. These are kind of constants that we can apply. For example for these, for the safe areas. In the GitHub project, I have a text file that says snippets txt file that is just where I have here a couple of snippets that are, if you want to type them or if you want to copy from my screen it will take time.

[00:07:19]
So you can just copy and paste from here for those pieces that will take more code. For the safe area, we have these environmental properties. So I'm not sure if you have used this before, but now in CSS, we have this env function. So we can use env to actually set the inset-bottom.

[00:07:43]
In this case it will use the value that applies to that particular phone in that particular context. The problem of applying these only on padding bottom is that it's not always bottom because they were here we have this one where we don't see that horizontal rule in this iPhone SE.

[00:08:10]
So we don't need the padding on the phone. So, Something that we need to remember is that I can go landscape. And now if I go landscape, okay, we have the safe area, in like in a different position. So maybe we actually want to apply the safe area on every edge.

[00:08:32]
And that's actually this kind of padding or margin, you can apply to padding or margin, it's up to you. The important is just in case. So I will apply these to the padding. And this is what I'm looking for top right bottom left. Remember this is clockwise. So, and in this case we are applying the margin.

[00:08:59]
And something that we can do is also apply a default margin. Maybe you say okay, something that you want is the bottom, but if there is no margin, I want five bucks. So there is a second argument to this function that is optional where you can define like a fallback value in case there is no safe area in the bottom variable, okay?

[00:09:21]
Just in case you need that. So now if I apply this. I don't need to apply the media query actually, we can keep that for the browser as well. But it's up to you. Let's keep the media query anyway. So let's open here in this iPhone, localhost 5000.

[00:09:48]
That's my server. And I'm going to install the app. So the share at your home screen cope up with the right icon. Okay, looks good. And if I open this, I see my button without. Any padding because I don't have that unsafe area and if we try this now on the iPhone that needs that safe area, we're still not seen that.

[00:10:16]
That is because from iOS 15, we have something else that we need to add. This will work on iOS 14. So to understand what do we need to add, let me show you something. If I go landscape on the iPhone 13, you can see that we have some orange bars are the sites, okay?

[00:10:39]
So that is that by default, we do not have full support for 100% of the area for us. So by default we can not render content at the right at the left of the screen. We can request access to that. And that will also solve our problem by adding something in our viewport metadata.

[00:11:06]
Going back to HTML, I will look for my viewport metadata and within the content, I will add another property. That is a new one. In fact, it has been for a couple of years since the first iPhone 10. So I'm going to use coma and it's called viewport-fit, viewport-fit equals cover.

[00:11:28]
In this case, we're asking OS to give us all the available viewpoint. That means that now our content can be under, a notch or it can be under maybe in a space of the display that is hidden for some reason but then we can use the safe areas to actually add padding, some margin.

[00:11:55]
So now if I save, and go back here, I can kill my process and open the app again. And now we see that we finally have the padding in the toolbar at the bottom. And if I do the same on my iPhone SE, so I kill the process and open the app again.

[00:12:20]
I don't have the padding. So now it's working on iPhones with the multitask Chester, we have the padding and the other iPhones or Android or desktop will not have that talent. What happens if I try landscape now? If I go landscape, now you can see that now,100% of the screen we don't have those vertical bars or the sites.

[00:12:43]
So 100% of the screen is actually for my content. So you need to be very careful here and check that we have enough padding in the body or in the main container of your content too because if not our content will actually be rendered behind the notch and we know that's not visible.

[00:13:08]
So for now, our PWA looks nice, at least on iOS. It looks nice. But we know that when we go to dev tools in Chrome and check the manifest, it says instability that we don't have a service worker. So that's the next step. Because we actually want our app to work offline and with that we will pass the PWA criteria and it will be installable on desktop and also on Android.