[gatsby-plugin-offline]: Wrong default caching strategy for page-data

[nibtime]

Description

I had some weird, apparently random rendering issues after I renamed some fields in a GraphQL page query. On the initial load, UI components were displayed with empty texts, whenever they were sourced from updated page query data. After a reload, the page appeared correctly.

I do believe it's a service worker caching issue and I think this piece of configuration is the source of the problem:

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

Lines 142 to 144 in f14c99b

	// page-data.json files are not content hashed
	urlPattern: /^https?:.*\page-data\/.*\/page-data\.json/,
	handler: `StaleWhileRevalidate`,

I think it should be NetworkFirst since StaleWhileRevalidate creates the possibility that changed code that expects an updated page query structure can potentially run on temporarily served, outdated page-data.json

The official plugin documentation states, that it is NetworkFirst by default, but in code, it is not. I will send a PR if this is approved.

Steps to reproduce

Make breaking structural changes in a GraphQL page query like renaming frontmatter fields in markdown and update the page query (after the site has been deployed and cached before). Make use of the updated query result in UI components of the page/template.

Expected result

Texts of UI components that are sourced from the updated query structure should be displayed since the initial load.

Actual result

Texts of UI components that are sourced from the updated query structure were empty on the initial load. They were displayed on subsequent loads.

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 gatsby | grep -v deduped

├─ babel-preset-gatsby@0.4.1
│  └─ gatsby-core-utils@^1.2.1
│  ├─ gatsby-image@^2.4.1
│  ├─ gatsby-plugin-env-variables@^1.0.1
│  ├─ gatsby-plugin-manifest@^2.2.41
│  ├─ gatsby-plugin-nprogress@^2.1.19
│  ├─ gatsby-plugin-offline@^3.0.35
│  ├─ gatsby-plugin-preact@^3.1.26
│  ├─ gatsby-plugin-preload-fonts@^1.0.27
│  ├─ gatsby-plugin-purgecss@^4.0.0
│  ├─ gatsby-plugin-react-helmet@^3.0.4
│  ├─ gatsby-plugin-sass@^2.0.7
│  ├─ gatsby-plugin-sharp@^2.2.9
│  ├─ gatsby-plugin-tinacms@~0.1.37
│  ├─ gatsby-plugin-tslint@^0.0.2
│  ├─ gatsby-plugin-typegen@^2.2.0
│  ├─ gatsby-plugin-typescript@^2.1.5
│  ├─ gatsby-plugin-webpack-bundle-analyser-v2@^1.1.8
│  ├─ gatsby-remark-copy-linked-files@^2.0.7
│  ├─ gatsby-remark-images@^3.1.6
│  ├─ gatsby-remark-relative-images@^0.2.1
│  ├─ gatsby-source-filesystem@^2.0.26
│  ├─ gatsby-source-stripe@^3.0.4
│  ├─ gatsby-tinacms-git@~0.4.11
│  ├─ gatsby-tinacms-json@~0.8.22
│  ├─ gatsby-tinacms-remark@~0.7.18
│  ├─ gatsby-transformer-json@^2.2.25
│  ├─ gatsby-transformer-remark@^2.6.9
│  ├─ gatsby-transformer-sharp@^2.1.9
│  ├─ gatsby@2.21.13
├─ gatsby-cli@2.12.11
│  ├─ gatsby-core-utils@^1.2.1
│  ├─ gatsby-recipes@^0.1.11
│  ├─ gatsby-telemetry@^1.3.2
├─ gatsby-core-utils@1.2.1
├─ gatsby-graphiql-explorer@0.4.1
├─ gatsby-image@2.4.2
├─ gatsby-link@2.4.1
├─ gatsby-page-utils@0.2.1
│  ├─ gatsby-core-utils@^1.2.1
├─ gatsby-plugin-env-variables@1.0.2
├─ gatsby-plugin-manifest@2.4.2
│  ├─ gatsby-core-utils@^1.2.1
├─ gatsby-plugin-nprogress@2.3.1
├─ gatsby-plugin-offline@3.2.1
│  ├─ gatsby-core-utils@^1.2.1
├─ gatsby-plugin-page-creator@2.3.1
│  ├─ gatsby-page-utils@^0.2.1
├─ gatsby-plugin-preact@3.3.1
├─ gatsby-plugin-preload-fonts@1.2.1
│  ├─ gatsby-core-utils@^1.2.1
├─ gatsby-plugin-purgecss@4.0.1
├─ gatsby-plugin-react-helmet@3.3.1
├─ gatsby-plugin-sass@2.3.1
├─ gatsby-plugin-sharp@2.6.1
│  ├─ gatsby-core-utils@^1.2.1
├─ gatsby-plugin-tinacms@0.1.37
├─ gatsby-plugin-tslint@0.0.2
├─ gatsby-plugin-typegen@2.2.0
├─ gatsby-plugin-typescript@2.4.2
├─ gatsby-plugin-webpack-bundle-analyser-v2@1.1.9
├─ gatsby-react-router-scroll@2.3.1
├─ gatsby-recipes@0.1.11
│  ├─ babel-preset-gatsby@^0.4.1
│  ├─ gatsby-core-utils@^1.2.1
│  ├─ gatsby-telemetry@^1.3.2
├─ gatsby-remark-copy-linked-files@2.3.2
├─ gatsby-remark-images@3.3.1
│  ├─ gatsby-core-utils@^1.2.1
├─ gatsby-remark-relative-images@0.2.3
├─ gatsby-source-filesystem@2.3.1
│  ├─ gatsby-core-utils@^1.2.1
├─ gatsby-source-stripe@3.0.7
│  ├─ gatsby-source-filesystem@2.1.55
│  ├─ gatsby-source-filesystem@2.1.55
│  │  ├─ gatsby-core-utils@^1.0.33
├─ gatsby-telemetry@1.3.2
│  ├─ gatsby-core-utils@^1.2.1
├─ gatsby-tinacms-git@0.4.11
├─ gatsby-tinacms-json@0.8.22
├─ gatsby-tinacms-remark@0.7.18
├─ gatsby-transformer-json@2.4.1
├─ gatsby-transformer-remark@2.8.7
│  ├─ gatsby-core-utils@^1.2.1
├─ gatsby-transformer-sharp@2.5.1
├─ gatsby@2.21.13
│  ├─ babel-preset-gatsby@^0.4.1
│  ├─ gatsby-cli@^2.12.10
│  ├─ gatsby-core-utils@^1.2.1
│  ├─ gatsby-graphiql-explorer@^0.4.1
│  ├─ gatsby-link@^2.4.1
│  ├─ gatsby-plugin-page-creator@^2.3.1
│  ├─ gatsby-plugin-typescript@^2.4.2
│  ├─ gatsby-react-router-scroll@^2.3.1
│  ├─ gatsby-telemetry@^1.3.2

[21c-HK]

This issue is not fixed despite the commit and merge, because only NetworkFirst actually fixes the reported bug. You would notice this if you tried to reproduce it.

[21c-HK]

I clicked on a link to https://www.gatsbyjs.org/ today, which showed a blank (black) page. So there you have it. This bug even shows up on your own web site.

[LiamDotPro]

This is still an issue for us.

[axe312ger]

@LiamDotPro I THINK I experienced it as well in my projects. As my hoster has wonderful caching, I decided to just remove the whole plugin. This popup with "there is new content, reload the page" was more confusing to users als helping.

Not saying that I fixed the issue, but removing the plugin helped a lot to avoid dead ends on recurring visitors!