Creating a Web App Manifest

[00:00:00]
>> So the next step is to try this in Chrome, so I'm going to local host 5000 here and I'm going to open DevTools. So we have the DevTools available here for us. So, something that we have in DevTools is a whole section for application. This section is the one that is important for PWAs, okay.

[00:00:26]
So there are many things here and we are going to cover most of them during the day. But we are going to start with the first section that says manifest. Manifest is the first step to actually make a PWA, it's called Web app manifest. And as you can see, it actually says that there is no manifest, because this is not a PWA.

[00:00:49]
So that's the first step. I need to go back to my source code and start writing that web app manifest file. Back to Visual Studio code what I need to create is a new file, the web app manifest is a JSON file that we need to create apart from the HTML.

[00:01:10]
It's actually like the heart of a PWA and typically we have only one heart, right as humans. Well PWAs only have one manifest, so if you have two manifests you have two PWAs, okay, one manifest one PWA. So what's a manifest file? So I need to create a new file.

[00:01:34]
First, we need to set the name for this file. Let me tell you this it's a JSON file, and for probably five years, most PWAs authors were calling this fine manifest dot JSON. We're gonna still call that file like this. It's your name, the only thing that matters here is that that file should be served of using the right content type for a JSON, okay, that's all.

[00:02:03]
However, the web app manifest it's actually a spec in the W3C, so it's an official spec. As an official spec, they do have an official recommendation for the extension. So if we Google Web app manifest spec, we're going to see MDN first and then the W3C. This is the official spec and if we search here for extension the file extension that is recommended is actually, dot web manifest.

[00:02:42]
But again if you wanna use dot JSON it's fine. So we can call that file app dot web manifest. So I can rename this as app dot web manifest. Actually VS code is smart enough to recognize extension and also select JSON by default when we are in this web manifest file.

[00:03:09]
But again, if you wanna call it manifest dot JSON, it's fine. And because it's a JSON, we're going to start with an object. So curly braces, and here we start adding properties. We can go over the spec and read one by one but I wanna emphasize on the most important properties and actually the mandatory properties.

[00:03:31]
So the first mandatory property is called name so I'm going to Ober that will quote name and a value. Before setting the name I wanna emphasize here that we have a title, okay? And I used a title here that reflects on what happens typically on a web app today with a find the title element for SEO.

[00:03:56]
So we're gonna see what happens with that later. But the name of the app seems to be called by masters, so I'm gonna copy that into my name. And by the way here I can add more things, I can add like a coma and something else like the best PWA in town.

[00:04:13]
It can be a really long name, okay? But at this point you're thinking, hey Max, we might have a problem because, typically an app will have an icon. And let's think about Android or iPhone. We don't have a space for a name like this. Well fortunately, there is a another property that we can add in this manifest, it's called short name.

[00:04:40]
And by the way within the manifesto spec. Every property that is a complex sentence, so different words are separated by underscore, the property names that the values are using a dash. So if we have a value that has multiple words we use a dash, but the property name uses underscore.

[00:05:04]
For the property we use snake case and for the value we use Keva case that is the one that uses a dash. So for example here for a short name we can just say code bad or Kota masters. So, at this point, you may be asking, Okay, how long should these short names should be?

[00:05:27]
Or how short? Well actually, we don't have a specification here it depends on the west. It also depends on the font size that the user has set there. So it's difficult to actually set a number. What I recommend typically is to stay within 12 characters. So if your name states within 12 characters you're kind of safe, if you're passing that it might not fit, and if that happens it may be cropped or filled with an ellipsis.

[00:06:00]
So in this case maybe it's safer to just stay with just code path, okay, like this. So we have name, we have a short name, by the way if I save this file, so and if I go back to chrome. Refresh, the manifest still says that dot manifest was detected.

[00:06:27]
So I still don't have the manifest because we do have the file but we didn't link the HTML document with that file, so that's mandatory. Because we are not using a standard name like the fav icon, okay? We actually need to set the name in the HTML. So, back in Visual Studio code in my HTML, what I need to do is add a link.

[00:06:53]
Similar to the style sheet it's another link With a rel manifest. And the HREF will be app dot web manifest, like that. So that will actually link my main document, my HTML with the web app manifest only one manifest per HTML is possible. Okay, so now I have my link let's try it.

[00:07:27]
I will refresh and now something appears here with a lot of warnings as you can see but at least we have something. So it's loading the manifest and now I have some errors and warnings saying that most operating system require icons. Yeah, I know certainly icon and then we have a lot of other situations that I should change, because there are some properties that I didn't set.

[00:07:52]
So let's go one by one. Going back to the manifest. The next mandatory property that we have to set, is start URL. So a start URL receives actually a URL, that typically is relative to the manifest. I actually recommend to always save the manifest file in the root folder of your progressive web app.

[00:08:21]
Don't store that file in a resources folder or something like that. You can, but if you do that, you need to always think about what's going on because sometimes things will not work as expected. So it's a good idea to chef store the file in the root folder of your PWA.

[00:08:41]
And by the way, what's the root folder of your PWA. It's up to you but you can have a PWA per domain so for example Starbucks the whole domain app.starbucks.com is for the PWA. So their manifest is actually the root folder but also you can share your domain and you can have more than one PWA there.

[00:09:07]
In fact you can have unlimited quantity of PWAs in one domain. This is interesting, so in that case the best pattern or the best recommendation that I have for you is to use a different folder, each PWA in a different folder, okay? It's not mandatory actually but it's actually a good idea.

[00:09:31]
So for most situations typically here, we actually load the route file or the route file in the current folder. Most of the time, we don't type index html, because also we don't type index HTML in the browser, Okay? So because this is a URL and not server file names, so most of the time we just use forward slash or dot forward slash that means the default document in this folder.

[00:10:02]
Why do we need to set the start URL? So I said it's mandatory to pass the PWA criteria, but it's not actually mandatory from the spec. Do you remember the Starbucks PWA, so what happens If I go to order And I want to order a hot tea, like a chai tea.

[00:10:33]
If you look at the URL, I'm currently in that particular deep link in that chai tea. So if I install the app at this moment and I don't have an A start URL, every time I open the app, it will actually open the chai tea. It's like a bookmark.

[00:10:52]
Okay, we don't want that. What we need is to always start from the homepage. So every time you open the app from the icon, it doesn't matter where you are when you're installing that app. You always wanna start from scratch from the start, so that's why we need the start URL, Okay?

[00:11:11]
So other properties that we have here. Not all the properties are monetary but it's a good idea to set them. We have for example orientation, this property allow us to set All and that's the default value in this case it means that you're actually accepting your app to work portrait, landscape and anything in between.

[00:11:38]
But you can also say you know what I don't like my app to work in landscape so you just say portrait here. However we need to think that not everything that we are writing in the manifest will work everywhere, for example on desktop portrait and landscape makes no difference.

[00:12:00]
On iOS Apple is not supporting the orientation property so it's going to be ignored. Your PWA will be installable anyway but some properties may be ignored