fix: update icon, add update modal and service worker updater

geyserfund · Aug 9, 2023 · 71d5d5b · 71d5d5b
1 parent 537bc40
commit 71d5d5b
Show file tree

Hide file tree

Showing 10 changed files with 136 additions and 21 deletions.
diff --git a/public/icons/16.png b/public/icons/16.png
diff --git a/public/icons/180.png b/public/icons/180.png
diff --git a/public/icons/192.png b/public/icons/192.png
diff --git a/public/icons/32.png b/public/icons/32.png
diff --git a/public/icons/512.png b/public/icons/512.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,24 +5,33 @@ import { BrowserRouter } from 'react-router-dom'
 import { AppLayout } from './AppLayout'
 import { client } from './config'
 import { Head } from './config/Head'
-import { AuthProvider, ChakraThemeProvider, NavProvider } from './context'
+import {
+  AuthProvider,
+  ChakraThemeProvider,
+  NavProvider,
+  ServiceWorkerProvider,
+} from './context'
 import { BtcProvider } from './context/btc'
 
-export const App = () => (
-  <ChakraProvider>
-    <ChakraThemeProvider>
-      <BrowserRouter>
-        <ApolloProvider client={client}>
-          <AuthProvider>
-            <NavProvider>
-              <BtcProvider>
-                <Head />
-                <AppLayout />
-              </BtcProvider>
-            </NavProvider>
-          </AuthProvider>
-        </ApolloProvider>
-      </BrowserRouter>
-    </ChakraThemeProvider>
-  </ChakraProvider>
-)
+export const App = () => {
+  return (
+    <ChakraProvider>
+      <ChakraThemeProvider>
+        <ServiceWorkerProvider>
+          <BrowserRouter>
+            <ApolloProvider client={client}>
+              <AuthProvider>
+                <NavProvider>
+                  <BtcProvider>
+                    <Head />
+                    <AppLayout />
+                  </BtcProvider>
+                </NavProvider>
+              </AuthProvider>
+            </ApolloProvider>
+          </BrowserRouter>
+        </ServiceWorkerProvider>
+      </ChakraThemeProvider>
+    </ChakraProvider>
+  )
+}
diff --git a/src/context/index.ts b/src/context/index.ts
@@ -3,4 +3,5 @@ export * from './auth'
 export * from './filter'
 export * from './nav'
 export * from './project'
+export * from './serviceWorkerUpdate'
 export * from './theme'
diff --git a/src/context/serviceWorkerUpdate.tsx b/src/context/serviceWorkerUpdate.tsx
@@ -0,0 +1,102 @@
+import { Button, HStack } from '@chakra-ui/react'
+import { createContext, Dispatch, SetStateAction, useContext } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useRegisterSW } from 'virtual:pwa-register/react'
+
+import { Modal } from '../components/layouts'
+import { Body1 } from '../components/typography'
+
+const defaultContext: ServiceWorkerUpdateProps = {
+  needRefresh: false,
+  setNeedRefresh() {},
+  updateServiceWorker: () =>
+    new Promise((resolve) => {
+      resolve()
+    }),
+}
+
+export type ServiceWorkerUpdateProps = {
+  needRefresh: boolean
+  setNeedRefresh: Dispatch<SetStateAction<boolean>>
+  updateServiceWorker: (reloadPage?: boolean | undefined) => Promise<void>
+}
+
+export const ServiceWorkerUpdate =
+  createContext<ServiceWorkerUpdateProps>(defaultContext)
+
+const InternalMS = 20 * 1000
+
+export const ServiceWorkerProvider = ({
+  children,
+}: {
+  children: React.ReactNode
+}) => {
+  const { t } = useTranslation()
+  const {
+    needRefresh: [needRefresh, setNeedRefresh],
+    updateServiceWorker,
+  } = useRegisterSW({
+    onRegisteredSW(swUrl, r) {
+      if (r) {
+        setInterval(async () => {
+          if (!(!r.installing && navigator)) return
+
+          if ('connection' in navigator && !navigator.onLine) return
+
+          const resp = await fetch(swUrl, {
+            cache: 'no-store',
+            headers: {
+              cache: 'no-store',
+              'cache-control': 'no-cache',
+            },
+          }).catch((error) => console.log('error', error))
+          console.log('is it getting here?', resp)
+
+          if (resp?.status === 200) await r.update()
+        }, InternalMS)
+      }
+    },
+    onRegisterError(error: any) {
+      console.log('SW registration error', error)
+    },
+  })
+
+  const handleConfirm = () => {
+    updateServiceWorker(true)
+    setNeedRefresh(false)
+  }
+
+  return (
+    <ServiceWorkerUpdate.Provider
+      value={{
+        needRefresh,
+        setNeedRefresh,
+        updateServiceWorker,
+      }}
+    >
+      {children}
+
+      <Modal
+        isOpen={needRefresh}
+        onClose={() => setNeedRefresh(false)}
+        title={t('Update available')}
+      >
+        <Body1>
+          {t('There is a newer version of the app available')}{' '}
+          {t('Would you like to reload the page to get the latest update?')}
+        </Body1>
+        <HStack w="full" justifyContent="flex-end" marginTop="20px">
+          <Button variant="secondary" onClick={() => setNeedRefresh(false)}>
+            {t('No')}
+          </Button>
+          <Button variant="primary" onClick={handleConfirm}>
+            {t('Yes')}
+          </Button>
+        </HStack>
+      </Modal>
+    </ServiceWorkerUpdate.Provider>
+  )
+}
+
+export const useServiceWorkerUpdate = (): ServiceWorkerUpdateProps =>
+  useContext(ServiceWorkerUpdate)
diff --git a/src/translations/English.json b/src/translations/English.json
@@ -645,5 +645,9 @@
   "Check your SPAM folder for the email.":"Check your SPAM folder for the email.",
   "As a project creator, you cannot delete your profile":"As a project creator, you cannot delete your profile",
   "Successfully updated user email":"Successfully updated user email",
-  "Email verification successfull!":"Email verification successfull!"
+  "Email verification successfull!":"Email verification successfull!",
+  "Update available":"Update available",
+  "There is a newer version of the app available":"There is a newer version of the app available",
+  "Would you like to reload the page to get the latest update?":"Would you like to reload the page to get the latest update?"
+
 }
diff --git a/vite.config.ts b/vite.config.ts
@@ -7,7 +7,6 @@ import { VitePWA, VitePWAOptions } from 'vite-plugin-pwa'
 const pwaOptions: Partial<VitePWAOptions> = {
   mode: 'development',
   base: '/',
-  registerType: 'autoUpdate',
   includeAssets: ['logo-brand.svg'],
   manifest: {
     start_url: '.',