Old code displayed on initial load

[severinbeauvais]

Describe the bug
As a user, when I login to Coops Dev, the web app that is initially loaded is old code. If I refresh/reload the page then the latest code is loaded... But if I logout and login again then I see the old code again.

This could be serious if we deploy a fix or new feature to production but the users intermittently see the old code instead.

To Reproduce
Steps to reproduce the behavior:

1. Go to Coops Dev
2. Login using any entity
3. Observe the header

Expected behavior
The header should have a 70px margin between it and the entity info block (ie, latest code).

Actual behavior
The header does not have a 70px margin, indicating that the previous code is being executed. This can be proven by refreshing the page (to get the latest code) and seeing the expected behavior... but this reproduces on the next login.

This reproduces in Chrome, Firefox, IE11, etc. In all browsers, the browsing data and files were deleted but the behaviour persists.

@thor found this:
https://forum.vuejs.org/t/vue-cli-3-project-with-pwa-not-busting-cache-on-new-builds/50252/7
https://redfin.engineering/how-to-fix-the-refresh-button-when-using-service-workers-a8e27af6df68

@severinbeauvais found the following to be useful:
https://bitsofco.de/the-service-worker-lifecycle/
https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle
https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa

[severinbeauvais]

This reproduced 1/2 hour ago but now, after clearing the browser files again, no longer reproduces.

I'm closing this issue instead of deleting it in case we need to reference this again.

[severinbeauvais]

I have reopened this ticket as it is currently happening for @JohnamLane and @katiemcgoff (and probably many others).

I increased the Coops UI version patch release number (ie, v1.0.1) and build/deployed to dev, but the issue is still happening.

[severinbeauvais]

It looks like the VUE PWA Plugin was missing (I deleted it recently).
For more info, see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa

---

I pushed a change (bcgov/lear#303) to restore the package and the console errors are now replaced with:
"Service worker has been registered."
"New content is downloading."
"Content has been cached for offline use."

Also, the Dev Tools -> Application -> Service Workers show a single SW WITH Status = "Activated and running".

[severinbeauvais]

For configuration, see:
https://developers.google.com/web/tools/workbox/guides/service-worker-checklist

See also ~coops-ui/dist/service.worker/js (first need to 'npm run build').

[severinbeauvais]

It looks like this is now resolved with no further configuration required.

[severinbeauvais]

TESTING NOTES

You can verify that:

1. there is no service worker error in the Dev Tools console when the app is loaded
2. there is only 1 service worker registered and it is activated and running
3. you are looking at the latest code changes (see OpenShift or talk to a Dev about what should be in latest build)
4. nothing new is broken ;)

[severinbeauvais]

There is currently a new build available, so I logged in to Dev and looked at the console. It indicated that "New content is available. Please refresh."

In my mind, this is only partly acceptable, because users will not check the Dev Console and see that they should hard-refresh the page. I will open a new ticket for this.

[severinbeauvais]

The subject issue is discussed here: https://redfin.engineering/service-workers-break-the-browsers-refresh-button-by-default-here-s-why-56f9417694