PWA: config `pwa.iconPaths` is being ignored

[lkho]

Version

5.0.0-alpha.2

Environment info

  System:
    OS: Windows 10 10.0.19041
    CPU: (8) x64 Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz
  Binaries:
    Node: 10.20.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.10 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 87.0.4280.88
    Edge: Spartan (44.19041.423.0), Chromium (87.0.664.66)
  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.4.1
    @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.4.1
    @vue/cli-plugin-babel: 4.4.1 => 4.4.1
    @vue/cli-plugin-eslint: 4.4.1 => 4.4.1
    @vue/cli-plugin-pwa: ^4.5.10 => 4.5.10
    @vue/cli-plugin-router: 4.4.1 => 4.4.1
    @vue/cli-plugin-vuex: 4.4.1 => 4.4.1
    @vue/cli-service: 4.4.1 => 4.4.1
    @vue/cli-shared-utils:  4.4.1 (4.5.10)
    @vue/component-compiler-utils:  3.1.2
    @vue/eslint-config-prettier: 6.0.0 => 6.0.0
    @vue/preload-webpack-plugin:  1.1.1
    @vue/web-component-wrapper:  1.2.0
    babel-helper-vue-jsx-merge-props:  2.0.3
    eslint-plugin-vue: 6.2.2 => 6.2.2
    vue: 2.6.11 => 2.6.11
    vue-cli-plugin-bundle-service-worker: ~0.1.1 => 0.1.1
    vue-eslint-parser:  7.1.0
    vue-facebook-login-component: 2.3.0 => 2.3.0
    vue-google-login: 2.0.5 => 2.0.5
    vue-head: 2.2.0 => 2.2.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.9.2
    vue-router: 3.4.0 => 3.4.0
    vue-style-loader:  4.1.2
    vue-template-compiler: 2.6.11 => 2.6.11
    vue-template-es2015-compiler:  1.9.1
    vue2-touch-events: ^3.0.1 => 3.0.1
    vuex: 3.4.0 => 3.4.0
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

1. $ vue add pwa
2. add or modify the pwa.iconPaths section in vue.config.js, specify some paths other than the default ones.
3. $ vue-cli-service build
4. look at the generated index.html, the meta tags of the icons is still the default path.

What is expected?

meta tags should be using the iconPaths

What is actually happening?

meta tags are still default

---

The config is being mutated, during the webpack config chain. However, it appears that the chain is being executed multiple times, and thus the config value is dropped in the subsequence calls. https://github.com/vuejs/vue-cli/blob/637414cb6972ff5600f5e37c4e2762a88478c873/packages/%40vue/cli-plugin-pwa/lib/HtmlPwaPlugin.js#L58

related issues: https://github.com/vuejs/vue-cli/issues/4069 (is closed, but actually the problem is not yet solved)

[stfsy]

Hi everyone, I feel like this is still not working. At least not on my machine. Any thing we can do to get it fixed or #6203 merged?

[Seungwoo321]

pwa.iconPaths only modifies the link and meta tags in the head.

https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-pwa/lib/HtmlPwaPlugin.js#L88

        iconPaths: {
            favicon32: `img/${iconsDir}/favicon-32x32.png`,
            favicon16: `img/${iconsDir}/favicon-16x16.png`,
            appleTouchIcon: `img/${iconsDir}/apple-touch-icon-152x152.png`,
            maskIcon: `img/${iconsDir}/safari-pinned-tab.png`,
            msTileImage: `img/${iconsDir}/msapplication-icon-144x144.png`
        },

But, pwa.manifestOptions.icons must be added to modify the icon path in manifest.json.