Vue PWA Plugin - Manifest doesn't use my config attributes

Question

It's very strange. I installed the VuePWA-Plugin and configured it in the package.json like this:

"pwa": {
    "name": "Poolio",
    "themeColor": "#205c94",
    "msTileColor": "#205c94",
    "display": "fullscreen",
    "appleMobileWebAppCapable": "yes",
    "appleMobileWebAppStatusBarStyle": "#205c94",
    "pwa.iconPaths": {
      "favicon32": "./img/icons/favicon-32x32.png",
      "favicon16": "./img/icons/favicon-16x16.png",
      "favicon96": "./img/icons/favicon-96x96.png",
      "appleTouchIcon": "./img/icons/apple-icon-152x152.png",
      "msTitleImage": "./img/icons/ms-icon-144x144.png"
    }
  },

But it doesn't use any of my settings in the manifest.json (beside of the name, but this must be used by another setting, cause it doesn't change, if I change it)

I asked myself where it takes the themeColor and so I searched in the hole app folder for the hexcode #4DBA87, which is written in the manifest. But didn't find anything...

Heres the manifest output:

{
    "name": "Poolio",
    "short_name": "Poolio",
    "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"
}

Answer 1

You can put all your manifest options inside pwa.manifestOptions. It would be something like this inside your vue.config.js:

module.exports = {
  pwa: {
    manifestOptions: {
      name: "App Name",
      short_name: "Short Name",
      start_url: "./",
      display: "standalone",
      theme_color: "#000000",
      icons: [
        {
          src: "./favicon.svg",
          sizes: "512x512",
          type: "image/svg+xml",
          purpose: "any maskable",
        },
      ],
    },

    themeColor: "#4DBA87",
    msTileColor: "#000000",
    appleMobileWebAppCapable: "yes",
    appleMobileWebAppStatusBarStyle: "black",
    iconPaths: {
      maskicon: null,
      favicon32: "./favicon32.png",
      favicon16: "./favicon16.png",
      appleTouchIcon: null,
      msTileImage: null,
    },
    // configure the workbox plugin
    workboxPluginMode: "GenerateSW",
  },
};

Check out LinusBorg answers to this issue.

This is also a good Vue PWA Guide.

Answer 2

@vue/cli-plugin-pwa plugin internally uses webpack's workbox plugin. The color #4DBA87 you are getting is the default color set by the plugin. You can read more about this plugin configuration here, https://www.npmjs.com/package/@vue/cli-plugin-pwa

To configure it to your liking via package.json you have to put your configurations inside the vue property. eg:

"vue": {
  "pwa": {
    "name": "Poolio",
    "themeColor": "#205c94",
    "msTileColor": "#205c94",
    "appleMobileWebAppCapable": "yes",
    "appleMobileWebAppStatusBarStyle": "#205c94",
    "iconPaths": {
      "favicon32": "./img/icons/favicon-32x32.png",
      "favicon16": "./img/icons/favicon-16x16.png",
      "favicon96": "./img/icons/favicon-96x96.png",
      "appleTouchIcon": "./img/icons/apple-icon-152x152.png",
      "msTitleImage": "./img/icons/ms-icon-144x144.png"
    },
    "workboxPluginMode": "InjectManifest",
    "workboxOptions": {
      "swSrc": "src/service-worker.js",
    },
  }
}