Image

progressive-web-apps-vue-3

3 min read
Last update: December 19, 2021

Manifest.json

What is manifest.json?

Let’s start by checking out the star of this lesson: manifest.json

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.

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 todomvc-pwa-vue3.

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!

Next Steps

To learn more about other options you want to configure, be sure to check out the official docs for the @vue/cli-plugin-pwa.

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.