Challenge 5: Mobile Optimizations

[00:00:00]
>> So this is gonna be a new folder we're working on today. So remember, you're gonna have to do Heroku config set exercise equals mobile to switch Heroku over to serving from a different folder. The reason it's new is cuz I've left all of the icons in place generated for you.

[00:00:19]
All of the meta tags for icons just need to be commented out. The Add to Home screen library is in place it's loading. You'll you'll need to use it by putting a little JavaScript at the bottom of the body right inside the body at the very bottom. And so the tasks here are I want a viewport meta tag, I want the Add to Home screen, JavaScript library working with appropriate Home Screen icons.

[00:00:46]
Create a manifest.json in the mobile/projects public folder, just a file called manifest.json. And remember there's a meta tag you have to add with the manifest.json. So if you go back to my slide on that topic, you'll see the meta tag is right up on top. And then deploy it.

[00:01:05]
And just for fun, send it to your phone or something to see if it works. You don't even have to send it to your phone now. I will show you what you can do in Chrome to make to test it out. So if you open up your developer tools, there's a tiny little mobile device button here.

[00:01:27]
And when you open it, you basically get to simulate a mobile device and because it also simulates a user agent, you will be able to test out whether this addToHomescreen thing works. Now keep in mind after you see it once you're gonna get that little flag and local storage that will prevent it from showing up again.

[00:01:49]
You can always go into Application, Local Storage, and delete stuff in here that pertains to your Heroku app or local host. It'll look like, let's see if I can get it to work here. I'm gonna need to switch it. But it would be like org.cubic.addtoHome, and then there would be some value.

[00:02:17]
So if you blow that away and refresh, it'll start up. And with that I have added, definitely try on your mobile device cuz that's the easiest way to see the home screen icon and to ensure that your title is what it should be on that home screen bookmark.

[00:02:36]
So send yourself a link on your phone and see how this works once we're all done