Challenge 5: Solution

[00:00:00]
>> We're going to go through adding some mobile optimizations to this, this mobile app, or the exercises slash mobile app that we've been working on here. So we're going to begin, and get rid of my structured data notes here. And all of this. We're going to begin by.

[00:00:23]
Killing our Open Graph exercise here, and doing run- e mobile. So we've started up this next example here, and if we go to local host, we can see that it resembles the same app. The only thing that's different is I've included a lot of icons, and you had a sort of different starting point here, so that you didn't have to figure out all of the different special icons for making all of the different mobile devices happy.

[00:00:57]
So here are all of your meta tags. And, you could put them in your list of courses as well. One thing to keep in mind when you have an add to homescreen bookmark is that, once that's on the user's home screen, that's their entry point into that into your app forever.

[00:01:16]
Right, so if they were looking at this particular course, and they bookmarked it, they're always going to see Phoenix Fundamentals, when they hit that bookmark. So, some people like to put it just on the root page of their domain, so that's a good starting point, and an entry point.

[00:01:33]
There's an attempt to add stuff to this manifest Jason. It's a property called- Route Underscore URL where you can define the entry point for your app. And, mobile browsers will hopefully adopt this, and respect it. As, part of what makes an app experience right you always when you launch a native app like Facebook or LinkedIn, you expect to start out by looking at like the feed and then go to the profile, regardless of where you left off 6 months ago.

[00:02:06]
So let's get rid of course we're gonna just be working at index.hbs here. I'm gonna start by getting rid of the comments here just because I wanna enable all of these different icons. And there are a lot of them. And you see some of them have these sizes attributes here.

[00:02:29]
It's a complicated world mobile app icon. So I end up having to refer to like the same. Just send the same cheat sheets over, and over again. So, maybe this is your cheat sheet. In addition, I wanna make sure that I add the viewport meta tag. So I'm just gonna go back to my slides here, and grab that one that was early on here.

[00:02:52]
And just for fun, well, no, we'll keep it as is Then we can add all three of these on two, sorry for all the back and forth everyone, and three. So this is gonna take care of making our iOS experience. Fullscreen when launched from the homescreen. Finally, let's worry about our web app manifest.

[00:03:24]
So we're gonna put that here, and we have to create a new file in this project in the public folder called manifest.JSON. I'm just gonna copy the HTML I had over here as a starting point. Now you get to see some of my animation tricks, make this little more difficult than it otherwise would be right when I wanted.

[00:03:47]
[SOUND] Okay, so icons are gonna go here, comma and then we can get the bottom half, There we go. So we're gonna go with standalone display mode. We can put some icons in here now. So someone pointed out that in the PDF I sent out some icons were missing, because I used some keynote acrobatics to slide them in.

[00:04:21]
And sorry about that. There somewhere, wow, where the heck did they go? I think that's one. Okay, grab one, there we go 192 pixels, so well, we'll grab that. Let me just make sure that file actually exists in here. Android, chrome 192 by 192 that looks correct. So we'll just leave that in here, we're missing out on the 512 pixel.

[00:04:52]
Nice image there, because I don't think we have a 512, yeah, we do not, so that's fine. So now we've got our web app manifest. The last thing I wanna do here is, right at the bottom of my body, I wanna put a script tab, that makes use of this Add to Home screen Library.

[00:05:16]
We're just gonna use it with the defaults, which means it's gonna generate the message on the fly, it's gonna go grab the icon from the metadata, you could pass it an image URL to use instead. But this library does a really good job of making reasonable default assumptions.

[00:05:34]
So just for fun, let's see what this looks like in our sort of simulated mobile device. I wanna see a little drop down thing happen. Come on, drop down. I may have, in all likelihood I do have the local storage variable set, of course I do. There we go, so there's our little drop down thing here, here's another way to simulate it.

[00:06:11]
[SOUND] So if you're a iOS developer of some sort, you probably have Xcode installed, and there is something called the iOS simulator. This is sort of a fake iOS device that runs on your it's virtualized, so we can use mobile Safari on this device, hit our Hero's URL, and we can all see how this ends up working.

[00:06:40]
So I'm gonna end up deploying this. [SOUND] All right, and it's gonna go and do its thing. And while I wait, let me just grab the URL here. All right, so it is allegedly deployed, looks like the refresh worked. Now let's go to our mobile device, and see what happens.

[00:07:28]
So we're gonna fire it up, paste something in there, nope, guess not. I cannot scale that at all, that's interesting. Did viewport tag network the way we thought it would?
>> Mean the Euro emulator.
>> Scale, Wrong direction. This is as good as I can get unfortunately, and I don't see the little drop down happening.

[00:08:13]
Interestingly, let me hook up Safari and see what's going on. So this is a pro tip for, if you want to use the simulator for web development, you can actually use this develop menu which sorry, you can't see in the room. There is a simulator menu there, and you can actually connect to it.

[00:08:35]
Your mobile environment there. So now I have dev tools here.
>> I don't think you deployed to Heroku
>> I might not have let's see. This looks like it did though, right? You know what I didn't do. [SOUND] There we go. This will fix it. I will pick up that debugging thread as soon as we see that this works.

[00:09:05]
Look how much better that viewport is. And look at that nice little like drop down thing that is pointing directly to my share button, and I can hit that button. Add to homescreen, we had a nice meta tag there that that puts this here. And now when we add it to the homescreen, and launch it, we have a full screen experience here, all of the browser, Chrome Boom has gone away.

[00:09:28]
And it kind of behaves like a native app. Now obviously, you would want to style this, so it looks like a native app, fixed navbar, and maybe something along the bottom. So it's a nice familiar experience. But this is now you've created a experience that sort of is elevated a step above what the browser offers.

[00:09:49]
Now in terms of what Safari does now that I have it connected to my iOS simulator, I can actually hover over. Let me make sure I'm still connected here, simulator, okay. Apparently I wasn't, I can use it the same way we would use Chrome dev tools. In that, I should be able to inspect element, stuff like that.

[00:10:17]
Where's my little inspector here it is? So here's Phoenix fundamentals, see how I get that little rectangle hovering around, you used to this view fused inspect element before, I can even run JavaScript in here. And you get the expected result. So I love this trick. I love debugging in the simulator, because it's this much more closely resembles a true mobile device, compared to like mobile mode in Chrome, because it's emulating all of the stuff around it.

[00:10:55]
Stuff like seeing what the home screen icons actually gonna look like. In this case we'd say, it's low resolution here. Another point standalone mode. You'll notice we've got safari, and front end masters. There has independent frames here. So they're regarded as sort of independent running entities. So we could like.

[00:11:17]
We can kill Safari, and like front end masters is there,as sort of its own thing its own thread.
>> So we are clicking to a course.
>> Good question clicking to a course. The weakness revealed. So here what's happened is you have to be careful about, when only putting this full screen experience in place when you're ready for it.

[00:11:43]
So this works really well for single page apps, because they intercept, the default behavior of links, right? So instead of like links, which typically tell the browser, go and make a new request to this URL, and bring back some HTML and show it to me, they will typically tell it something called a router to take you to another like virtual page.

[00:12:08]
But it's still one page view and you're, it's just a lot of sophisticated hiding and showing of divice on the screen. That looks like a multi page experience. In this case, we wouldn't have found ourselves kicked out of the full screen mode. And we would have sort of stayed in this world of seeming like a mobile app.

[00:12:30]
If you put this full screen experience in too soon, like this, this feels silly, right? Like the first thing we tried to do. We ended up leaving getting kicked back out to a browser, at which point, what's the point. But it's still useful to know what these meta tags do, how the web app manifest works, and so on.

[00:12:51]
So, I do wanna show you one last thing. So I mentioned the idea of Google's index. Splitting between mobile, and non mobile, flavours, and I did want to show you the new sort of best in class benchmarking tool for seeing how fit is your app for, a mobile friendly world.

[00:13:17]
Specifically, this deals with like progressive web app technologies. And we're gonna have a course on front end masters later this year that relates to that. But I'm gonna use a Chrome extension called lighthouse. And it runs in your browser, right? So it'll work on localhost. And when you run the report, what it's gonna do is throttle your CPU down to 10%.

[00:13:38]
Throttle your network down to, like a good 2G signal, and make sure that you still have a presentable experience. And then we're gonna get a score from 0 to 100. And I, yeah, so we're at a 48, in terms of things that we're missing here, it's saying that great web applications work offline, they at least provide some sort of response when they're offline.

[00:14:05]
Even if it is, sorry, this, this app doesn't work while you're offline. Our page load performance is sufficiently fast. This is what we get from a server side rendered environment here. We've got express js, right? Serving up HTML, instead of a single page app, which kind of slows things down.

[00:14:25]
So you typically have to do a single page app, plus server side rendering to get the whole picture. The site to the network connection is secure. This is what we got by way of that https. Is true, you know that meta or sorry, that environment variable we pass for Roku switch that on, which is part of this project that you guys have here.

[00:14:48]
It's just a little logic in the server js file, down here in the source folder. That you can take a look at later if you care to. The user being prompted to add to homescreen. It requires a couple different things here. It looks like I have an error in my web app manifest, in fact, so I have an error in my JSON at position 32.

[00:15:13]
Let me investigate that really quick. Because that might boost the score up considerably. And I want us to be able to see like what that looks like. So, line position 32, I wish it would tell me a line. You know what it is now part of JSON. Thanks.

[00:15:34]
Thanks, editor for thinking it's JavaScript. So if we get rid of our comments, then we'll have the benefit of this web app manifest, should boost that score up considerably. [SOUND] All right, so while that's going over the wire, here's our custom splash screen. We're gonna get credit for a lot of this stuff.

[00:16:09]
Once it deploys, we'll just wait for it and rerun the test. All right refresh, to get that extra long page load as it boots up for the first time. Now let's see how we do. So is it 48 without the web app manifest, this accident lets us see how much of a difference this makes in terms of scoring.

[00:16:48]
A lot better, we're at a lot 80. So I don't. I don't believe that this has that much of a correlation to SEO. But Google is building tools to help us test mobile fitness. And they built an index that takes mobile fitness into account. I would listen to what they have to say.

[00:17:12]
But see here now we get a lot of web app manifest stuff. We don't have a service worker yet. There's a meta tag we could have added for theme color here that matches, that sort of an alternate placement for the same theme color that's in our manifest, JSON.

[00:17:27]
Here it wants us to use h2 instead of HTTP 1. But we're taking a lot of boxes at this point, for making really a nice modern app that has all of this metadata in place. Right?