diff --git a/template/src/index.js b/template/src/index.js index a7a3dad..d9fc14c 100644 --- a/template/src/index.js +++ b/template/src/index.js @@ -1,7 +1,7 @@ -import { lazy, StrictMode, Suspense, useCallback, useEffect } from "react"; +import { lazy, StrictMode, Suspense, useCallback, useEffect, useState } from "react"; import ReactDOM from "react-dom"; import { Router, Switch, Route, useLocation } from "react-router-dom"; -import { LinearProgress, CssBaseline } from "@material-ui/core"; +import { LinearProgress, CssBaseline, Slide, Alert, Button, Snackbar as MaterialSnackbar } from "@material-ui/core"; import { ThemeProvider, createTheme, StyledEngineProvider } from "@material-ui/core/styles"; import ReactGA from "react-ga"; import * as Sentry from "@sentry/browser"; @@ -41,11 +41,26 @@ const theme = createTheme({ const App = () => { const { pathname } = useLocation(); + const [waitingWorker, setWaitingWorker] = useState(null); + const [newVersionAvailable, setNewVersionAvailable] = useState(false); const { stuff, setStuff } = useGlobalState(useCallback((e) => ({ stuff: e.stuff, setStuff: e.setStuff, }), []), shallow); + const updateSW = useCallback(() => { + waitingWorker?.postMessage({ type: "SKIP_WAITING" }); + setNewVersionAvailable(false); + window.location.reload(); + }, [waitingWorker]); + + useEffect(() => { + serviceWorkerRegistration.register({ onUpdate: ({ waiting }) => { + setWaitingWorker(waiting); + setNewVersionAvailable(true); + } }); + }, []); + console.log(stuff); useEffect(() => { @@ -71,6 +86,21 @@ const App = () => { + + {"update"}} + > + {"A new version is available!"} + +