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

6.1 Finishing Touches

We'll finish this course by running Lighthouse again and fixing issues to make the application installable.

6.1 Finishing Touches

We're going to in this course and much the same way that we began it by running Lighthouse, because we've put in a lot of work, and it's worth seeing how far our application has progressed, at least as far as their grading system is concerned. So let's go to Lighthouse and let's generate that report. Now I know that we are still going to fail some of the tests and some of them are going to be under the installable category. Because ideally there are some things that an application needs in order to be installable. But one thing right off the bat, we actually have something here instead of just a little minus sign. So if we click on that and scroll down, we are fast and reliable, that's great. Installable, here's what I was talking about. Our manifest does not have a PNG icon of at least 192 pixels, manifests display value is not of minimal UI full screen or standalone. Well, here's the thing about being installable. Yes, it's cool that these applications can be installable, but all of the usage data points to that users don't install these applications. Partially, it's due to them not understanding what these applications are, some of them just don't understand that they can be installed. For example, in order to install it on the desktop, you have to go to the menu and actually say, install this application. It's not here, but it is in Brave, and in fact, I forget where exactly it is, but there's many steps that a desktop user has to go through in order to actually install that application. Now mobile is a different thing. But chances are, if people are going to use our application, they are just going to open up the browser themselves, and then navigate to it. And if they're like me, they're just gonna leave the tab open all of the time. So and this kind of goes back to what we talked about with notifications and push notifications. It's a great idea, it's just not used. So don't spend a whole lot of time trying to get your application installed. In fact, probably too many people try that, they want that little icon on the home screen when they should be spending more time making their app work and look better. So, but for the sake of completeness, let's go ahead and let's add some PNG icons to our application and to our manifest, so that we can at least pass that test. So I'm going to add these under vendor. No, I'm not, I'm gonna add these just inside of assets. And these are icons that are freely available, you can distribute them. I did not make them but they are royalty free, they are 100% free, and you can distribute them if you want. So we have these icons, we need to add them to our manifest. So let's go to our manifest. I'm just going to copy and paste these in because there's quite a few there. The idea is that you want many different sizes because different environments will use a different size icon. So it's a good idea to have a wide range of sizes all the way up to 512. So if we go back to Lighthouse, and clear that out, and generate the report again, we should see the icon issue go away, but there's still this concept about the display. And the display just controls how much of the browser Chrome is visible. And we didn't really talk much about that, but this is a perfect time. Now the display value is only used when the application is launched from the icon. So this is only for installed apps and only if the app is launched. It's not for just people who are on the internet, and then access your website through the browser. So once again, this is something that is going to be used by a very small amount of people. And I want to make that point because minimal UI gives you a minimum amount of UI elements from the browser Chrome. So there will probably be a back and forward button refresh, you might be able to view the URL. But if you go beyond that to full screen or standalone, then you're going to lose a lot of the built-in functionality. And you have to provide that functionality, because users are accustomed to navigating websites and web applications. All right, they've had a lot of years of practice. So if you do intend on going to full screen or standalone, well then you're going to have to put in all of the extra work to make sure that the users experience is what they expect. Now in our particular case, we don't need it, but I'm gonna go ahead and put the display value inside of our manifest file, because, well, I'm a completest. So we're gonna have display, and I'm just gonna set this to minimum-ui or minimal-ui, because I don't want to have to replicate all of that functionality. So if we were to run this again, then the installable will all be green. So we could scroll on down to this PWA Optimized, if we wanted to provide a background color, we could go ahead and do that. So I guess, why not? So let's go ahead and add that. And we have that theme color, I guess we could do the same value there. So why not? Let's go ahead and do that because that way we will have that set. And then there's this apple, specific one apple-touch-icon. And the great thing about this is if you drill down into them, there's always this Learn More link,.so you can find out what exactly it is that you need to implement. So here's the apple-touch-icon. We can see that we would need to add a link element to our index page. So we can do that, the REL needs to be apple-touch-icon. And then of course, the Href needs to point to, does it give us the size that it needs to be? I think it does instead of Lighthouse, it's 192 or 180. Okay, so let's open up index.html, and we will add that link element. And we'll change the Href to one of our icons, so that was inside of assets and icons. And let's see what we have here. We need a 192 or 180, we don't have one, but that's okay. Let's use the 128, so we'll have icon -128.png, and we will run Lighthouse again. Let's generate that report and we will see. We'll still probably fail that one-apple-icon, but at this point in time, I said I'm not completest, I lied. So anyway, a Lighthouse is a great tool that will give us a quite a bit of information about our applications and what we need to implement. But also, hey, that's good. Yeah, our PWA Optimized, we're good. Hey, it's just this HTTPS one. So, this is a fantastic tool to get up and running with a progressive web application. Just also keep in mind the things that we've talked about such as using notifications and push notifications. They're great, but they're not going to be used by everybody. The same thing is true for setting the display or the installability requirements, because the vast majority of users are not going to install the application. That's just how it is. Now, I'm not saying don't spend any time on those things, just be aware that some of the aspects of a progressive web application just aren't used and spend your time accordingly. Because the end user is going to love to use your application if you spend the time and the commitment to really make it work well, all the extra fluff can be done later.

Back to the top