Added banner to be displayed when the service worker has updated the app in the background

src/index.tsx

@@ -5,7 +5,7 @@ import { homepage } from '../package.json';
 import container from './container';
 import store from './container/store';
 import { fixLeafletIcons } from './utils/helpers/leaflet';
-import * as serviceWorkerRegistration from './serviceWorkerRegistration';
+import { register as registerServiceWorker } from './serviceWorkerRegistration';
 import 'react-datepicker/dist/react-datepicker.css';
 import 'leaflet/dist/leaflet.css';
 import './index.scss';
@@ -13,7 +13,7 @@ import './index.scss';
 // This overwrites icons used for leaflet maps, fixing some issues caused by webpack while processing the CSS
 fixLeafletIcons();
 
-const { App, ScrollToTop, ErrorHandler } = container;
+const { App, ScrollToTop, ErrorHandler, appUpdateAvailable } = container;
 
 render(
   <Provider store={store}>
@@ -31,4 +31,8 @@ render(
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://cra.link/PWA
-serviceWorkerRegistration.register();
+registerServiceWorker({
+  onUpdate() {
+    store.dispatch(appUpdateAvailable()); // eslint-disable-line @typescript-eslint/no-unsafe-call
+  },
+});