 Once you have a PWA, how do you make it easy to start? Hi, I'm Sarah Clark, and I'm here to show you how to make your PWA have its own icon just like a native app. Since a PWA begins on the web, your customers could create a bookmark in the browser. But since a PWA is meant to be as convenient as a native app, it can have an icon on the home screen. In the past year, 80% of PWA users intentionally moved an app to their home screen. It's incredibly useful. If you remember the first talk, Sam mentioned fire, fast, integrated, reliable, and engaging apps. Adding an icon to the home screen falls into the OS integration and engaging categories. There are two common ways to install an icon depending on your platform, a manifest file or meta tags. We'll show you both ways beginning with the manifest file. The web app manifest is a simple JSON file that you link from each HTML page. It also lives in the root of your site. This lets you specify an icon for the home screen, a name for the application, and even customize the color of the browser Chrome. Here's a sample manifest file with some edits to make it fit on the screen. You should give the app full name and a short name to appear under the icon. Then you list a set of icons at different sizes for different screens. Note that the three dots isn't part of the syntax. It just shows where we edited out icon data to make this fit the screen. The full name and the icon will also be used for the splash screen. You should also set the background color for this screen. You should always define the starting URL for your app. You can also control whether you show the URL bar or launch in full screen mode, and you can choose the screen orientation. There's one last thing. You can change the color of the app in the task switcher. This usually matches your background color. Safari on iOS was the first browser to allow full screen web apps back in 2007. It predates the manifest, so you can add these two meta tags to every page to use the full screen and to make the status bar translucent. Then users can bookmark your app to get an icon. But be careful. When you go full screen, you lose access to Safari's back button, so you will need to provide navigation inside your app. As of mid-2018, Apple was developing manifest file support, so it won't be long until you can use one standard across all browsers. Let's ask your customer whether they want to install an icon. Browsers that use the blank engine, such as Chrome, have an installation prompt that you can trigger. Your app has to meet two requirements. It needs a manifest with at least a 192 by 192 icon, and it needs to work offline. Let's talk about how to trigger the prompt. Some older versions of Chrome use a heuristic. Modern versions require you to explicitly show the prompt. Here's a technique that works on all versions. First, you need to listen for the before-install-prompt event and save the event. Then you need to show something on the screen that the user can click to indicate they want to install to the home screen. Chrome needs to see a user gesture at this point. Finally, take the saved event and call prompt on it. This is easier to understand with some code. First, we listen for the before-install-prompt event and save it. Call prevent default to keep early versions of Chrome from showing the prompt automatically. By the way, if you're wondering about the let keyword, it's an alternative to var. You can use var here if you prefer. Add a button, link, or icon to begin the installation process. Don't show a full-page interstitial or other elements that may be annoying or distracting. In some cases, you may want to wait before showing the prompt to the user so you don't distract them from what they're doing. For example, if the user is in a checkout flow or creating their account, let them complete that before offering the prompt. When you get a click-to-start installation, call prompt on the saved event. This must happen inside the user event handler. It will show a modal dialogue asking the user to add your app to the home screen. Then wait for the promise in the user choice property. It will complete once the user accepts or cancels the dialogue. You should then clear the saved event. Notice that we are looking at the outcome to log a message. This is optional, and you might use it for debugging or to fire an analytics event. Even if you don't check this, Chrome will do the right thing. Note that you can only call prompt on the deferred event once. If the user dismissed it, you'll need to wait until the before install prompt event is fired on the next page load. Speaking of analytics, you can listen for the app-installed event to detect that your PWA has been added to the home screen. Once you add this code, let's test it with Lighthouse. The user can be prompted to install the web app, audit, verifies if you have implemented before install prompt correctly. You can also look at the app manifest in the Chrome Developer Tools. Clicking Add to Home Screen will trigger the before install prompt event so you can test your workflow. Note, if the PWA criteria aren't met, Chrome will throw an exception in the console instead of firing the event. There are two more things you may want to add. One is to change the CSS if launched full screen. The other is to detect a full screen launch in code. You can use a media query in CSS or call match media in JavaScript to see if the display mode is set to standalone. Or you can do this in your manifest file by adding a query parameter to your start URL. This makes it easy to use analytics to see how many people are installing your PWA. If you start running into problems, check out the next episode for some troubleshooting tips. Otherwise, look at the rest of the videos to start becoming a PWA expert. Thanks for watching.