feat(gatsby-plugin-manifest): add cache busting to icon url

[github0013]

Browsers cache favicons, and it's hard to update them without a random parameter in the favicon link.

[KyleAMathews]

Instead of a random id which will change on every build. How about instead we use an id derived from the content digest of the icon file which will stay consistent across builds.

[pieh]

Just 2 things:

• There is conflict right now that need to be resolved
• This function will be called for each page so we would want to cache cacheId first time we calc it to not read file and generate it everytime

[github0013]

Let me know if this works.
b29b46e

[DSchau]

@github0013 looks like the linter is failing! Easiest way to get these passing is to run yarn lint:js --fix or npm run lint:js -- --fix

[DSchau]

I'll take a look at this first thing tomorrow; sorry for the delay!

[DSchau]

This looks good. Left two comments/questions!

[wardpeet]

@github0013 any chance you can pursuit this one? 👍 it's a great feature to have.

[moonmeister]

@pieh @jlengstorf @DSchau @github0013 I'd like to get this merged, i and others seem interested in solving this problem. I'm currently seeing a couple outstanding issues on this PR.

• Tests Are failing
• Linting Is failing
• createContentDigest isn't available on the SSR API
• This PR currently only fixes the favicon. What about the manifest and apple icons?

Tests and linting I can handle.

I see there is discussion above concerning making createContentDigest more widely available, as that has not been done I'm inclined to roll this back to using crypto. Thoughts?

Finally, how do we solve adding the digest to all image references? My inclination is to modify the name of the actual files icon-48x48.{{YourDigestHere}}.png... or can we safely add the query string even in the manifest? If either method is valid, does one or the other have any benefit (simplicity, better cross browser cache busting support, etc)?

Thanks folks!

[wardpeet]

@moonmeister thanks, feel free to fix the tests if you like. (unsure if you can edit this PR 😛). Cachebusting is fine with querystrings. There is no real benefit about any of them. The downside to querystring busting is that some CDN providers give you the option to omit the querystring as part of the cachekey. Perhaps it's a good idea to do add an option to create a filename 🙊 . [name].[hash].[ext]

I can take care of the utils part

[moonmeister]

@wardpeet I was able to pull the branch just fine, haven't tried pushing yet but guessing it'll work. Yeah, this probably needs to be behind a flag anyway (even if it's on by default), I can have options for [none, query, name] and the code changes how it does cache busting accordingly. This shouldn't be too hard and I have time. If you get the utils done before me then awesome, otherwise I'll just use an internal util in commons and this can be migrated later once the Gatsby util is available.

[moonmeister]

Looks like I have some rebasing and might need to revert my move to async/await to be node 6 compatible. And then I need to write tests.

[pieh]

@moonmeister async/await is fine - we run babel on source files when packaging for release so resulting code will be node6 compatible

[moonmeister]

@pieh All ready for review and merge!

[moonmeister]

Should be good now @pieh

[wardpeet]

Look good to me, I fixed merge conflicts and cleaned it up a little bit.

Thank you for your patience! 🙏

[gatsbot]

Holy buckets, @github0013 — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

1. We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. (Currently we’ve got a couple t-shirts available, plus some socks that are really razzing our berries right now.)
2. We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. Accept the invite by visiting https://github.com/orgs/gatsbyjs/invitation. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!