7 days of WordPress plugins, themes & templates - for free! Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Creating a Manifest File

A progressive web application needs a manifest file. It simply contains information about your application. You'll learn what information you'll need to provide in this lesson.

2.3 Creating a Manifest File

There are three things that a progressive web app needs. And the absence of any of these three things, well, it's not going to be a progressive web app, it's not going to work. So the first thing is a secure connection. Everything that is served to the application has to be done over HTTPS. Now, as we are developing our application, we can skirt that by just using localhost. So as long as we serve everything from localhost, then everything is fine. And that is the case for us. So we're good there. The second thing that we need is a manifest file. The manifest just has information about the application. And we're going to be implementing that in this lesson. The third thing is a service worker, which is just a JavaScript file. But that's where all of the magic happens as far as the progressive web app is concerned. And we will talk about that later in the course. But for right now, we just want the manifest. So the first thing that we're going to do is pull up the developer tools. This is where having a Chromium browser will be very beneficial. So you're going to start with elements console sources, somewhere around there. What you want to do is find the tab for Lighthouse. This will identify and fix common problems that affect not only the site's performance, but also a progressive web app as well. So just leave everything checked and also keep Mobile ticked as well. This will actually emulate a mobile environment as you'll see over on the left hand side of the screen here. So as I click on Generate report, see I put it into a phone so that it would emulate that. But it's going to go through the process of testing several things. First of all the performance of the application but also the different aspects of a progressive web app. And you can see that performance is 68. That's ridiculous, but that's okay. We don't care, [LAUGH] about that. What we care about is the progressive web app. So if we click on that, and we look at the issue, you can see that we have some green spots like page load is fast enough on mobile networks. Okay, that's great. It uses HTTPS, no it doesn't, but we're on localhost. But there's a lot of red as well. And if you start reading some of these, you're going to see a common theme that we don't have a manifest. So let's implement our manifest and it's nothing more than a JSON file. And we are going to put it at the root of our Public folder. So let's create a new file called manifest.json. And the first thing that we need is the name. We need to specify the name of this application. And it can be long or it can be short. And in this particular case, it's going to be rather longish. So this is going to be the Status Report for Company Tasks. Now, there is a short_name property. So that if the name is too long to display on screen, then it will use the short name. So, let's just use Status Report. And then we can have a description. Now, of these name is the only thing that is required. You do not have to have a short name. You do not have to have a description. But it's good to have those things. So this is a web application for displaying the status of company-wide tasks. That's rather verbose, but that is somewhat descriptive there. And then we have the start_url. This is, essentially, the starting point of our application so that when the user launches the app, this is the first thing that they see. Now, this can be an absolute URL. So in our case, that would be http://localhost:3000/index.html, or it can be relative to this manifest file, which is not as verbose in this case. So we can just have the relative path to index.html there. And that will be fine. And with those four things set, let's add the manifest to our HTML file. We do that with a link element, the rel attribute is gonna be set to manifest. And of course, the href is to the path of that file. So with that done, let's go back to the browser. And let's clear out this report with the Clear all. And then let's run the report again. And we will see that we still have some issues, but we don't have as many issues as before. Because now that we have a manifest file, and we are providing some of that information, it still fails completely. But, now we can see that the errors that specified that there wasn't a manifest specified is gone. Now we just have completely other errors like start_url does not respond with a 200. Let me zoom in. Start_url does not respond with a 200 when offline. Now that makes no sense whatsoever. If it's offline, how can it respond 200. Well, we will talk about that at a later time. But as we scroll on down, all of the manifest is missing issues are gone and we have other issues, like for example here it does not set a theme color for the address bar. Yes, we can do that. Now we can use named values or we can use hexadecimal values as well. So let's go back to our manifest. Let's add the theme_color, and let's use the hex value of 2196F3. I really have no idea what this is going to look like. But let's try it again. It might look horrible. It's a blue color. And I don't even know if we're going to see this over on the left hand side. But the important thing is that we have that now. And even though our application might not be loaded or launched from the home screen of a phone, this is still something that we need to include. So if we scroll on down, we see that the manifest error for theme color is gone. But we still see something stating that we need a meta tag with the same information. So this is actually something that we have to set in both places. And that's easy enough to do. So let's just go ahead and do that. So let's go to our Index page and we will add a meta tag where the name is will be theme-color. So there is a difference here. In the manifest file, it is theme_color. For the meta tag, it is a dash. And then we will set the content to be the same color value. Now, it doesn't necessarily need to be the same color value although it might. I mean, we could easily test that by using a different value here and see what Lighthouse says. But we're not gonna do that. Let's go back to the browser, we will run our report one more time. And we will see that the theme color is now green, at least as far as that test is concerned. So at the beginning of this lesson, I said that we need really three things for a progressive web application. We need a secure connection which we have. We need a manifest file, which we now have. And we need a service worker. And here we go, sets a theme color for the address bar. So we're good to go there. So a service worker is nothing more than a JavaScript file where we get to do a whole lot of cool stuff. And we will get started with that in the next lesson.

Back to the top