Manifest vs head icons in the Vue CLI PWA Plugin

#vue #pwa #icons #webdev

A couple of weeks ago I opened a PR to update the documentation of the Vue CLI, specifically the PWA plugin. Even though the PR has been merged, the CLI docs still don't have the update so I figured I'd post it here also. Just incase anyone else is running into the same issue I was.

What was the issue?

Issue #4069 & Issue #5407

Mostly, the PWA icon options are not clearly explained in docs. When you navigate to the PWA plugin docs the only icons mentioned under the configuration specifically target the icons in the head:

pwa.iconPaths

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

The instructions state to Change these values to use different paths for your icons.

That's all well and good but as I said, changing these defaults will only change the path of the links in the head of you HTML doc, not the icons in the manifest.

As it turns out, those icon paths default to:

[
  {
    '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'
  }
]

This is not mentioned in the docs. Neither is where to make updates or changes to the above defaults. The docs do list a pwa.manifestOptions section in the configuration but the only defaults/options listed are:

name: pwa.name
short_name: pwa.name
start_url: '.'
display: 'standalone'
theme_color: pwa.themeColor

So what's the fix?

After some digging I found a 6th option for pwa.manifestOptions, icons, which uses the defaults I lists above. Passing in a similarly formatted array of icons will update the icons in your manifest.

Hopefully, the PR they merged in will get released soon (it's already listed in their CHANGELOG) and this post will be moot, but for now maybe this will help someone else out.

Let me know if you've found anything else about the Vue CLI that isn't (or is poorly) in the doc.