Progressive Web Applications and Offline Challenge 0: Baseline

[00:00:00]
>> Mike: This is exercise zero. The purpose here is to make sure we're all set up and that we can get sort of a baseline reading on our app. So we spent a lot of time looking at the README and making sure that we've tried to catch all of the software packages you have to install.

[00:00:15] And by the time you're watching this video course, it should be really finely tuned and up to date. And then we can do a couple of things once we're completely set up. And I'm gonna actually walk through the setup process with you in case you're having trouble. Once we're set up with our TLS certificate and ready to go, we can then build a version of our app.

[00:00:40] And that you will do via npm run build:prod. And you can also build:dev, the difference is one gets minified and optimized and the other is sort of meant for your own benefit as a developer. So you'll notice that as you save files, if you're in development mode, the page will automatically refresh.

[00:01:04] There is some code that has to live in your browser to do that. You don't want that to be sent to your users, it's kind of pointless. So that strips it all away. And you can also look at the file sizes that come out of those production builds.

[00:01:17] And the important thing to look at is the gzipped file sizes. We're gonna start out at about 85KB, and we will actually get considerably smaller over time. If you use this environment variable before making that build, you'll get some feedback broken down by file size. Like what's the big stuff here, what's the culprit that's taking up so much space?

[00:01:45] And then finally, to run your app, you're gonna do ./run and then you can have a command that follows that. And all day we gonna be using serve as the command. There's an http2 option that you can use. And the http2 server we have in this project is actually pretty slow.

[00:02:03] So we gonna look at that when it comes to just studying the way the network operates. But it's not going to improve our Lighthouse score. If we were to push it up to Firebase, push our app up to Firebase, we would see they optimize the hell out of it.

[00:02:19] We will see a massive improvement. Locally, it's hard to get all of that working cause http2 is a little bit complicated. So I want you to, over the course of this class, to keep a text editor open, and exercise by exercise I want us to just keep measuring as we go along.

[00:02:39] And I'm not telling you this to pat myself on the back, but I've led you down a path that looks good. I want you to get in the habit of testing as you make changes. Because when it comes to progressive web apps, we always want to keep things relatively small.

[00:02:55] We want to keep an eye on metrics because things get a lot more complicated. This is not a document in a document viewer any more. This is a rich application on an application platform. So we'll continually test our Lighthouse score, our gzipped app size, our time to first paint, and our time to interactive.