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

packages/gatsby-plugin-manifest/package.json

@@ -30,7 +30,7 @@
   "license": "MIT",
   "main": "index.js",
   "peerDependencies": {
-    "gatsby": "^2.0.0"
+    "gatsby": ">=2.0.15"
   },
   "repository": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-manifest",
   "scripts": {

packages/gatsby-plugin-manifest/src/common.js

@@ -1,4 +1,5 @@
 const fs = require(`fs`)
+import crypto from "crypto"
 
 // default icons for generating icons
 exports.defaultIcons = [
@@ -60,3 +61,33 @@ exports.doesIconExist = function doesIconExist(srcIcon) {
     }
   }
 }
+
+exports.createContentDigest = function createContentDigest(content) {
+  let digest = crypto
+    .createHash(`sha1`)
+    .update(content)
+    .digest(`hex`)
+
+  return digest
+}
+
+/**
+ * @param {Array} path The generic path to an icon
+ * @param {String} digest The digest of the icon provided in the plugin's options.
+ */
+exports.addDigestToPath = function(path, digest, method) {
+  let newPath = ``
+
+  if (method === `name`) {
+    newPath = `${path.substring(
+      0,
+      path.lastIndexOf(`.`)
+    )}-${digest}${path.substring(path.lastIndexOf(`.`))}`
+  } else if (method === `query`) {
+    newPath = `${path}?digest=${digest}}`
+  } else {
+    newPath = path
+  }
+
+  return newPath
+}

packages/gatsby-plugin-manifest/src/gatsby-node.js

@@ -2,7 +2,7 @@ const fs = require(`fs`)
 const path = require(`path`)
 const Promise = require(`bluebird`)
 const sharp = require(`sharp`)
-const { defaultIcons, doesIconExist } = require(`./common.js`)
+const { defaultIcons, doesIconExist, addDigestToPath } = require(`./common.js`)
 
 sharp.simd(true)
 
@@ -18,48 +18,64 @@ function generateIcons(icons, srcIcon) {
   })
 }
 
-exports.onPostBootstrap = (args, pluginOptions) =>
-  new Promise((resolve, reject) => {
-    const { icon, ...manifest } = pluginOptions
+exports.onPostBootstrap = async ({ createContentDigest }, pluginOptions) => {
+  const { icon, ...manifest } = pluginOptions
 
-    // Delete options we won't pass to the manifest.webmanifest.
+  // Delete options we won't pass to the manifest.webmanifest.
 
-    delete manifest.plugins
-    delete manifest.legacy
-    delete manifest.theme_color_in_head
+  delete manifest.plugins
+  delete manifest.legacy
+  delete manifest.theme_color_in_head
+  delete manifest.cache_busting_mode
 
-    // If icons are not manually defined, use the default icon set.
-    if (!manifest.icons) {
-      manifest.icons = defaultIcons
+  // If icons are not manually defined, use the default icon set.
+  if (!manifest.icons) {
+    manifest.icons = defaultIcons
+  }
+
+  // Determine destination path for icons.
+  const iconPath = path.join(`public`, path.dirname(manifest.icons[0].src))
+
+  //create destination directory if it doesn't exist
+  if (!fs.existsSync(iconPath)) {
+    fs.mkdirSync(iconPath)
+  }
+
+  // Only auto-generate icons if a src icon is defined.
+  if (icon !== undefined) {
+    // Check if the icon exists
+    if (!doesIconExist(icon)) {
+      throw `icon (${icon}) does not exist as defined in gatsby-config.js. Make sure the file exists relative to the root of the site.`
     }
 
-    // Determine destination path for icons.
-    const iconPath = path.join(`public`, path.dirname(manifest.icons[0].src))
+    //add cache busting
+    const cacheMode =
+      typeof pluginOptions.cache_busting_mode !== `undefined`
+        ? pluginOptions.cache_busting_mode
+        : `query`
 
-    //create destination directory if it doesn't exist
-    if (!fs.existsSync(iconPath)) {
-      fs.mkdirSync(iconPath)
+    //if cacheBusting is being done via url query icons must be generated before cachebusting runs
+    if (cacheMode === `query`) {
+      await generateIcons(manifest.icons, icon)
     }
 
-    fs.writeFileSync(
-      path.join(`public`, `manifest.webmanifest`),
-      JSON.stringify(manifest)
-    )
-
-    // Only auto-generate icons if a src icon is defined.
-    if (icon !== undefined) {
-      // Check if the icon exists
-      if (!doesIconExist(icon)) {
-        reject(
-          `icon (${icon}) does not exist as defined in gatsby-config.js. Make sure the file exists relative to the root of the site.`
-        )
-      }
-      generateIcons(manifest.icons, icon).then(() => {
-        //images have been generated
-        console.log(`done generating icons for manifest`)
-        resolve()
+    if (cacheMode !== `none`) {
+      let iconDigest = createContentDigest(fs.readFileSync(icon))
+
+      manifest.icons.forEach(icon => {
+        icon.src = addDigestToPath(icon.src, iconDigest, cacheMode)
       })
-    } else {
-      resolve()
     }
-  })
+
+    //if file names are being modified by cacheBusting icons must be generated after cachebusting runs
+    if (cacheMode === `name`) {
+      await generateIcons(manifest.icons, icon)
+    }
+  }
+
+  //Write manifest
+  fs.writeFileSync(
+    path.join(`public`, `manifest.webmanifest`),
+    JSON.stringify(manifest)
+  )
+}

packages/gatsby-plugin-manifest/src/gatsby-ssr.js

@@ -1,6 +1,9 @@
 import React from "react"
 import { withPrefix } from "gatsby"
-import { defaultIcons } from "./common.js"
+import { defaultIcons, createContentDigest, addDigestToPath } from "./common.js"
+import fs from "fs-extra"
+
+let iconDigest = null
 
 exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
   // We use this to build a final array to pass as the argument to setHeadComponents at the end of onRenderBody.
@@ -10,10 +13,19 @@ exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
   const legacy =
     typeof pluginOptions.legacy !== `undefined` ? pluginOptions.legacy : true
 
-  // The user has an option to opt out of the favicon link tag being inserted into the head.
+  const cacheBusting =
+    typeof pluginOptions.cache_busting_mode !== `undefined`
+      ? pluginOptions.cache_busting_mode
+      : `query`
+
+  // If icons were generated, also add a favicon link.
   if (pluginOptions.icon) {
     let favicon = icons && icons.length ? icons[0].src : null
 
+    if (!iconDigest && cacheBusting !== `none`) {
+      iconDigest = createContentDigest(fs.readFileSync(pluginOptions.icon))
+    }
+
     const insertFaviconLinkTag =
       typeof pluginOptions.include_favicon !== `undefined`
         ? pluginOptions.include_favicon
@@ -24,7 +36,7 @@ exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
         <link
           key={`gatsby-plugin-manifest-icon-link`}
           rel="shortcut icon"
-          href={withPrefix(favicon)}
+          href={withPrefix(addDigestToPath(favicon, iconDigest, cacheBusting))}
         />
       )
     }
@@ -63,7 +75,7 @@ exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
         key={`gatsby-plugin-manifest-apple-touch-icon-${icon.sizes}`}
         rel="apple-touch-icon"
         sizes={icon.sizes}
-        href={withPrefix(`${icon.src}`)}
+        href={withPrefix(addDigestToPath(icon.src, iconDigest, cacheBusting))}
       />
     ))