fix: remove service-worker caching for index (WHITE SCREEN OF DEATH 🔥👻)

[thisislawatts]

PR Checklist

• [X] - Commit messages are descriptive, it will be used in our Release Notes
• [x] - Latest master branch merged

PR Type

• [X] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)
• [ ] Developer experience (improves developer workflows for contributing to the project)

Description

The Problem

Regular visitors to the site are intermittently presented with a blank screen. This is because the primary JS/CSS bundles have failed to load.

Proposed Workaround

The service worker should not cache the index.html page as this is the entry point to our service which contains the manifest for which JS files to load.

After each deployment, the old JS files are removed from the server. As a result the index.html loaded from cache by the service worker can include references to JS files which no longer exist.

Q. How can I verify that a stale HTML file was the root cause? A. I checked the REACT_APP_PROJECT_VERSION variable injected during build time and observed that the sha 0a2475d054a016d5ed3642c6abc299978c9ace12 was several deployments behind the head when compared with GitHub.

[thisislawatts]

@chrismclarke I welcome your perspective here! I am still young in the ways of Service Worker(TM). To demonstrate my point I have broken all of the tests. 🤔

[cypress[bot]]

---

Test summary

10 • 35 • 0 • 4 • 1

---

Run details

Project	onearmy-community-platform
Status	Failed
Commit	19c5b3c0c1
Started	May 19, 2022 7:01 PM
Ended	May 19, 2022 7:04 PM
Duration	02:24 💡
OS	Linux Ubuntu - 20.04
Browser	Chrome 101

View run in Cypress Dashboard ➡️

---

Failures

	notifications.spec.ts		8
1	[Notifications] > [are not generated when the howTo author is triggering notification]
2	[Notifications] > [are generated by clicking on useful for how-tos]
3	[Notifications] > [are generated by clicking on useful for research]
4	[Notifications] > [are generated by adding comments]
5	[Notifications] > [are generated by adding comments to research]
6	[Notifications] > [appear in notifications modal]
7	[Notifications] > [notifications modal is closed when clicking on the notifications icon for the second time or clicking on the header]
8	[Notifications] > [are marked read when clicking on clear button]
	howto/write.spec.ts		2
1	[How To] > [Create a how-to] > [By Authenticated]
2	[How To] > [Create a how-to] > [Warning on leaving page]
This comment includes only the first 10 test failures. See all 35 failures in the Cypress Dashboard.

---

Flakiness

	src/integration/profile.spec.ts		1
1	[Profile] > [By Anonymous] > [Can view public profile]

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[chrismclarke]

Haha, yeah I might need to revisit this one next week. It's a perennial issue, I've been forever subscribed to the thread https://github.com/facebook/create-react-app/issues/5316 and saw a couple new posts over the weekend with some more ideas.

My other thought would be to look at including a specific within the error boundary (although not sure if the error boundary would load if main chunk failing...)

[thisislawatts]

That would be great @chrismclarke, it would be great to see away with this screen of doom.

[thisislawatts]

This issue is still affecting the platform, but closing due to lack of interest. Perhaps better represented as an Issue.

[davehakkens]

Sounded interesting! But I do think we got the "Report Feedback" page more often, as a comment from users.