Progressive Web Applications and Offline Challenge 1: Solution

[00:00:00]
>> Mike North: We're going to go through the process of adding some mobile optimized metadata to this app so it does not look bad anymore on a mobile device. So let's go on over to our editor here. And I'm on the master branch, let me just open up the files.

[00:00:20] So the first thing I wanna do is make it a little bigger. I wanna worry about the web app manifest because this is sort of a less trivial thing to do with some of the other things. And we'll just put the icing on the cake at the end.

[00:00:37] So what I will do is in this client folder, we need a new file. This JSON file, I just wanted to exist as sort of a static thing that is passed through as part of our production build. And if we look in the dist folder,
>> Mike North: We've got the certificates, those we put there manually, index.html.

[00:00:58] You see like our CSS gets embedded in there and we'll talk about that next. But we don't have a web app manifest, we have these images here and that is interesting. These launcher icon things. But if we want a new file, so here's what we're gonna do. We'll create a new file, and we're gonna just call it web-app-manifest.json.

[00:01:27]
>> Mike North: And I'm just gonna go back to my slide here with this sample.
>> Mike North: And unfortunately, we'll have to copy this in two halves. Sorry for the screen swiping. But here we are and we won't worry about icons just yet.
>> Mike North: So this is sort of a very basic manifest.

[00:01:54] And if I were to build here, I'm gonna do npm run build.dev. I'm just doing it that way cuz it's faster and it doesn't get optimized quite as much. And in this dist folder, I was I was hoping that WebAp Manifest would show up. It in fact does not.

[00:02:14] The reason here is that the build tool we're using Webpack by default. It's just looking for certain things that are necessary and connected to critical resources that we define as these are the things we need. So this file exists but think of it as like, it exists, and then it is found to be unused, and then not included in our dist folder.

[00:02:40] What we wanna do in order to say that we need to use this is we're gonna use this file loader thing. And I'm just gonna copy one of the existing entries there. And that the way this works in case you're curious is like we can't get rid of this if we want so we say file loader and then an exclamation mark and then everything after that is like what are we loading?.

[00:03:08] So we can just say web-app-manifest here.
>> Mike North: Now we could add this name thing, think of it like a query param. If the file in our project structure was named differently than what we want this thing to be when we build the app. So if I add this here, I'm just gonna call it foo.json.

[00:03:34] Build again, we should see a foo.json pop up in dist.
>> Mike North: And indeed, there it is. And it's the web-app-manifest. So what we were saying here is, the convention is keep the name the same. But this name, like option, allows us to change it. But we're not gonna worry about the name option, we're just gonna keep it like this.

[00:03:59] Now the reason I did it for these images above is I had them in a image folder and I kind of wanted to take them out of the folder. So more than just renaming, this can be sort of reorganizing as well. Think of the name of the file as the relative path within that dist folder.

[00:04:17] So great, we've got our web app manifest and the last thing we need is this important meta tag up at the top. We'll have to slightly, oops, pardon me, slightly alter it. So we're gonna look in this index.ejs file. This represents our index.html. We're gonna be working with this a lot.

[00:04:36] The EJS just means that we can embed JavaScript, EJS. So we could even put in here,
>> Mike North: We get 12. So if you've used Ruby on Rails you've seen-
>> Speaker 2: You get seven.
>> Mike North: What's that?
>> Speaker 2: You get seven.
>> Speaker 3: You had a plus,
>> Mike North: Plus four, sorry, seven.

[00:05:03] And I, 9, we would get 12.
>> Speaker 3: [LAUGH]
>> Mike North: No, we get seven. It's hard to talk and type at the same time. So on my clipboard hopefully, nope, don't have it anymore. So we've got this tag and we just need to change this to web-app-manifest. I'm naming this very deliberately because when we start working, getting deeper into progressive web apps, we may have like up to three or four different types of manifests.

[00:05:32] We will regrettably touch on the app cache, hopefully at the very end of this journey. And we're gonna have that a cautionary app cache tale that has a manifest. When we talk about pre caching, assets we know about it build time we've got a manifest there, here's a third one.

[00:05:50] So name name wisely. And now if we build again, we're gonna see that in this dist folder at the very bottom. Expect this thing to pop up.
>> Mike North: And,
>> Mike North: Where did you go?
>> Mike North: Maybe I do need the name. Interesting, I do need the name, by default it's the hash of the file.

[00:06:18] That's why we had this filename as 9010, that's the checksum, so here we go.
>> Mike North: And the thing that makes that complicated, is now I need that to be in my HTML, so I need to pass that value around, not fun. All right, Web app manifest at the bottom.

[00:06:39] There we go. And if we fire the app up,
>> Mike North: Just with run serve.
>> Mike North: And I'm going to open up my devtools here. So now this is the running app. And I want to show you a way that we can kinda take a look at this as a first pass.

[00:07:00] So this application tab, if you haven't been using progressive web apps much, if you haven't been playing in this area, you've probably been hardly even noticing this thing. There's a lot of good stuff in here. We're gonna be working with it all day. Manifest is right at the top of the list and you can see that yes, I have in fact found that file and we're not saying much here yet.

[00:07:30] Let's see what's going on. I have some errors.
>> Mike North: I expected to see some stuff here. Let's make sure the file's where it's supposed to be.
>> Speaker 2: Also make sure you don't have an old service worker.
>> Mike North: Could be, I do.
>> Mike North: Web app manifest, there it is.

[00:08:03] Is it invalid JSON? Display standalone, it's the comments, the comments are screwing me up. Good old JSON, we can thank good 'ol Doug Crockford for that. Another illustrious Frontend Masters instructor.
>> Mike North: All right,
>> Mike North: So you're seeing already, we have to be kind of wise when debugging these things in that I got no feedback.

[00:08:33] This is one of the down sides of progressive enhancement or one of the debugging challenges of Webb app manifest was found. It couldn't be processed, and so I was told nothing. So now hopefully we're in a better stage. And we are. There's my theme color, there's my background color, little color swatches there.

[00:08:54] I've got Frontend Masters up there. Let me actually bring this into my code.
>> Mike North: I could add a short name really easily,
>> Mike North: Like that, and it should pop up right here. And it does. So now we're in a pretty good state. Frontend Grocer, and let's add an icon here.

[00:09:26] So I'm gonna add, I have to cheat a little bit.
>> Mike North: Where are those icons?
>> Mike North: There's one,
>> Mike North: Again, comments, no good.
>> Mike North: And that's the wrong file name, I will fix in a moment. So I'm just gonna look in my dist folder. And I see I've got image, and then launcher-icon-,

[00:10:03]
>> Mike North: 1x, 2x, and 4x. So if you open these up in your favorite little image editing software,
>> Mike North: You could have figured out that, I think, 2x is the 192 pixel one. Let me double check that that's the right file name, launcher.icon -1x.png. And we'll add our 512 which is the 4x.

[00:10:44]
>> Mike North: If we refresh we should start to see, hey, some nice images popping up. So this is sort of giving us a little summary of how this is going to work here. So when we start to look at, and let's add a start_url here, that was one of our requirements.

[00:11:06]
>> Mike North: I'm gonna run our first Lighthouse score after we add this in. Okay, so it is unfortunate that we have a little back flip we have to go through to run Lighthouse and it has to do with HTTPS. I will show you step by step how to do it.

[00:11:25] Step one, make a build of your app.
>> Mike North: And step two is going to be serve it over HTTP/2. And the reason is, we're using two different servers here. One of the checks involves trying to make a plain HTTP request, and being redirected to HTTPS. Your apps should do this in production, web pack does not do that.

[00:11:54] Web pack dev server just serves over HTTPS, it doesn't even listen on HTTP. So now we can do run, serve and add this HTTP2 option. And I just wanna prove to you that this actually works the way I claim it does.
>> Mike North: So we look at the network request here.

[00:12:13] The protocol htttp1.1. So we'll launch it in this other mode. We're gonna change the port to 5000. And so we can see that our app is being served at over h2. But you can also see that HTTP1 is used for our fetch as well cuz the little express server in Node JS that's serving up our JSON that is not running in HTTP2.

[00:12:43] So what we can do now is run Lighthouse and let's see where we're at. We have to close devtools first just so we can get like a nice, stable baseline. Let's see how we look. I ran this this morning before making any enhancements to the app, and we were at a 34.

[00:13:03] So let's see where we're at. We've forgotten to do the little view port stuff. And you can see that's how our app looks on a mobile device, pretty terrible. So we'll have to go back and do that.
>> Mike North: And we're at a 45, so we're improving. But it's also giving us some nice feedback as to what we can do to make this better.

[00:13:29] So first off, it's giving us a meta tag that we should use. Theme color, we can put that in right away,
>> Mike North: In our index.ejs. And we'll use the same theme color that is our manifest, it's just sort of a different representation for it.
>> Mike North: And we don't have a view port tag yet so I'm gonna go and steal my recommended view port tag from the notes.

[00:14:07]
>> Mike North: And we'll add those apple tags there, as well.
>> Mike North: I'm just gonna grab all three. Two and three.
>> Mike North: And we'll make FE grocer there, and we can launch it. Actually, we'll have to build it one more time and then start the server again. So developing with HTTP 2 right now is a bit of a pain.

[00:14:45]
>> Mike North: But it is very common for apps to be served with HTTP 2 these days. If you use a CDN, in a particular, if you use Cloudflare, they're trying to use it wherever possible.
>> Mike North: All right, now let's see where we're at. Make sure it works, and it does, one more Lighthouse run.

[00:15:11]
>> Mike North: All right, now this tower app looks, view port's much better. Much more mobile app aligned and we should beat 47 by a little bit.
>> Mike North: See what we got, 73, getting much much better. All right, so if you tried to fire up IOS simulator you ran into an issue where you saw it continually trying to load, and load, and load.

[00:15:44] What this revealed was a little difference in the way web sockets have been implemented in that particular browser. Now we are serving over HTTP2 so it's a much simpler setup, we're not trying to refresh over and over, this is a more production aligned thing we're looking at here, but I just wanna show you that it does in fact work.

[00:16:05] This is a live version of the app. Now let me just scale it down cuz it's sort of telling a lie at this point. Hardware, let's see, there we go.
>> Mike North: 75, so here's what we're working with, a nice mobile looking app.
>> Mike North: And we can connect with Safari and start working them there.

[00:16:37] So I'm going to stop there and move on to the next topic. But if you want to learn more about this, the SCO course also on Frontend Masters, we dive deep into mobile metadata and structure data. I can do this last bit. The schema.org stuff, that would have involved just going into this grocery tile.

[00:17:00] So that's gonna be grocery item. And we could have just basically drop this in, we would have had to. So you'll see that it'll complain that there's this JavaScript object it's trying to evaluate. And you just have to just like assign it to something up here.
>> Mike North: And then if we looked at the app, come on.

[00:17:33] We go back to HTTP1 now.
>> Mike North: We can see,
>> Mike North: You can inspect an element and see that the data's there.
>> Mike North: No, we hit a problem, let's go there.
>> Mike North: We have to stringify it.
>> Mike North: It doesn't like just rendering objects in HTML. So if we inspect element on this thing, now we'll find that inside the grocery item there is, hey, this little script tag.

[00:18:15] And now we're starting to show that nice rich data until you could basically get the HTML for this, perform a query, grab all the product stuff. And anything that is trying to display your link in a rich way can do so based on machine readable data that you've provided.