Check out a free preview of the full Progressive Web Applications and Offline course:
The "Challenge 1: Metadata" Lesson is part of the full, Progressive Web Applications and Offline course featured in this preview video. Here's what you'd learn in this lesson:

In this challenge, students add progressive metadata in the course application.

Get Unlimited Access Now

Transcript from the "Challenge 1: Metadata" Lesson

[00:00:00]
>> Mike North: So what we wanna do is take some step to prompting the user to add to home screen. You can do that just with the web app manifest if you like. But if you're feeling ambitious you may try to hook up this add to home screen library, it's not set up for you yet but it's pretty simple.

[00:00:18] I want us to have FEGrocer as the app name as opposed to using the title of the HTML page which is the default that you'll fall back on. We should hook up a home screen icon, and the icons are there for you, I've sized them they should all work.

[00:00:35] And we'll use that display attribute in the web app manifest and the Apple specific meta tag to try and strip the browser UI away, set up some theme colors, start_url, this is an interesting one. We're gonna set the start_url to period, this is to try to make it so that no matter what page a user might be on when they decide to add your app to home screen, the app will always launch from the particular URL.

[00:01:04] And so imagine you're on a news site and you're reading through it, and you say, this is very insightful, I will add this to my home screen. You're always going to enter the app through that specific article that you read, right, and that is not how native apps behave.

[00:01:19] They're sort of shattering the illusion that we got this from the app store, and set your viewport up properly. So those were the requirements, here are the tips so you don't have to worry about React and webpack too much. So, there's a file in the client folder called index.ejs, think of this as index.html, so anything you add there, like meta tags and link tags, those will show up in your index.html.

[00:01:48] We have reached a point where we need a new file, you'll notice that app.js, when we looked at that 80 kilobyte file, everything is sort of packaged into that. We want a separate file and so you're gonna go into either indexjs or app.jsx and just add this line up at the top, and I believe if your webpack efficient out there is even an efficiency improvement I can make, but this will work.

[00:02:16] And this would basically make it so that when the app is built, that new file exists, it's part of the built app. It'll be in your dist folder if you do NPM run build prod, and then make use of this mobile simulation stuff either using, if you have simulator already installed, play with it a little bit, see how it works.

[00:02:37] You may notice that some things pop up in iOS, some little glitches that have to do with the way webpack works. And right there we've discovered that the world is not the same in mobile Safari, and if you have extra time, jump into this file here which represents those little grocery item tiles.

[00:02:58] See if you can figure out how to add the schema.org data, using the stuff I had on the slide for that product data, use that as a template and just drop that in there. That would be adding that, making things even more discoverable, right? Great for e-commerce type applications.