Added logic to allow refreshing the PWA without closing the tabs

src/App.tsx

@@ -5,6 +5,7 @@ import { ServersMap } from './servers/data';
 import { Settings } from './settings/reducers/settings';
 import { changeThemeInMarkup } from './utils/theme';
 import { AppUpdateBanner } from './common/AppUpdateBanner';
+import { forceUpdate } from './utils/helpers/sw';
 import './App.scss';
 
 interface AppProps {
@@ -54,7 +55,7 @@ const App = (
         </div>
       </div>
 
-      <AppUpdateBanner isOpen={appUpdated} toggle={resetAppUpdate} />
+      <AppUpdateBanner isOpen={appUpdated} toggle={resetAppUpdate} forceUpdate={forceUpdate} />
     </div>
   );
 };

src/common/AppUpdateBanner.tsx

@@ -1,16 +1,34 @@
 import { FC, MouseEventHandler } from 'react';
-import { Alert } from 'reactstrap';
+import { Alert, Button } from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSyncAlt as reloadIcon } from '@fortawesome/free-solid-svg-icons';
 import { SimpleCard } from '../utils/SimpleCard';
+import { useToggle } from '../utils/helpers/hooks';
 import './AppUpdateBanner.scss';
 
 interface AppUpdateBannerProps {
   isOpen: boolean;
   toggle: MouseEventHandler<any>;
+  forceUpdate: Function;
 }
 
-export const AppUpdateBanner: FC<AppUpdateBannerProps> = (props) => (
-  <Alert className="app-update-banner" {...props} tag={SimpleCard} color="secondary">
-    <h4 className="mb-4">This app has just been updated!</h4>
-    <p className="mb-0">Restart it to enjoy the new features.</p>
-  </Alert>
-);
+export const AppUpdateBanner: FC<AppUpdateBannerProps> = ({ isOpen, toggle, forceUpdate }) => {
+  const [ isUpdating,, setUpdating ] = useToggle();
+  const update = () => {
+    setUpdating();
+    forceUpdate();
+  };
+
+  return (
+    <Alert className="app-update-banner" isOpen={isOpen} toggle={toggle} tag={SimpleCard} color="secondary">
+      <h4 className="mb-4">This app has just been updated!</h4>
+      <p className="mb-0">
+        Restart it to enjoy the new features.
+        <Button disabled={isUpdating} className="ml-2" color="secondary" size="sm" onClick={update}>
+          {!isUpdating && <>Restart now <FontAwesomeIcon icon={reloadIcon} className="ml-1" /></>}
+          {isUpdating && <>Restarting...</>}
+        </Button>
+      </p>
+    </Alert>
+  );
+};

src/utils/helpers/sw.ts

@@ -0,0 +1,16 @@
+export const forceUpdate = async () => {
+  const registrations = await navigator.serviceWorker?.getRegistrations() ?? [];
+
+  for (const registration of registrations) {
+    const { waiting } = registration;
+
+    waiting?.addEventListener('statechange', (event) => {
+      if ((event.target as any)?.state === 'activated') {
+        window.location.reload();
+      }
+    });
+
+    // The logic that makes skipWaiting to be called when this message is posted is in service-worker.ts
+    waiting?.postMessage({ type: 'SKIP_WAITING' });
+  }
+};