Vue-cli: Can not change background color value for manifest.json in PWA template.

[alvinkonda]

Version

4.0.5

Environment info

System:
    OS: macOS 10.15
    CPU: (4) x64 Intel(R) Core(TM) i5-4570R CPU @ 2.70GHz
  Binaries:
    Node: 12.13.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.13.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 78.0.3904.108
    Firefox: 70.0.1
    Safari: 13.0.2
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.1.2 
    @vue/babel-preset-app:  4.0.5 
    @vue/babel-preset-jsx:  1.1.2 
    @vue/babel-sugar-functional-vue:  1.1.2 
    @vue/babel-sugar-inject-h:  1.1.2 
    @vue/babel-sugar-v-model:  1.1.2 
    @vue/babel-sugar-v-on:  1.1.2 
    @vue/cli-overlay:  4.0.5 
    @vue/cli-plugin-babel: ^4.0.0 => 4.0.5 
    @vue/cli-plugin-eslint: ^4.0.0 => 4.0.5 
    @vue/cli-plugin-pwa: ^4.0.0 => 4.0.5 
    @vue/cli-plugin-router: ^4.0.0 => 4.0.5 
    @vue/cli-plugin-vuex: ^4.0.0 => 4.0.5 
    @vue/cli-service: ^4.0.0 => 4.0.5 
    @vue/cli-shared-utils:  4.0.5 
    @vue/component-compiler-utils:  3.0.2 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^5.0.0 => 5.2.3 
    vue: ^2.6.10 => 2.6.10 
    vue-eslint-parser:  5.0.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.7.2 
    vue-router: ^3.1.3 => 3.1.3 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.10 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.0.1 => 3.1.2 
  npmGlobalPackages:
    @vue/cli: 4.0.5

Steps to reproduce

Need option to update "background_color" in PWA template. There is no mention here as well. By default VUE-ClI add "#000000"

https://cli.vuejs.org/core-plugins/pwa.html#configuration

What is expected?

Option to change Background Color

What is actually happening?

VUE CLI add the default "#000000" color

[LinusBorg]

You can just provide a manifest.json base file and provide a path to it, or provide the background color in pwa.manifestOptions I think.

[plc-dev]

@LinusBorg That option worked.
Example:

pwa: {
    workboxPluginMode: "InjectManifest",
    workboxOptions: {
      swSrc: "src/service-worker.js"
    },
    name: "Test",
    appleMobileWebAppCapable: true,
    themeColor: "#B1B2B4",
    msTileColor: "#B1B2B4",
    manifestOptions: {
      background_color: "#F1AD2D"
    }
  }

I know it's tedious, but are there some additions planned to the documentation regarding the PWA aspects? Information seems scarse and the approach often boils down to trial and error.

[LinusBorg]

The option that I told you is documented, and described as follows:

pwa.manifestOptions
The object will be used to generate the manifest.json

If the following attributes are not defined in the object, the options of pwa or default options will be used instead. [List of attributes omitted here]

What specifically is unclear? Did the last sentence make you think that only the listed properties were allowed for this option? Or did you not understand what we meant by "The object will be used to generate the manifest.json"?

We need feedback from people like you, about what specifically they are missing or what they misunderstood in order to improve documentation, so your feedback is highly apprechiated.

[plc-dev]

Thanks for the reply.

What I found confusing is this sentence in particular:

If the following attributes are not defined in the object, the options of pwa or default options will be used instead.

The differentiation between which properties are included in that hierarchy seems very implicit, in that some options cannot be overwritten by adding them directly to the pwa object, such as background_color or display and start_url presumably.
Seems kind of nitpicky now that I've written it, but a explicit distinction might help to avoid confusion, as to which properties have to be set in pwa.manifestOptions.

[whoisjorge]

Seems kind of nitpicky now that I've written it, but a explicit distinction might help to avoid confusion, as to which properties have to be set in pwa.manifestOptions.

@plc-dev I understand you perfectly. I guess the docs are clear but for some reason this understanding can be skipped... what do you think about this subtle (although a bit redundant in their context) modification?

https://cli.vuejs.org/core-plugins/pwa.html#example-configuration

// Inside vue.config.js
module.exports = {
  // ...other vue-cli plugin options...
  pwa: {
    name: 'My App',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',

+   // configure the manifest options
+   manifestOptions: {
+     display: 'landscape',
+     background_color: "#42B883"
+     // ...
+   },

    // configure the workbox plugin
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      // swSrc is required in InjectManifest mode.
      swSrc: 'dev/sw.js',
      // ...other Workbox options...
    }
  }
}

@LinusBorg 😕

[NataliaTepluhina]

@whoisjorge I think this is a great addition as people usually tend to pay more attention to example code than to API reference. Would you mind creating a PR?

[whoisjorge]

@NataliaTepluhina Of course, there it goes!

[NataliaTepluhina]

Closing this as related PR was merged 🎉