84 easier update method

src/components/App/MainApp.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import { connect } from 'react-redux'
 
 import { RootState, actions, selectors } from '../../Redux/Store'
@@ -7,6 +7,9 @@ import Content from '../organisms/Content'
 import TopBar from '../organisms/TopBar'
 import DrawerMenu from '../organisms/DrawerMenu'
 
+import * as serviceWorker from '../../serviceWorker'
+import { Snackbar } from '@material-ui/core'
+
 const mapStateToProps = (state: RootState) => ({
   isLoading: selectors.Main.ContentLoading.getIsLoading(state),
 })
@@ -18,18 +21,74 @@ const mapDispatchToProps = {
 type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {}
 
 const MainApp = ({ getUserConfiguration, isLoading }: Props) => {
+  const [waitingWorker, setWaitingWorker] = useState<Worker | undefined>(
+    undefined
+  )
+  const [newVersionAvailable, setNewVersionAvailable] = useState(false)
+  const [showSnackBar, setShowSnackBar] = useState(false)
+
+  const onServiceWorkerUpdate = (registration: {
+    waiting: Worker
+    postMessage: Function
+  }) => {
+    if (registration && registration.waiting) {
+      console.log('onServiceWorkerUpdate')
+      setWaitingWorker(registration.waiting)
+    }
+
+    setNewVersionAvailable(true)
+  }
+
+  const updateServiceWorker = useCallback(() => {
+    if (waitingWorker) {
+      waitingWorker.postMessage({ type: 'SKIP_WAITING' })
+      setNewVersionAvailable(false)
+      window.location.reload()
+    }
+  }, [waitingWorker, setNewVersionAvailable])
+
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'production') {
+      console.log('called register')
+      serviceWorker.register({ onUpdate: onServiceWorkerUpdate })
+    }
+
+    if (newVersionAvailable) {
+      console.log('new version available, open snackbar')
+      setShowSnackBar(true)
+    }
+  }, [])
   const [drawerIsOpen, setDrawerIsOpen] = useState(false)
   const toggleDrawer = () => setDrawerIsOpen(!drawerIsOpen)
 
   useEffect(() => {
     getUserConfiguration()
   }, [getUserConfiguration])
 
+  console.log({ showSnackBar })
+
   return (
     <React.Fragment>
       <TopBar drawerIsOpen={drawerIsOpen} toggleDrawer={toggleDrawer} />
       <DrawerMenu drawerIsOpen={drawerIsOpen} toggleDrawer={toggleDrawer} />
       <Content isLoading={isLoading} />
+      <Snackbar
+        open={showSnackBar}
+        autoHideDuration={undefined}
+        onClose={updateServiceWorker}
+      >
+        <>
+          <button
+            onClick={() => {
+              setShowSnackBar(false)
+              updateServiceWorker()
+            }}
+          >
+            close
+          </button>
+          <p>New update available</p>
+        </>
+      </Snackbar>
       <div id="modal-root" />
     </React.Fragment>
   )

src/components/App/index.tsx

@@ -12,17 +12,19 @@ import { mainTheme, muiTheme } from '../../mainTheme'
 import MainApp from './MainApp'
 import Wrapper from './Wrapper'
 
-const App = () => (
-  <ThemeProvider theme={mainTheme}>
-    <MuiThemeProvider theme={muiTheme}>
-      <Router>
-        <Wrapper>
-          <CssBaseline />
-          <MainApp />
-        </Wrapper>
-      </Router>
-    </MuiThemeProvider>
-  </ThemeProvider>
-)
+const App = () => {
+  return (
+    <ThemeProvider theme={mainTheme}>
+      <MuiThemeProvider theme={muiTheme}>
+        <Router>
+          <Wrapper>
+            <CssBaseline />
+            <MainApp />
+          </Wrapper>
+        </Router>
+      </MuiThemeProvider>
+    </ThemeProvider>
+  )
+}
 
 export default React.memo(App)

src/index.tsx

@@ -40,4 +40,4 @@ ReactDOM.render(
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: http://bit.ly/CRA-PWA
 // @ts-ignore
-serviceWorker.register()
+// serviceWorker.register()