Skip to content

Commit 5f656f8

Browse files
github0013wardpeet
authored andcommitted
feat(gatsby-plugin-manifest): add cache busting to icon url (#8343)
* change cacheId generation only when the icon file is available * fix linter yarn lint:js --fix * update peerDependencies * change to createContentDigest * use fs-extra for consistency * feat: add cache busting used internal digest generator till the global one is available converted the node api to use ASYNC await to simplify new code added cache busting to favicon, manifest, and legacy head links * test: add tests for cache busting * Docs: added docs for cache busting to gatsby-plugin-manifest * test: fix createContentDigest test failing * fix: generateIcons not called when cache busting disabled * test: add tests to confirm icons are being generated, or not as they're suppose to be. * fix peer dep * cleanup code * clenaup tests * fix windows test
1 parent 72ec7ce commit 5f656f8

File tree

10 files changed

+443
-200
lines changed

10 files changed

+443
-200
lines changed

packages/gatsby-plugin-manifest/README.md

+49-8
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ There are three modes in which icon generation can function: automatic, hybrid,
3535

3636
In the automatic mode, you are responsible for defining the entire web app manifest except for the icons portion. You only provide a high resolution source icon. The icons themselves and the needed config will be generated at build time. See the example `gatsby-config.js` below:
3737

38-
```javascript:title=gatsby-config.js
38+
```js
39+
// in gatsby-config.js
3940
module.exports = {
4041
plugins: [
4142
{
@@ -110,7 +111,8 @@ The automatic mode is the easiest option for most people.
110111

111112
However, if you want to include more or fewer sizes, then the hybrid option is for you. Like automatic mode, you should include a high resolution icon to generate smaller icons from. But unlike automatic mode, you provide the `icons` array config and icons are generated based on the sizes defined in your config. Here's an example `gatsby-config.js`:
112113

113-
```javascript:title=gatsby-config.js
114+
```js
115+
// in gatsby-config.js
114116
module.exports = {
115117
plugins: [
116118
{
@@ -149,7 +151,8 @@ The hybrid option allows the most flexibility while still not requiring you to c
149151

150152
In the manual mode, you are responsible for defining the entire web app manifest and providing the defined icons in the static directory. Only icons you provide will be available. There is no automatic resizing done for you. See the example `gatsby-config.js` below:
151153

152-
```javascript:title=gatsby-config.js
154+
```js
155+
// in gatsby-config.js
153156
module.exports = {
154157
plugins: [
155158
{
@@ -189,7 +192,8 @@ module.exports = {
189192

190193
iOS 11.3 added support for service workers but not the complete webmanifest spec. Therefore iOS won't recognize the icons defined in the webmanifest and the creation of `apple-touch-icon` links in `<head>` is needed. This plugin creates them by default. If you don't want those icons to be generated you can set the `legacy` option to `false` in plugin configuration:
191194

192-
```javascript:title=gatsby-config.js
195+
```js
196+
// in gatsby-config.js
193197
module.exports = {
194198
plugins: [
195199
{
@@ -213,7 +217,8 @@ module.exports = {
213217

214218
By default `gatsby-plugin-manifest` inserts `<meta content={theme_color} name="theme-color" />` tag to html output. This can be problematic if you want to programatically control that tag - for example when implementing light/dark themes in your project. You can set `theme_color_in_head` plugin option to `false` to opt-out of this behavior.
215219

216-
```javascript:title=gatsby-config.js
220+
```js
221+
// in gatsby-config.js
217222
module.exports = {
218223
plugins: [
219224
{
@@ -237,7 +242,8 @@ module.exports = {
237242

238243
Excludes `<link rel="shortcut icon" href="/favicon.png" />` link tag to html output. You can set `include_favicon` plugin option to `false` to opt-out of this behaviour.
239244

240-
```javascript:title=gatsby-config.js
245+
```js
246+
// in gatsby-config.js
241247
module.exports = {
242248
plugins: [
243249
{
@@ -250,14 +256,48 @@ module.exports = {
250256
theme_color: `#a2466c`,
251257
display: `standalone`,
252258
icon: `src/images/icon.png`, // This path is relative to the root of the site.
253-
theme_color_in_head: false, // This will avoid adding theme-color meta tag.
254259
include_favicon: false, // This will exclude favicon link tag
255260
},
256261
},
257262
],
258263
}
259264
```
260265

266+
## Disabling or changing "[Cache Busting](https://www.keycdn.com/support/what-is-cache-busting)" Mode
267+
268+
Cache Busting allows your updated icon to be quickly/easily visible to your sites visitors. HTTP caches could otherwise keep an old Icon around for days and weeks. Cache busting is only done in 'automatic' and 'hybrid' modes.
269+
270+
Cache busting works by calculating a unique "digest" or "hash" of the provided icon and modifying links and file names of generated images with that unique digest. If you ever update your icon, the digest will change and caches will be busted.
271+
272+
**Options:**
273+
274+
- **\`query\`** - This is the default mode. File names are unmodified but a URL query is appended to all links. e.g. `icons/icon-48x48.png?digest=abc123`
275+
276+
- **\`name\`** - Changes the cache busting mode to be done by file name. File names and links are modified with the icon digest. e.g. `icons/icon-48x48-abc123.png` (only needed if your CDN does not support URL query based cache busting)
277+
278+
- **\`none\`** - Disables cache busting. File names and links remain unmodified.
279+
280+
```js
281+
// in gatsby-config.js
282+
module.exports = {
283+
plugins: [
284+
{
285+
resolve: `gatsby-plugin-manifest`,
286+
options: {
287+
name: `GatsbyJS`,
288+
short_name: `GatsbyJS`,
289+
start_url: `/`,
290+
background_color: `#f7f0eb`,
291+
theme_color: `#a2466c`,
292+
display: `standalone`,
293+
icon: `src/images/icon.png`, // This path is relative to the root of the site.
294+
cache_busting_mode: `none`, // `none`, `name` or `query`
295+
},
296+
},
297+
],
298+
}
299+
```
300+
261301
## Enable CORS using `crossorigin` attribute
262302

263303
Add a `crossorigin` attribute to the manifest `<link rel="manifest" crossorigin="use-credentials" href="/manifest.webmanifest" />` link tag.
@@ -268,7 +308,8 @@ You can find more information about `crossorigin` on MDN.
268308

269309
[https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes)
270310

271-
```javascript:title=gatsby-config.js
311+
```js
312+
// in gatsby-config.js
272313
module.exports = {
273314
plugins: [
274315
{

packages/gatsby-plugin-manifest/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"license": "MIT",
3131
"main": "index.js",
3232
"peerDependencies": {
33-
"gatsby": "^2.0.0"
33+
"gatsby": "^2.0.15"
3434
},
3535
"repository": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-manifest",
3636
"scripts": {
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`Test plugin manifest options correctly works with default parameters 1`] = `"{\\"name\\":\\"GatsbyJS\\",\\"short_name\\":\\"GatsbyJS\\",\\"start_url\\":\\"/\\",\\"background_color\\":\\"#f7f0eb\\",\\"theme_color\\":\\"#a2466c\\",\\"display\\":\\"standalone\\",\\"icons\\":[{\\"src\\":\\"icons/icon-48x48.png\\",\\"sizes\\":\\"48x48\\",\\"type\\":\\"image/png\\"},{\\"src\\":\\"icons/icon-72x72.png\\",\\"sizes\\":\\"72x72\\",\\"type\\":\\"image/png\\"},{\\"src\\":\\"icons/icon-96x96.png\\",\\"sizes\\":\\"96x96\\",\\"type\\":\\"image/png\\"},{\\"src\\":\\"icons/icon-144x144.png\\",\\"sizes\\":\\"144x144\\",\\"type\\":\\"image/png\\"},{\\"src\\":\\"icons/icon-192x192.png\\",\\"sizes\\":\\"192x192\\",\\"type\\":\\"image/png\\"},{\\"src\\":\\"icons/icon-256x256.png\\",\\"sizes\\":\\"256x256\\",\\"type\\":\\"image/png\\"},{\\"src\\":\\"icons/icon-384x384.png\\",\\"sizes\\":\\"384x384\\",\\"type\\":\\"image/png\\"},{\\"src\\":\\"icons/icon-512x512.png\\",\\"sizes\\":\\"512x512\\",\\"type\\":\\"image/png\\"}]}"`;
4-
5-
exports[`Test plugin manifest options fails on non existing icon 1`] = `"icon (non/existing/path) does not exist as defined in gatsby-config.js. Make sure the file exists relative to the root of the site."`;

0 commit comments

Comments
 (0)