Display Modes

[00:00:00]
>> Maximiliano Firtman: Let's get deeper into Display modes. So far we've used one display standalone but actually, there are more in the spec. The first one and actually the default value is actually browser, which means you can create a manifest and specify display browser. That means you don't want to be a PWA, you just wanna provide some meta data such as the theme color and the icon in a manifest.

[00:00:30]
But if the user is adding that to the home screen, you wanna a shortcut to the browser. That's what you're saying, okay? So that's not for PWAs. Standalone, it's the most common value, but there are more. We have fullscreen, and I will show you the difference here. Actually, fullscreen today is Android compatible only, so it works only on Android.

[00:00:53]
On all the rest and typically there is, we have like a chain here, a fallback chain. So if fullscreen is not available, typically falls back to standalone. Minimal-ui, I will show you, you will understand this in a sec when you see some examples. Minimal-ui fall backs to browser, so be careful with that.

[00:01:15]
That means that, if you use minimal-ui and a browser is not supporting that Display mode, the browser will fall back to browser. So it's not gonna be a standalone PWA. And actually, those are the four initial Display modes in the spec. But on a separate spec, so on most modern API's to be honest, it typically is Chromium-based only and desktop only.

[00:01:43]
We have tabbed mode, and I will show you an example in a sec of what that means. And window-controls-overlay there is I know, sounds like a large name. So let's see some examples to understand what they are. For backward compatibility, the problem is that, for example, if I wanna use one of these new ones like tabbed or window-controls-overlay, they are not available on mobile.

[00:02:08]
They're not available on iOS. So if I use one of those Display mode, we have a problem. Typically, it will fall back to browser so then we don't have a PWA. So that because of that, the standard created another property known as display_override that receives an array collection.

[00:02:26]
So then the browser will start with display _override, it will try to match those Display modes. If they don't support those Display mode, they will fall back to the display property, okay? It's kind of a weird way of solving the problem but at least with this they are offering a solution that works everywhere.

[00:02:45]
Of course, iOS will ignore display_override, so it will not use a new display mode. So let's try to understand this. The Standalone mode is the one that we have already checked. So you just get a window for you on macOS, on Windows, I think the other one is Windows 10, Windows 7, or Linux.

[00:03:06]
You understood the idea, okay? You get a Standalone mode, that's actually pretty straightforward. Now, Minimal UI. For example, Minimal UI, this is YouTube music that, by the way, it's a Desktop PWA. It's a good one.
>> Maximiliano Firtman: I can demo it here. I have it here, YouTube Music. It's using responsive design to change the UI based on the size.

[00:03:32]
So it goes to a small widget when it's a small and YouTube Music is using this Minimal UI. How do I know that? Because I have a Minimal UI from the browser. For example, the back button, the refresh button. So that's a Minimal UI. So you have within the title bar a Minimal UI for browsing, okay?

[00:03:59]
Tabbed mode, this is the Desktop Tabbed mode. But basically, you can create tabs. Like if you have word or something like that so you can create different windows, so different navigation context with tabs. So it's kind of you have your own customized Chrome if you want, okay? And Window Controls Overlay, we'll then you render content in the title bar.

[00:04:22]
So instead of letting the iOS render in the title, you can use HTML and CSS to render content directly there. So you can use the title bar for adding controls or do wherever you want.
>> Speaker 2: I just wanna confirm Windows in this space it's not the proprietary company.

[00:04:42]
It's just using the control, right?
>> Maximiliano Firtman: Yeah, yeah, in this case it's capitalized because it has the name of WCO. That's how we know that, but it's on Windows the operating system. Actually, that's a Mac screen. So it works on Desktop macOS, Linux, Chromebooks, Windows as well with Chrome, okay?

[00:05:04]
So basically, you change the display, and you get a different experience for the Window, okay? So now let's go on mobile. On iOS and iPadOS we only have Standalone. So that's the only one that is supported, okay? Where you have a Fullscreen, but the status bar is always there, okay?

[00:05:25]
And it looks like an app, we have already seen that. Android support a Standalone is the one that we have already seen, so we can see the status bar that is themed with our color. It also appears as any other app in the launcher. It supports Minimal UI Android.

[00:05:47]
When you are using Minimal UI, this is how it's going to look like. So it's also kind of a Standalone, but you have a minimal browsing bar that is rendering your title, your domain. Also includes a menu, a contextual menu, where you can actually see, for example, information.

[00:06:08]
The information will give you the SSL certificate, for example. Fullscreen will give you 100% of the screen removing the status bar as well on Android only. So all the Display modes on Android look like this, Standalone, Minimal UI, and Fullscreen. Remember, you just change the value of the property display in your manifest.

[00:06:36]
That's all you need, okay? Any questions?
>> Speaker 3: Can you do media queries to tell what kind of device you're using?
>> Maximiliano Firtman: Yes, you can. Yeah, but kind of, what do you mean by kind of device?
>> Speaker 3: iPhone, Android.
>> Maximiliano Firtman: Okay, no, no, no, I was expecting another question.

[00:06:51]
No, you cannot do media queries. What you want is device detection. For using device detection, there are tricks. So you can use tricks, ring the user ration and try to guess if it's iPhone, Android or something like that. The only actual way to do that professionally and having more certainty about what's going on there is using a device library.

[00:07:18]
Not sure if you've heard about that. There are one device library, let me show you that. One device library that is actually pretty old, but I mean, it has been for a while. It's not an old library, it's WURFL.js. The ScientiaMobile is the company behind it. There is a free version I think, where you can have a JavaScript version, device detection or server side.

[00:07:43]
So WURFL.js will use different tricks heuristics to actually tell you where you are. So the kind of device that you are and how it works. It will give you the device name, the factor, and even some properties about the device, okay? So you need something like this. But for some basic behavior, so what's a use case?

[00:08:08]
So what are you thinking?
>> Speaker 3: I'm thinking for where you tell someone to how to install the PWA.
>> Maximiliano Firtman: Okay, how to install, okay? So let's say that for the Installation, maybe iPhone is kind of the only one that is different, also macOS. For that it's not like you wanna detect which device, you wanna detect if it's iPhone or not, okay?

[00:08:31]
And that's simple. There is a trick, let me give you a trick really quickly. There is a trick. The trick is using there is a property it's window.standalone. Window.standalone, it's undefined here. It's not part of the DOM API, so it's not there. But it's something that was created in the steep shore of Sarah for Safari before the PWA standards were created, okay?

[00:08:57]
So that property is a bullion property when it's not undefined, that will tell you if you are Fullscreen app, Standalone app or not, but only on iOS. So, for example, if I'm here in the simulator well, I will do a spoiler of what's next. Can I open an inspector on the simulator?

[00:09:22]
Well, let me answer the question quickly, because it's a spoiler, the answer is yes. To answer the question, the simplest way to see if it's an iOS device or not, is navigator.standalone. Navigator.standalone in Chrome is giving me undefined, because It's not part of the dome API, it's not standard.

[00:09:42]
But if I'm going back to iOS and I'm here connected to, we'll see how to connect this inspector to my PWA in a second. From here, if I try navigator.standalone, it gives me true, okay? And if I'm in the browser, it will give me false. So Safari in the browser will give you false.

[00:10:07]
Safari in a PWA will give you true. Other browsers will give you undefined. So it's a quick way to know if it's Safari or not. Quick and dirty, by the way, right? It's a hack, but it is what it is.
>> Speaker 4: How would you handle if you're trying to figure out within the WebView?

[00:10:26]
>> Maximiliano Firtman: Okay, so if you wanna know if it's in the WebView, well, you may not be able to use this to see if you're in a WebView. So you wanna know if you're in Facebook, for example, on TikTok, or something like that. The way to detect that is through the user agent.

[00:10:43]
So when you are in TikTok, actually, if you try to Google that, we should be able to get an answer like TikTok WebView user agent.
>> Maximiliano Firtman: We should find the user agent, so actually they typically are something here. It's the BytedanceWebview. So then you use navigator.useragent, and you check if the user agent contains BytedanceWebview, that's a substring within that string, they will tell you are inside TikTok.

[00:11:19]
The problem is that there is no general way. So each one will have its own user agent. So Instagram has its own string. So it depends on the case, okay? You need to find and search that manually. If not, we go back to the answer of a device library.

[00:11:37]
WURFL will actually tell you. They have all the database and all the heuristic structure to give you the right answer.