Manifest default 'theme_color' gets injected as duplicate meta 'theme-color'

[toniengelhardt]

The default for theme_color in the manifest is set to #000000. This gets somehow injected as a duplicate theme-color meta tag in the header and overrides the normal theme-color from meta. You can see this, when adding this in nuxt.config.ts:

app: {
  head: {
    meta: [
      { name: 'theme-color', content: '#FFFFFF' },
    }
  }
}

and opening the app in Chrome mobile. The theme will be black.

Here's the HTML output:

A note on setting meta tags automatically from manifest... I think that is not a good idea at all, or at least they should not override existing meta tags because the meta tags can be controlled dynamically in the code whereas manifest can not.

In my app for instance, I want to set the theme-color dynamically from the theme the app uses, which works perfectly if they are set and updated as meta tags in Nuxt 2.

Demo: https://pwa.journalisticapp.com

[kevinmarrec]

@toniengelhardt Well if there's no automatic meta tags, if user does not set it dynamically in their code, it would miss many required tags for PWA. I'd vote for the possibility to opt-out each automatic meta tag, to prevent any duplicated tag and have full control.

I think we should be able to pass false to any property under pwa.meta.

It's already the case for many properties (one example is mobileApp property), but for theme_color, it fallback to pwa.manifest value, and as of its TypeScript type, boolean is not accepted.

Here are the current types for each property :

nuxt-pwa-module/src/parts/meta/types.ts

Lines 1 to 21 in bdd4b4f

	export interface MetaOptions {
	name: string
	author: string
	description: string
	favicon: boolean
	mobileApp: boolean
	mobileAppIOS: boolean
	appleStatusBarStyle: boolean
	theme_color: string | undefined
	lang: string
	ogType: string
	ogSiteName: boolean | string
	ogTitle: boolean | string
	ogDescription: boolean | string
	ogImage: boolean | string | { path: string; width?: number; height?: number; type?: string }
	ogHost: string | undefined
	ogUrl: boolean | string
	twitterCard: string | undefined
	twitterSite: string | undefined
	twitterCreator: string | undefined
	}

I should enhance them to make them all able to be either boolean | {currentType} or just false | {currentType}.

[toniengelhardt]

Sounds good!