Manifest Orientation & Theme Color

[00:00:00]
>> So please remember to test everything on every OS, because if you are expecting your app to work only on landscape, for example, if you just say landscape, well that might not be the case on iPhone. And on iPhone, it will also work on portrait, so your CSS should react to that orientation as well.

[00:00:20]
If you want something that you can do is using media queries, and then show a warning message to the user saying, hey, these orientation is not compatible. So please go and do something. And back on my iPhone here, and they wanna show you one particular PWA. It's actually targeting iPhones that is actually using that trick with CSS.

[00:00:45]
It's called eye test.n thing from New Zealand and it comes from Samsung. So it's a PWA from Samsung that lets you test assumption device in your iPhone, okay? But it's actually pre, pre good PWA, so if you look at this, it's actually inviting me to install the app.

[00:01:06]
And we're going to talk about that later as well. So I will install the PWA, Samsung iTest, and now if I open the app, I will pass the first button. I have like an Android user interface within an iPhone, okay? That's kind of the PWA, but it doesn't work in landscape.

[00:01:33]
However, Safari is not supporting the web app manifest orientation property. So if I go landscape, actually the web app goes landscape as well. However, using media queries orientation, actually, it's asking you to rotate your device. So this is like a fallback solution, so have in mind that's possible sometimes and part of the P in PWA, is to use progressive techniques.

[00:02:03]
And that means that you should always have a fallback if one capability or ability is not available on one particular device. The next property that I wanna mention it's called theme color, theme_color. It accepts any CSS value, however, to be safe, you should stay within RGV colors. The RGV function or named colors such as orange, or pink, don't use things like gradients or RGBA because it's not gonna work, but any other color will work.

[00:02:55]
The theme color will actually define how your app will look like for example if you remember Squoosh, If you remember Squoosh is using this pink color. Well, that's their theme color that they have in the manifest. In fact, we can actually go and see this in action. If we go to a squoosh.app, We can open Dev tools, go to application manifest, and it's called manifest.json.

[00:03:40]
So I can click on that file and see its contents, and we're going to see the theme color there. And that's actually the pink color that we saw before. The theme color can also be replaced by a metadata. So most of the time when we set a theme color, we typically also set that in the HTML as a metadata.

[00:04:08]
By the way, you know what, when we open the CSS file we do have some colors here that we can use. For example, we have a color theme that I can copy and paste within my manifest. There is no way to use here the CSS variable, that we have in another file, okay?

[00:04:29]
So it must be a literal value that we set in the manifest. So that's the theme color and if we wanna add the metadata within the health we have the meta name, theme color. And be careful here, big warning. So theme color in the manifest is with underscore, but theme color in the metadata is with dash, sorry about that folks.

[00:04:58]
So pettah name theme color, and for the content, we use the same value. And later, we will see that this content value can be changed with JavaScript. So then you can have different theme color based on where you are, in which routing your web app you are on, or the current state of the app.

[00:05:20]
If it's an embodied state or you have an error in the form, you can actually put that in red or yellow, okay? It also accepts the media, Attribute, so you can use a media query and for example have a different theme color for light and dark things in the operating system.

[00:05:38]
So you can have different theme colors that's not possible in the manifest. In this manifest, we have only one value for the theme color. We have a question about updating the values in the manifest. So what happens if we wanna change the theme color later? Or if you wanna change an icon, I didn't set the icon yet, but what happens if we change the icon?

[00:06:01]
Well, the answer is not so simple because it depends on the platform. In short words, let's say that for most Android users, the installed PWA will be recreated a ring-style with a new values on the next day, there is an algorithm that will be triggered to update the icon.

[00:06:29]
And maybe now there is a new theme color for iOS and desktop today at least, that those values won't be updated. So if you want to change the icon, unfortunately, the icon won't change. The user needs to reinstall the app. That's probably gonna change, assume but it's not there yet.

[00:06:50]
So the answer is that on Android, the icon will be recreated with the new properties, but that's not the case on the other platforms as of today.