This course has been updated! We now recommend you take the Build Progressive Web Apps (PWAs) from Scratch course.
Transcript from the "Fullscreen Metatags" Lesson
[00:00:00]
>> Mike North: Additional metatags, and these are Apple-specific, unfortunately. The features here grew before there was a standard, so you'll start to see there's some stuff we have to do for Apple, some stuff we have to do for Android. I will post in the chat and add to the notes for this class a master list of like all of the different possible metatags, if you wanted to be comprehensive about it and get the Windows 10 Bookmark Tile and the Blackberry image for their Favorite Site section.
[00:00:32] There are hundreds of these things. Here is a good starting point, these three. The first one, mobile-web-app-capable, it allows you to when the app is bookmarked and added to home screen, right? When you launch this thing, if it's a mobile-web-app-capable, the app will launch without the address bar or any of the other browser UI.
[00:00:56] So you won't have the back button, you won't have Reader View or the bookmark stuff or anything like that. Think of it like a fullscreen iPhone. You'll still get the battery bar and the clock up at the top. You can choose between white or black status bar, which is that little battery bar with the clock at the top.
[00:01:17] So that's the second meta tag. And then home screen title, this is important we have for SEO, it's important to have a nice descriptive title for each page. You have a very limited number of characters, I believe it's 16, for the text that can be underneath an Apple Home Screen icon.
[00:01:34] So this is where you might want to make sure you have something nice rather than letting the OS truncate it. It'ill basically take the first 12 characters and then add a couple of dots, and that's what you get. That is often not what you want. So this is sort of the Apple side of things.