Now that we're experts on manifest files, let's customize our manifest file! We're going to change a few things here and there, but we won't make any major changes. For the purposes of this book, we're not going to worry about working with the images, so we'll leave those be for now. Let's take a look at how we've set up the manifest file in public/manifest.json:

{
 "short_name": "Todos",
 "name": "Best Todoifier",
 "icons": [
 {
 "src": "favicon.ico",
 "sizes": "64x64 32x32 24x24 16x16",
 "type": "image/x-icon"
 }
 ],
 "start_url": "/",
 "display": "standalone",
 "theme_color": "#343a40",
 "background_color": "#a5a5f5"
}

So we've set our short_name and name keys to match the actual application. We've left the icons key alone completely since we don't really need to do much of anything with that anyway.

Next, we've changed start_url to just be "/", since we're working under the assumption that this application is the only thing running on its domain. We've set the display to standalone, since we want our application to have the ability to be added to someone's home screen and be recognized as a true PWA.

Finally, we set the theme color to #343a40, which matches the color of the nav bar and will give a more seamless look and feel to the PWA. We also set the background_color key, which is for our splash screen, to #a5a5f5, which is the color of our normal Todo items!

If you think back to the explanation of keys, you'll remember we also need to change our meta theme tag in our public/index.html file, so we'll open that up and quickly make that change:

<meta name="theme-color" content="#343a40" />

And that's it! Our manifest file has been customized! If we did it all correctly, we should be able to verify the changes again in our Chrome Developer tools: