Gatsby: [gatsby-plugin-manifest] `lang` & `dir` properties get ignored after build.

[smakosh]

Description

The dir and lang properties on the options object of the gatsby-plugin-manifest don't make it through after building.

Steps to reproduce

you can check that at: https://manifest-validator.appspot.com/ on a Gatsby site with this config:

{
      resolve: `gatsby-plugin-manifest`,
      options: {
        dir: 'rtl',
        lang: 'ar',
        name: 'مرحبا',
        short_name: 'مرحبا',
        start_url: '/',
        background_color: '#eee',
        theme_color: '#eee',
        display: 'minimal-ui',
        icon: 'src/assets/images/example.png',
      },
    },

Expected result

Non technical: title of the pwa on mobile must have the same title on the code
Technical: the lang and dir properties must be on the generated manifest file

Actual result

Non technical: title gets set to the default one.
Technical: lang and dir properties don't get passed into the generated manifest file.

[DZuz14]

I'd be glad to work on a PR for this. I'll check to see if I can reproduce this.

[abumalick]

I tried to reproduce and it works well here: https://github.com/abumalick/gatsby-manifest-arabic

https://gatsby-manifest-arabic.netlify.com/manifest.webmanifest

The title of the pwa is set correctly and the dir and lang properties are there too.

[abumalick]

it seems https://manifest-validator.appspot.com/ don't parse the dir and lang tags

[abumalick]

Non technical: title of the pwa on mobile must have the same title on the code

I found out the problem, we were using both gatsby-plugin-manifest and gatsby-plugin-favicon.

We use plugin-favicon for a very long time and we missed that it makes now the same job as plugin-manifest. (I think it was not the case when we set up that plugin in gatsby v1)

So, looking at the options in https://github.com/Creatiwity/gatsby-plugin-favicon#options We can see appName: null, // Inferred with your package.json

As we didn't set this option, the plugin was adding a tag <meta name=“application-name” content=“appnameinpackagejson”> in the head. Because of that we were not able to set an arabic name.

removing gatsby-plugin-favicon fixed our problem.

Feel free to close the issue as I work on the same app than @smakosh and all is good now.

Thank you for gatsby 👍