VueJs Progressive Web Apps(PWA): How to Change the App Name, Icon, Color, Display for Mobile Devices.

In this tutorial, I will show you how to create and change the Manifest file. The manifest file will allow the way of displaying our application, especially on mobile devices i.e showing app name, app icon for different size mobile screen, the color of the app, etc.

Please visit our previous articles on PWA:

Create a Simple VueJs Progressive Web Apps (PWA) and Deploy to Firebase

How to deploy VueJs Application to Firebase for Different Environment

How to Test Our Progressive Web Apps(PWA) Locally Over HTTPs.

Create a Manifest file.

The default manifest file will be created when you build your application with Vue CLI. Let's build our application.

yarn build

Now you can see the manifest.json file under the dist/ folder. This is the file that we are going to modified according to our requirements.

To change this file first copy the file inside the public/ folder. On each build, all the files under the public folder will be copied to the dist/ folder so we have our changes in production.

 The manifest.json file looks like below:

{
  "name": "vue-pwa",
  "short_name": "vue-pwa",
  "theme_color": "#4DBA87",
  "icons": [
    {
      "src": "./img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "./img/icons/android-chrome-maskable-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "./img/icons/android-chrome-maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "background_color": "#000000"
}

We will discuss each property used here. If you have difficulties generating this file make sure to create one with this structure.

If you deploy with this default configuration and open it into your mobile then you can see the below display.

Note: we are using the default vue CLI application for testing.

name :

This will be the name displayed on the screen(splash screen) before the application load the CSS. Please change the name you want for your application. When you click the icon then you will see this name and icon as a first screen.

short_name:

This is similar to the name property but displayed under the launcher icon as shown above.

theme_color:

The default theme color of the application.

icons:

Different icons used for different screen mobile devices. For e.g the different launcher icon size for the different screen for the android device looks as below:

Make sure to put different size image icon for your app under public/img/icons folders or if you want to use in a different folder inside public/ then use the same path on manifest.json file.

By providing different size icons, the icon will be used according to the different screen size devices.

start_url:

This will be the URL for the entry point when you add the app to the home screen.

display:

"that determines the developers’ preferred display mode for the website. The display mode changes how much of browser UI is shown to the user and can range from the browser (when the full browser window is shown) to fullscreen (when the app is full-screened)."

background_color:

This defines the background color of the splash screen before the application CSS is loaded. When you click the app on your device, initially it will load the background color with icons before the app is loaded.

For other properties and more descriptions please visit Web App Manifest. 

Finally, make changes to the properties under manifest.json and build the application and deploy. You can see the desired changes in your mobile devices.

Read More