COOP_UI - app should auto-refresh when new content is available

[severinbeauvais]

Service Worker Auto Refresh

Description:

As per /#1148, it was found that a Service Worker module is loaded along with the Coops UI web app to cache the app (ie, for Progressive Web App usage) and to monitor for new content, etc.

However, the current behaviour when there is new content (ie, a new build has been deployed) is to display a log message in the Dev Console and that's it. Users don't look for those logs and probably won't know to hard-refresh the page in order to download the new content.

So, this feature is to:

1. investigate the full current operation of the Service Worker (ie, does it auto-refresh when the browser is closed and reopened?)
2. determine the required functionality
3. implement any new functionality

It might be nice to check hourly for content changes, and use a snackbar to alert the user (https://vuetifyjs.com/en/components/snackbars) or possibly an alert (https://www.npmjs.com/package/vue-alertify).

In my mind, this is Priority 2. (The other ticket was Priority 1 because hard-refreshing did not consistently download new content.) Currently, hard-refreshing DOES download the new content and allow the user to see the latest features and fixes.

References
https://medium.com/@dougallrich/give-users-control-over-app-updates-in-vue-cli-3-pwas-20453aedc1f2
https://medium.com/js-dojo/vuejs-pwa-cache-busting-8d09edd22a31
vuejs-templates/pwa#70
https://stackoverflow.com/questions/51214220/vue-cli-3-how-to-use-the-official-pwa-plugin-service-worker
https://stackoverflow.com/questions/52221805/any-way-yet-to-auto-update-or-just-clear-the-cache-on-a-pwa-on-ios
https://levelup.gitconnected.com/vue-pwa-example-298a8ea953c9
https://redfin.engineering/how-to-fix-the-refresh-button-when-using-service-workers-a8e27af6df68
https://developers.google.com/web/tools/workbox/modules/workbox-build#full_injectmanifest_config

Dependencies
None

Acceptance Criteria
The Coops UI web app auto-refreshes when a new build has been deployed.

Validation Rules
Not Applicable

Ready to Build (DoR):

• Stakeholders have approved
• User story completed
• What are the dependencies
• Validation rules defined (UI, Data, Role-Action)
• Is a formal UAT required

Acceptance / DoD:

• Design / Solution accepted by Product Owner
• Acceptance criteria has been defined (happy path, known sad paths)
• Test coverage acceptable
• Peer Reviewed
• Accessibility reviewed and acceptable checklist
• UX Approved
• PR Accepted
• Production burn in completed

[severinbeauvais]

I have committed some WIP changes to https://github.com/severinbeauvais/lear/tree/1225.

[severinbeauvais]

PS I confirmed that npm run build (ie, production build) assigns a new hash to Webpack chunks that have changed. For example, 'about.6b61a582.js' kept the same hash but 'app.a23384a5.js' has a new hash because I changes some app code.

[severinbeauvais]

I have to park this implementation for a while, but I have committed some Work In Progress to https://github.com/severinbeauvais/lear/commits/1225.

[forgeuxGH5]

Modal design/text here.
https://preview.uxpin.com/48014ff65d9afa0ab8ecf1b9bd14262dd3ba4fc1#/pages/119563642

I'm not sure how much control we have of the appearance of the dialog but I put this in our default modal design.

[JohnamLane]

I saw the refresh modal this morning in Dev. Is this complete?

[lmallika86]

Works in all browsers other than Edge. Edge is not fully compatible with vue pwa. Works in Edge Beta though.

[JohnamLane]

If have seen the revised modal using chrome a few times. Uncertain how else to test for now.