Routing Metadata

[00:00:00]
>> Maximiliano Firtman: One more pattern that we can add that is actually pretty simple into this single-page application before getting into a multi-page application is metadata. So, look at this. If you look here, it always says Coffee Masters. No matter where I am, it says Coffee Masters, Coffee Masters, Coffee Masters.

[00:00:21]
Wait, I mean, it's not bad but by the way, this is actually a PWA. So I can open this as an app. Let me, in case you haven't seen this before, let me uninstall the app, and do that again. So, you can see I have this little button here that says install.

[00:00:43]
I can install Coffee Masters, it's also in the menu. Now it's in save and share, install Coffee Masters, when you install Coffee Masters, now you have a full desktop application in your Mac, in Windows, in Linux, in Android. So if I open Coffee Masters, I have a full app.

[00:01:06]
So this is an app, okay, that is running my application but in some Window, okay? With its own icon, it appears in Alt tab, it works on iOS, iPadOS, Windows, Mac, Safari, blah, blah, blah, blah. And again, when I'm getting into details, you can see I also have two titles, it doesn't make too much sense, right?

[00:01:28]
So, there are ways in PWAs to remove the title blah, blah, blah, but at least, I could try to reuse the name there or, say, that I'm in the order, like, I'm trying to make use of title bar with some okay? So, that's the pattern of updating the metadata per route.

[00:01:51]
So, to do that, we will go back to the router and I'm actually going to add a new method. So, the router is this one, has in it go well here, I will add a set metadata. You can change a lot of stuff, I'm going to change the, we can tell you the title or the section, and a color, you will see why color in a second.

[00:02:18]
The title, it's an API, that's one of the oldest API in the web. It's document.title. It's one of the oldest API, I remember using this in the 90s. They were fancy websites, they were animating the title that you were seeing. It was, wow, the title was animated. But anyway, [LAUGH] we are not going to animate the title.

[00:02:43]
We are going to just apply a string here, an interpolation with the title you send, and maybe Coffee Masters as a suffix, or whatever you want, okay? And then, what about the color? I'm not sure if you know that now, every web app has a theme color, okay?

[00:03:01]
In fact, if it's a PWA, the theme color is actually this brown, you can see the brown in the title bar? It's actually there. So, that theme color can be defined in a web app manifest that's a JSON, or in a meta tag. The meta tag goes in the HTML.

[00:03:21]
Do we have a meta tag for that? I don't think so, but we can add one, it's meta name, theme color, with a content, with a color. We can leave it empty for now. But I want the HTML element so I can dynamically change it with JavaScript. If you have never played with this, you will understand what it is in a second when you see it finished.

[00:03:46]
So, because it's a meta tag, you can, it's actually the DOM. You can use the DOM to change it, and you can change it really quickly, how? Well, you just say, document query selector. And we can look for a meta with the name, theme, color, we use attribute selector.

[00:04:11]
And we change the content with the color that someone is setting here. What's the goal here? Each route can define its own title that is Its own color. Does that make sense?
>> Maximiliano Firtman: So now, here we have a switch and based on the route we are saying, we go to the menu, we go to the order, we go to the details.

[00:04:34]
Well, we can call router.setmetadata. So, let's call this is the menu, and let's put a color here. Let's say that the menu will use that brown that we have there that from a CSS point of view, it's defined here in this manifest file is this one, theme color.

[00:04:57]
Any CSS color will work. So for the order page, just for testing, right? I mean, we can say, it's not going to look nice, but we can say this is gonna be green, it will probably be terrible. And for the details, I can use the name, the title of the product you are getting in later, we can use blue, just for trying something quick.

[00:05:25]
So, let's see first in Chrome, so I'm going to open this again, Corel 3000, and by the way, it's not working, so something, we broke something, let's see. Cannot say properties of null, set metadata, 19, let's see. 19, meta name theme color. Because I didn't save my HTML, you can see that dot there.

[00:05:55]
So I didn't save it so we don't have the theme color meta type. Was undefined, that's really wide. Yeah, there we are, we are back. So, if you look at the menu now, it says, I'm sorry, in the title bar, it says, menu. If I'm getting here, it says, details, if I'm going to the order, it says, order.

[00:06:15]
Do I see any color change? Not really, because Chrome in browser mode is not really using it. But let me jump into Safari. Safari is actually using the color,let's say where. But let's see if I'm getting into the details, look at the title bar, [LAUGH] now it's blue.

[00:06:38]
Yeah, awful, I know, I'm a developer, right? So if I'm going to order, now it's green. So Safari is using the theme color there. And now if I open the PWA again, and I reload, let me go back and try to reload this. Now, Chrome in PWA mode is changing the title bar directly.

[00:07:03]
Yeah, I'm not saying it looks good here, but I'm just showing you a way that you have to customize that. So you can customize that per route, and also, we can see the change in the title bar as well. And now, you see that by default,
>> Maximiliano Firtman: Chrome, this is for avoiding phishing.

[00:07:25]
It's adding the name of your app always, even if you don't want to. So maybe that's, why phishing? Because then you say, I'm Bank of America. So you change the title and say, no, no, this is not the Bank of America app. Actually, when you install the app, it was called blah blah, Bank of America dash the name of the real app, that's to avoid phishing apps on PWA.

[00:07:48]
So maybe, you we can go and say, no, you know what? Maybe I don't wanna add when we were setting the metadata that suffix, because we already have that. Or we can do that only if it's a PWA, it's possible to do something like that. So, then I can just, no, I don't wanna inspect this.

[00:08:10]
Reload, there we are. So now it says Coffee Master menu, Coffee Master order. We have the ninth animations, okay? Everything is in place now and it's working as kind of a native app. And if you wanna learn more about how to create these installable web apps, check my other course, PWA, available also on front end masters.