What is manifest.json?
Let’s start by checking out the star of this lesson:
So what exactly is
manifest.json, it’s basically the config file for our progressive web app (PWA)! Let’s go over some of the main properties you should know about.
Popular Configurations to Know About
At the very top, we have the
name property which does as you might guess: it defines the name of our PWA when it’s installed!
There’s also a
short_name property that will be used when context to display the
name is too short. It’s usually recommended to keep this less than 12 characters.
Then we have the
theme_color, which can affect the default theme color depending on the operating system the app is opened in. As you can see in our simulation on an iPhone, our current theme color here, which is a sea green, is not visible.
Next, we have the
icons which is an array of the various icons we need to upload an define in order to support multiple devices and operating systems.
As you can see, the plugin has already scaffolded a bunch of defaults for us so that we at least have a placeholder when starting out.
Jumping past the icons, next we have the
start_url which instructs the app to open a specific page when the app is started. Typically we want the home page, so this will be left alone; but if you want to ever change that, this is where you’ll configure it!
Next up is the
display property which determines the preferred display mode for the website. Without this config, it typically defaults to
browser which opens the app with a browser UI. However, as you can see here, it’s already preconfigured to
fullscreen since it’s assumed that most developers want to provide a more mobile app like experience.
Finally, we have the
background_color property which determines the color of the page that serves as a placeholder before the styles are loaded.
With that said, you might be wondering: “Well, where do we configure this?”
True to the Vue ethos, the CLI plugin automatically sets a lot o things for you without any additional configuration. In other words, there’s no dedicated
manifest file in your
src directory that directly correlates with the output.
Custom Configurations for Your PWA
That said, in the event you want to configure something though, all you need to do it open up the
vue.config.js file (or create one if you haven’t needed one yet), and then define your custom properties within the
pwa option. In this case, I’m going to update the name of the app to ‘Todo Mastery’ instead of
And once we run the build, we can see the fruits of our effort in this newly built
manifest.json where the
name has been updated accordingly!
To learn more about other options you want to configure, be sure to check out the official docs for the
And with that, it’s time for us to take a look at a popular feature that comes with PWAs, how to store data offline in your PWA.