You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
Copy file name to clipboardExpand all lines: packages/gatsby-plugin-manifest/README.md
+49-8
Original file line number
Diff line number
Diff line change
@@ -35,7 +35,8 @@ There are three modes in which icon generation can function: automatic, hybrid,
35
35
36
36
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:
37
37
38
-
```javascript:title=gatsby-config.js
38
+
```js
39
+
// in gatsby-config.js
39
40
module.exports= {
40
41
plugins: [
41
42
{
@@ -110,7 +111,8 @@ The automatic mode is the easiest option for most people.
110
111
111
112
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`:
112
113
113
-
```javascript:title=gatsby-config.js
114
+
```js
115
+
// in gatsby-config.js
114
116
module.exports= {
115
117
plugins: [
116
118
{
@@ -149,7 +151,8 @@ The hybrid option allows the most flexibility while still not requiring you to c
149
151
150
152
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:
151
153
152
-
```javascript:title=gatsby-config.js
154
+
```js
155
+
// in gatsby-config.js
153
156
module.exports= {
154
157
plugins: [
155
158
{
@@ -189,7 +192,8 @@ module.exports = {
189
192
190
193
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:
191
194
192
-
```javascript:title=gatsby-config.js
195
+
```js
196
+
// in gatsby-config.js
193
197
module.exports= {
194
198
plugins: [
195
199
{
@@ -213,7 +217,8 @@ module.exports = {
213
217
214
218
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.
215
219
216
-
```javascript:title=gatsby-config.js
220
+
```js
221
+
// in gatsby-config.js
217
222
module.exports= {
218
223
plugins: [
219
224
{
@@ -237,7 +242,8 @@ module.exports = {
237
242
238
243
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.
239
244
240
-
```javascript:title=gatsby-config.js
245
+
```js
246
+
// in gatsby-config.js
241
247
module.exports= {
242
248
plugins: [
243
249
{
@@ -250,14 +256,48 @@ module.exports = {
250
256
theme_color:`#a2466c`,
251
257
display:`standalone`,
252
258
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.
254
259
include_favicon:false, // This will exclude favicon link tag
255
260
},
256
261
},
257
262
],
258
263
}
259
264
```
260
265
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)
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