[gatsby-plugin-offline]: Potential for caching problems with idb-keyval

[nibtime]

Description

I observed, that the plugin has an npm dependency to idb-keyval and copies idb-keyval-iife.min.js from the node_modules folder into the public folder in onPostBuild:

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

Lines 163 to 166 in f8b7317

	const idbKeyvalFile = `idb-keyval-iife.min.js`
	const idbKeyvalSource = require.resolve(`idb-keyval/dist/${idbKeyvalFile}`)
	const idbKeyvalDest = `public/${idbKeyvalFile}`
	fs.createReadStream(idbKeyvalSource).pipe(fs.createWriteStream(idbKeyvalDest))

The official caching recommendations are oblivious of that file and it would be cached with cache-control: public, max-age=31536000, immutable.

Furthermore, the plugin itself will cache the file with the CacheFirst strategy by default:

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

Lines 135 to 140 in f8b7317

	{
	// Use cacheFirst since these don't need to be revalidated (same RegExp
	// and same reason as above)
	urlPattern: /(\.js$|\.css$|static\/)/,
	handler: `CacheFirst`,
	},

This is based on the assumption that all .css and .js files are fingerprinted, yet idb-keyval-iife.min.js is not.

If a future version of the plugin decides to use another version of idb-keyval this will become a problem since clients will not receive the update of the new version of idb-keyval because it is cached as immutable.

Idea for a fix

Read the version of idb-keyval from package.json in node_modules/idb-keyval and include it in the filename. Instead of calling importScripts with a literal file name in sw-append.js, it could be prepended here with the filename that includes the version:

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

Lines 184 to 187 in f8b7317

	const swAppend = fs
	.readFileSync(`${__dirname}/sw-append.js`, `utf8`)
	.replace(/%pathPrefix%/g, pathPrefix)
	.replace(/%appFile%/g, appFile)

This solves the problem without the need to alter any existing caching configurations. I can send a PR if this is wanted.

Environment

gatsby info --clipboard

 System:
   OS: Linux 4.19 Debian GNU/Linux 10 (buster) 10 (buster)
   CPU: (8) x64 Intel(R) Core(TM) i7-6770HQ CPU @ 2.60GHz
   Shell: 5.7.1 - /usr/bin/zsh
 Binaries:
   Node: 10.20.1 - /tmp/yarn--1591893009228-0.6481271662017773/node
   Yarn: 1.22.4 - /tmp/yarn--1591893009228-0.6481271662017773/yarn
   npm: 6.14.4 - /usr/local/bin/npm
 Languages:
   Python: 2.7.16 - /usr/bin/python
 Browsers:
   Firefox: 68.8.0esr

yarn list | grep -E "(gatsby-plugin-offline|idb-keyval)" | grep -v deduped

│  ├─ gatsby-plugin-offline@^3.0.35
├─ [email protected]
│  ├─ idb-keyval@^3.2.0
├─ [email protected]