This course has been updated! We now recommend you take the Build Progressive Web Apps (PWAs) from Scratch course.
Transcript from the "manifest.json" Lesson
[00:00:00]
>> Mike North: Here is something that is part of the progressive web app standard, and it is the concept of a web application manifest. So you will end up creating a new JSON file, and essentially referring to it from your index.html, which is to say here is where you may find my manifest, here's the path to this file.
[00:00:23] And in this manifest we can do a couple of things. We can define our app name, again this is something short that goes underneath an icon. We can specify icons which, they're little objects that we can put in here. So, at the very least, you should make sure that you provide a 192 and a 512 pixel image.
[00:00:44] These are used for the home screen icon, and for a splash screen on Android devices that support this kind of thing. So as the app boots up, while you're making that first request, or while it's sort of restoring memory to give you like your state back, this is what you'll see.
[00:01:03] So it will like make a splash screen for you. And then we get a theme color and a background color, and that just well, if the browser supports it, it'll color sort of the address bar and the menu bar, so you could make that like your brands color.
[00:01:20] And background color is sort of like if you do not color the body, this is sort of what unstyled area of your HTML body will look like sort of. And also, when you pull down, if you have pull to refresh or something like that, oftentimes that'll sort of like hidden space that'll be the background color as well.
[00:01:44] This display option in this manifest is very much like that full screen mode. There are four options we can use, no browser currently supports them all. But let's go from bottom to top here, so browser this is like the default. If you don't specify anything at all, you get browser.
[00:02:03] You get the full address bar like the complete browser UI, just as if you visited that link and it was not a progressive web app. Minimal UI, it is defined as a light browser UI. The way I can best explain this if you've ever been in an Android or an iOS app and you've visited a URL that's posted in a tweet or something like that.
[00:02:27] You find that you're sort of taken to that page but you don't have the ability to then like access that URL and change it. It's not a full web experience and you might not have bookmarks there, maybe just the share button. So you can log in, but it's a very abbreviated browser experience.
[00:02:46] Stand alone is what you'll get, it's as close as we can get to full screen in iOS. Now we can't get rid of the battery or the clock or like the cellular and Wi-Fi signal strength, but it's pretty good. We're like 40 pixels short of full screen. And then finally full screen is every pixel, this would be great for a game.
[00:03:06] Where there might not be an up direction to this thing, and you just want to take over all of the real state. The ones that are currently supported broadly are standalone and browser. And the idea is, if a browser doesn't support what you've asked for it will go down to the next one.
[00:03:30] So if you say I want full screen, you might end up with standalone. It's as good as it can get, and that's why it's sort of a linear progression like that, and ultimately fallback to browser.
>> Mike North: Did you have a question about this?
>> Speaker 2: That, think it and it'll happen, you perfected that just there.
[00:03:48]
>> Mike North: Sweet, sometimes people call it psychic pizza just as you're thinking about it I've already got something for you.