Added service worker regisration refresh BOD-73

README.MD

@@ -21,3 +21,5 @@ NGROK TEsting:
 
 Finding deadfiles - run from client directory 
 npx deadfile ./src/index.js --exclude build templates   
+
+cd client && yarn build && cd build && scp -r ** imex@prod-tor1.imex.online:~/bodyshop/client/build && cd .. &&cd ..

bodyshop_translations.babel

@@ -7498,6 +7498,48 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>newversionmessage</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>newversiontitle</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>rbacunauth</name>
                                         <definition_loaded>false</definition_loaded>

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>;
+}

client/src/index.js

@@ -2,7 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { BrowserRouter } from "react-router-dom";
 import "./translations/i18n";
-import * as serviceWorker from "./serviceWorker";
+//import * as serviceWorker from "./serviceWorker";
 import { Provider } from "react-redux";
 import { PersistGate } from "redux-persist/integration/react";
 import { store, persistor } from "./redux/store";
@@ -26,4 +26,4 @@ ReactDOM.render(
   document.getElementById("root")
 );
 
-serviceWorker.register();
+//serviceWorker.register();

client/src/serviceWorker.js

@@ -58,6 +58,16 @@ function registerValidSW(swUrl, config) {
   navigator.serviceWorker
     .register(swUrl)
     .then((registration) => {
+      // Start addition---
+      // https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#manual_updates
+      // Added code, as our application will be open for a long time and we are a SPA, we need
+      //  to trigger checks for updates frequently
+      setInterval(() => {
+        console.log("Checking if service worker was updated in server");
+        registration.update();
+      }, 15 * 60 * 1000); // Every 15 mins check
+      // End addition---
+
       registration.onupdatefound = () => {
         const installingWorker = registration.installing;
         if (installingWorker == null) {

client/src/translations/en_us/common.json

@@ -483,6 +483,8 @@
 			},
 			"messages": {
 				"exception": "$t(titles.app) has encountered an error. Please try again. If the problem persists, please submit a support ticket or contact us.",
+				"newversionmessage": "Click refresh below to update to the latest available version of ImEX Online.",
+				"newversiontitle": "New version of ImEX Online Available",
 				"rbacunauth": "You are not authorized to view this content. Please reach out to your shop manager to change your access level.",
 				"unsavedchanges": "You have unsaved changes.",
 				"unsavedchangespopup": "You have unsaved changes. Are you sure you want to leave?"

client/src/translations/es/common.json

@@ -483,6 +483,8 @@
 			},
 			"messages": {
 				"exception": "",
+				"newversionmessage": "",
+				"newversiontitle": "",
 				"rbacunauth": "",
 				"unsavedchanges": "Usted tiene cambios no guardados.",
 				"unsavedchangespopup": ""

client/src/translations/fr/common.json

@@ -483,6 +483,8 @@
 			},
 			"messages": {
 				"exception": "",
+				"newversionmessage": "",
+				"newversiontitle": "",
 				"rbacunauth": "",
 				"unsavedchanges": "Vous avez des changements non enregistrés.",
 				"unsavedchangespopup": ""