Service worker

[rosemcc]

This PR adds PWA functionality to the ResearchHub, using the Angular service worker. A service worker is a script that runs in the web browser and manages caching for an application, by acting as a network proxy. Using a service worker to reduce dependency on the network can significantly improve reliability and performance of the app. In addition to caching improvements, having the app configured as a PWA also allows it to be installable on the user's device/platform, which can increase user engagement.

Service workers are supported in the latest versions of Chrome, Firefox, Edge, Safari, Opera, UC Browser (Android version) and Samsung Internet. IE and Opera Mini do not support service workers. Where service workers are not supported, the app will still run as normal, but without the added benefits of a service worker.

Proposed Changes

• Addition of the following files to support service worker and PWA functionality:

  • ngsw-config.json - Angular service worker configuration. This file specifies the caching behaviours of the service worker including which file types and external resources to cache, and the install mode and update mode to use for different resources. It also configures caching policies for data (API) requests. We specify a policy for the graphql service with the 'freshness' strategy which means the service worker will preferentially fetch requested data from the network. Only if the network times out, (according to 'timeout' setting), does the request fall back to the cache. This makes sense for our purposes, as the app content could be updated at any time, so we ensure that the data displayed is always up to date with the CMS.
  • manifest.webmanifest - Web app manifest which configures the app name, theme color, preferred display settings, scope and start url, and specifies the location of app icons. This is the file which enables the app to be installed on a users device.
  • assets/icons - Series of app icons used for display on notifications and app installations, with different sizes to accommodate different devices/OS.

• Updated app.module.ts to register and enable the service worker script, and added a bypass for 504 (gateway timeout) errors so that the service worker can attempt to serve cached files if there is a problem with the network connection (enable offline functionality of the app)

• Updated angular.json to include the app manifest in the build

• App manifest link and app theme color is added to index.html

• Updated README

• Added script to run the app in prod mode to enable testing service worker functionality locally (npm start:prod)

• Update cloudfront secure-headers lambda function to include the app manifest, and modifications to connect-src policy for service worker requests (more info).

• Added sw-updates.service.ts - manages updates to the app and user notifications, and handles error states, using the SwUpdate class.

• Users are notified when a new version of the app is ready to install. The notification is an Angular Material snackbar

Additional changes/fixes

• Cleaned up codeCoverageExclude array in angular.json
• Fixed the 'about' link on the footer and fixed the unit test
• Removed many unused Material modules from app.material.module.ts

[Trombach]

This comment is pretty much just an FYI.

One minor issue we probably don't have to address can be viewed in the chrome dev tools under Application > Manifest

This is related to how a PWA is installable and certain platforms allow you to change the shape of the app launch icon. For those cases the provided icons have to be maskable https://web.dev/maskable-icon/

Given that the install-ability of the hub is only a side effect of this PR, it's not something we have to address. However, if someone decides to install the app there is a (low) chance that the icon will not look quite right.

Edit: Here is an example from installing the web app on an android phone that illustrates the issue:

[Trombach]

LGTM! Just some comments and one fix for the sw-update unit test.

Really cool stuff in here. The app looks awesome when installed and the update notification came through instantly. Nice work!