Added service worker regisration refresh BOD-73

client/src/App/App.container.jsx

@@ -1,4 +1,6 @@
 import { ApolloProvider } from "@apollo/react-common";
+import { ConfigProvider } from "antd";
+import enLocale from "antd/es/locale/en_US";
 import { ApolloLink } from "apollo-boost";
 import { InMemoryCache } from "apollo-cache-inmemory";
 import ApolloClient from "apollo-client";
@@ -9,16 +11,15 @@ import apolloLogger from "apollo-link-logger";
 import { RetryLink } from "apollo-link-retry";
 import { WebSocketLink } from "apollo-link-ws";
 import { getMainDefinition } from "apollo-utilities";
+import axios from "axios";
 import LogRocket from "logrocket";
+import moment from "moment";
 import React from "react";
 import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
 import { auth } from "../firebase/firebase.utils";
 import errorLink from "../graphql/apollo-error-handling";
 import App from "./App";
-import { ConfigProvider } from "antd";
-import enLocale from "antd/es/locale/en_US";
-import moment from "moment";
-import axios from "axios";
+import RegisterServiceWorker from "./registerServiceWorker.component";
 
 moment.locale("en-US");
 
@@ -151,6 +152,7 @@ export default function AppContainer() {
         locale={enLocale}
       >
         <GlobalLoadingBar />
+        <RegisterServiceWorker />
         <App />
       </ConfigProvider>
     </ApolloProvider>

client/src/App/registerServiceWorker.component.jsx

@@ -0,0 +1,48 @@
+import { AlertOutlined } from "@ant-design/icons";
+import { Button, notification } from "antd";
+import i18n from "i18next";
+import React, { useEffect } from "react";
+import * as serviceWorker from "../serviceWorker";
+
+export default function RegisterServiceWorker() {
+  useEffect(() => {
+    console.log("SWR Use Effect Fired.");
+    const onServiceWorkerUpdate = (registration) => {
+      console.log("onServiceWorkerUpdate", registration);
+
+      const key = `open${Date.now()}`;
+      const btn = (
+        <Button
+          type="primary"
+          onClick={async () => {
+            if (registration && registration.waiting) {
+              await registration.unregister();
+              // Makes Workbox call skipWaiting()
+              registration.waiting.postMessage({ type: "SKIP_WAITING" });
+              // Once the service worker is unregistered, we can reload the page to let
+              // the browser download a fresh copy of our app (invalidating the cache)
+              window.location.reload();
+            }
+          }}
+        >
+          {i18n.t("general.actions.refresh")}
+        </Button>
+      );
+      notification.open({
+        icon: <AlertOutlined />,
+        message: i18n.t("general.messages.newversiontitle"),
+        description: i18n.t("general.messages.newversionmessage"),
+        duration: 0,
+        btn,
+        key,
+      });
+    };
+
+    if (process.env.NODE_ENV === "production") {
+      console.log("SWR Registering SW...");
+      serviceWorker.register({ onUpdate: onServiceWorkerUpdate });
+    }
+  }, []);
+
+  return <div style={{ display: "none" }}>Service Worker Registration.</div>;
+}