PWA: Can't edit icons in `vue.config.js`

Version

3.8.0

Environment info

  System:
    OS: macOS Mojave 10.14.5
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 12.3.1 - /usr/local/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 74.0.3729.169
    Firefox: 66.0.3
    Safari: 12.1.1
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0 
    @vue/babel-preset-app:  3.8.0 
    @vue/babel-preset-jsx:  1.0.0 
    @vue/babel-sugar-functional-vue:  1.0.0 
    @vue/babel-sugar-inject-h:  1.0.0 
    @vue/babel-sugar-v-model:  1.0.0 
    @vue/babel-sugar-v-on:  1.0.0 
    @vue/cli-overlay:  3.8.0 
    @vue/cli-plugin-babel: ^3.6.0 => 3.8.0 
    @vue/cli-plugin-pwa: ^3.6.0 => 3.8.0 
    @vue/cli-plugin-typescript: ^3.6.0 => 3.8.1 
    @vue/cli-service: ^3.6.0 => 3.8.0 
    @vue/cli-shared-utils:  3.8.0 
    @vue/component-compiler-utils:  2.6.0 
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/web-component-wrapper:  1.2.0 
    typescript: ^3.4.3 => 3.4.5 
    vue: ^2.6.10 => 2.6.10 
    vue-class-component: ^7.0.2 => 7.1.0 (6.3.2)
    vue-hot-reload-api:  2.3.3 
    vue-loader:  15.7.0 
    vue-mixin-decorator: ^1.1.1 => 1.1.1 
    vue-mixins:  0.2.20 
    vue-portal: ^1.0.0 => 1.0.0 
    vue-property-decorator: ^8.1.0 => 8.1.1 
    vue-router: ^3.0.3 => 3.0.6 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.5.21 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.1.1 => 3.1.1 
    vuex-module-decorators: ^0.9.9 => 0.9.9 
    vuex-persist: ^2.0.0 => 2.0.1 
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

1. Create vue.config.js file with this content:

'use strict';

module.exports = {
    devServer: {
        port: 8087,
    },
    pwa: {
        icons: [
            {
                'src': 'icons/android-chrome-192x192.png',
                'sizes': '192x192',
                'type': 'image/png',
            },
            {
                'src': 'icons/android-chrome-512x512.png',
                'sizes': '512x512',
                'type': 'image/png',
            },
        ],
        iconPaths: {
            favicon32: 'icons/favicon-32x32.png',
            favicon16: 'icons/favicon-16x16.png',
            appleTouchIcon: 'icons/apple-touch-icon-180x180.png',
            maskIcon: 'icons/safari-pinned-tab.svg',
            msTileImage: 'icons/mstile-144x144.png',
        }
    }
};

1. Run yarn serve

What is expected?

The icons in the manifest should be the same path you entered in the config file.

What is actually happening?

The icons that used are the default. https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-pwa/lib/HtmlPwaPlugin.js#L15

Chrome debugger: Error while trying to use the following icon from the Manifest: http://localhost:8087/img/icons/android-chrome-192x192.png (Download error or resource isn’t a valid image)

---

1. I’m using modern mode
2. I tried it only on development yet

[LinusBorg]

Right. Got those mixed up.

However I now spotted the mistake:

• pwa.iconPaths is used for the icons in the meta tags only.
• pwa.manifestOptions takes all options for the manifest file, so you have to define the icon options for the manifest here as pwa.manifestOptions.icons. You defined pwa.icons though.

[ouraios]

@LinusBorg Would it pe possible to add the icon parameter in the example of pwa.manifestOptions.icons in the doc ?

For people like me who start discovering the world of pwa directly with vue-cli its confusing on how is generated the icons parameter of the generated manifest.json

I lost an hour to finally end up on this issue to find the solution.

Besides this little issue the PWA integration in Vue CLI is really great ! You made a really great work !!