Gatsby: [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: https://github.com/gatsbyjs/gatsby/blob/f14c99b80b77f0d9094c1521976ec8e805aaa87f/packages/gatsby-plugin-offline/src/gatsby-node.js#L142-L144

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

</details>

<details>
  <summary>yarn list | grep gatsby | grep -v deduped</summary>

├─ [email protected]
│ └─ 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
│ ├─ [email protected]
├─ [email protected]
│ ├─ gatsby-core-utils@^1.2.1
│ ├─ gatsby-recipes@^0.1.11
│ ├─ gatsby-telemetry@^1.3.2
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
│ ├─ gatsby-core-utils@^1.2.1
├─ [email protected]
├─ [email protected]
│ ├─ gatsby-core-utils@^1.2.1
├─ [email protected]
├─ [email protected]
│ ├─ gatsby-core-utils@^1.2.1
├─ [email protected]
│ ├─ gatsby-page-utils@^0.2.1
├─ [email protected]
├─ [email protected]
│ ├─ gatsby-core-utils@^1.2.1
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
│ ├─ gatsby-core-utils@^1.2.1
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
│ ├─ babel-preset-gatsby@^0.4.1
│ ├─ gatsby-core-utils@^1.2.1
│ ├─ gatsby-telemetry@^1.3.2
├─ [email protected]
├─ [email protected]
│ ├─ gatsby-core-utils@^1.2.1
├─ [email protected]
├─ [email protected]
│ ├─ gatsby-core-utils@^1.2.1
├─ [email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ │ ├─ gatsby-core-utils@^1.0.33
├─ [email protected]
│ ├─ gatsby-core-utils@^1.2.1
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
│ ├─ gatsby-core-utils@^1.2.1
├─ [email protected]
├─ [email protected]
│ ├─ 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.