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

MatanYadaev commented 5 years ago

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',
        }
    }
};

2) 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

jackqiu0123 commented 5 years ago

same problem

UnKnoWn-Consortium commented 5 years ago

For versions before v4.0.0-alpha.0, the manifest.json is copied to the public folder at plugin installation, meaning you have to edit it yourself there.

With version 4, the manifest.json is generate at build time by the plugin (and so the manifest.json at the public folder is ignored). You can alter the default manifest options via pwa.manifestOptions at the vue.config.js file, or the "vue" field in package.json. For details, you could refer to the latest README.md at the dev branch.

LinusBorg commented 5 years ago

We currently don't have plugins documented directly on the documentation website, but simply link to their README files on github on the dev branch.

this is the reason for OPs mistake. They read the README and found docs there that they should be able to make the change, because the README on the dev branch already contains the docs for this feature, even though the current stabvle release doesn't support it yet.

Sorry for that :(

I think we should dedicate some time to create some minimal docs for each core plugin on the documentation website to prevent such confusion in the future.

NataliaTepluhina commented 5 years ago

@LinusBorg I would like to work on this 😅

LinusBorg commented 5 years ago

That's awesome!

Since this issue here is about a specific misunderstanding with one plugin, would you open a new issue where we can discuss the approach?

Then we can close this issue here with reference to the new one.

NataliaTepluhina commented 5 years ago

@LinusBorg done!

LinusBorg commented 5 years ago

Closing in favor of #4117

MatanYadaev commented 5 years ago

@LinusBorg Are you sure that icons array is now modifiable from the vue.config.js/package.json? I updated my CLI version to v4.0.0-beta.1 and my icons array isn't get updated in the manifest.json file, I still can see the default values.

LinusBorg commented 5 years ago

I updated my CLI version to v4.0.0-beta.1

Did you update all of the @vue/* packages in package.json as well? the @vue/cli package is only responsible for creating the initial boilerplate, the actual config etc happens in the plugins that you see ion your project's dependencies.

For reference:

MatanYadaev commented 5 years ago

@LinusBorg Yes, I did.

BTW, the implementation you attached is regarding the meta and link tags, I'm talking about the manifest.json file:

https://github.com/vuejs/vue-cli/blob/v4.0.0-alpha.1/packages/%40vue/cli-plugin-pwa/lib/HtmlPwaPlugin.js#L15

LinusBorg commented 5 years ago

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.

MatanYadaev commented 5 years ago

@LinusBorg Gotcha, thanks, it works!

jonathan-martz commented 4 years ago

@LinusBorg nice, thats works for me

ouraios commented 4 years ago

@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 !!

JeSuisUnCaillou commented 4 years ago

I agree with ouraios, the documentation should mention the pwa.manifestOptions.icons. I had to find this thread in order to discover that this option actually existed in vue.config.js.

DRBragg commented 4 years ago

I opened a new issue, #5407, and a corresponding PR #5408 Which should clear up the confusion around icons.

Syiabonga commented 4 years ago

I still couldn't figure out how to change my favicon. Can someone help me?

lkho commented 3 years ago

@Syiabonga the bug is still there. it is a bug, not a documentation issue.

krushndayshmookh commented 3 years ago

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.

thanks man!

drewjosh commented 1 year ago

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.

Can someone tell me please why is this not written in the documentation? Wasted so much time on this... Once you know it is logic to set it in pwa.manifestOptions.icons, but since it doesn't mentioned in the doc, it's very hard to find out.

vuejs / vue-cli