Gatsby: Add use-credentials option to gatsby-plugin-manifest to allow cookies to be sent by Chrome

[kishba]

Summary

We're about to launch a pilot of our college's new Gatsby-generated front page. The first deployment will be controlled by an opt-in cookie that we are sharing with several on-campus volunteers. We discovered that the gatsby-plugin-manifest plugin is generating our tag to the manifest file properly, but the request from Chrome for the manifest file is sent without cookies or authentication headers by default. This means the request 404s even with our preview cookie set.

We learned about this Chrome restriction from this GitHub comment:
https://github.com/w3c/manifest/issues/535#issuecomment-265338307

Basic example

We envision a configuration flag like this:

    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        /* Existing options */
        use_credentials: true
      },
    },

That would result in a link tag like this:

<link rel="manifest" href="/manifest.webmanifest" crossOrigin="use-credentials" />

Motivation

We'd like a visitor's cookies to be sent with the manifest file request by all browsers, including Chrome. We aren't using authentication, but if a PWA did rely on authentication, we imagine this would be a helpful feature, too.

Admittedly, we don't think many people would need this, and we'd probably remove it after we launch the site officially, so the default behavior should continue to be to exclude the crossOrigin/use-credentials attribute.

All this being said, it is possible for us to manually direct the request to the correct backend node in our load balancer. We understand if this issue is ultimately closed without implementation, but hopefully future Gatsby developers will see this issue and understand what's happening with Chrome. :)

[wardpeet]

what do you think by making it even more open so if somehow the spec changes we don't have to add anything.

{
      resolve: `gatsby-plugin-manifest`,
      options: {
        /* Existing options */
        // default crossOrigin: `anonymous`
        crossOrigin: `use-credentials`
      },
    },

it would be awesome if you could create a PR for it! :rocket:
The code is here:
https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-manifest/src/gatsby-ssr.js#L35-L38

[yogeshkotadiya]

Can I take this one?

[kishba]

@wardpeet I like the idea of being able to specify the value instead!

I don't know if I can tackle this, so feel free @yogeshkotadiya ! :)

[sidharthachatterjee]

This was added by @yogeshkotadiya and published in [email protected] 🎉