 So Matt I'm working on a new web app for lonely people. Okay, what does it do? What's it called? It's called words with cats. Now Words with cats. It's a brilliant, brilliant name. Um now I want to show an icon on my phone's home screen someone launches this and I also want to be able to show like an Icon or some visual in a splash screen. Is that reading a dictionary or something a cat reading it Do you were a thought leader? How can I get that done? So that's This is a Chrome now has the at-home screen stuff. So basically if you meet a certain set of criteria When a user is basically engaged into your web app, it will come up a little banner saying hey We'd like to add this time screen. So you basically to be on a hps You need to have a service worker and you need a web app manifest And then after that it's basically depending on the user coming back a couple of times Then it will show the banner So the web app manifest is the main thing that you need To enable all of this along with the other bits But the manifest is just a JSON file at that point. Cool. So it's just a JSON file. Is this a crime on anything? No, no, this is all the standard space So basically any browser can look for this link rail tag that links to your manifest JSON file at that point They can pass it and it's just going to be you have to have certain things to find for then browsers to take it All out right. So the manifest lets me customize my icons. What other what other stuff can I configure in there? You can define short name which will be the text underneath your icon that you'd normally see theme color Which Chrome uses is like the URL color along the URL bar background color is for the splash screen So if you have that add time screen, they click on it It will launch and basically while Chrome's loading what you can do is show a splash screen That's like solid color and then have an icon on top of it along with the text So background color does that you've got an array of icons So again depending on what the browser wants to use the icon for it will just pick the best size for it Start URL is super awesome What that is is basically you remember back in the day we used to have our time screen in Chrome Where it's like hidden in the menu? Yeah So what that would always do is whatever page you are on that is where you will get pointed to when you click on the icon From the home screen start URL lets you define where that is now So if you're if someone was in the middle of a blog article click on our time screen now You can say actually just go to the home of the blog Then you've got display display is basically Rather than launching browser mode you can sit there and say actually I wanted to go full screen Oh, so you can launch it full screen the same way that a native app might look like right? Yeah, exactly But alongside of that there's also in the spec orientation so you could theoretically lock it to portrait or landscape cool So for games, that's particularly. Yeah, like you want to do like force to like thumbsticks And yeah, the nice thing especially I was gonna say with the start URL You can actually then add the query parameter, so then you can like track how many people are using it So like home screen equals true and then analytics will just show you cool So that's pretty much the bulk of it nice Is there if I wanted to like validate that I've got a legit manifest is there a tool I can use for that? Yes, someone has built a web app manifest validator I think DevTools were also gonna do it so you could like force a download of the manifest and get DevTools to pass it I believe we mentioned as much in totally tooling tiers But I haven't actually used it myself and admittedly if you don't use something like that It's kind of hard to figure out whether it's working or not. Yeah, so those are all we're checking out Okay, so we talked about the web app manifest the manifest validator, so we're checking out DevTools is looking at it Are there docs on this available as well? The best thing to look at is Paul Kinlan's blog post it covers example manifest How do I edit the HTML page and then how to debug it as well? So that's probably the best bet sweet and plus it's in web starter kit and a whole other host of the projects that we do