SW fix + Promises unification

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-proto",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "React TypeScript Boilerplate",
   "author": "Max L Stop&Go",
   "license": "ISC",

src/App.tsx

@@ -1,4 +1,5 @@
 import { FC, ReactElement, useEffect } from 'react'
+import { useRoutes } from 'react-router-dom'
 import cn from 'classnames'
 
 import {
@@ -7,13 +8,14 @@ import {
   ErrorBoundary,
   Offline
 } from 'components'
-import Router from 'router/Router'
+import { routes } from 'router/Router'
 
 import { useAppSelector, useAppDispatch } from 'store/store'
 import { switchToDark } from 'store/theme/themeSlice'
 import { THEME_NAMES } from 'constants/commonConstants'
 
 const App: FC = (): ReactElement => {
+  const content = useRoutes(routes)
   const currentTheme = useAppSelector((state) => state.theme.theme)
   const dispatch = useAppDispatch()
 
@@ -37,7 +39,7 @@ const App: FC = (): ReactElement => {
         <LanguageSelector />
         <ThemeSwitcher />
         <Offline />
-        <Router />
+        {content}
       </div>
     </ErrorBoundary>
   )

src/assets/index.html

@@ -15,7 +15,8 @@
       script-src 'self';
       script-src-attr 'none';
       style-src 'self' https: 'unsafe-inline';
-      upgrade-insecure-requests
+      upgrade-insecure-requests;
+      worker-src 'self';
     "
     />
     <title></title>

src/i18n/i18nApi.ts

@@ -12,6 +12,6 @@ export async function fetchTranslations (
       .then(
         (data) => resolve(data),
         () => {}
-      )
+      ).catch(er => console.log(er))
   })
 }

src/index.tsx

@@ -37,9 +37,8 @@ if (
   }
 
   startServiceWorkerPromise().then(
-    () => {},
     () => {}
-  )
+  ).catch(er => console.log(er))
 }
 
 const indexJSX = (
@@ -63,7 +62,6 @@ if (NO_SSR) {
   loadableReady(() => {
     hydrateRoot(container, indexJSX)
   }).then(
-    () => {},
     () => {}
-  )
+  ).catch(er => console.log(er))
 }

src/router/Router.tsx

@@ -1,17 +1,35 @@
-import { FC } from 'react'
-import { Route, Routes } from 'react-router-dom'
+import { RouteObject } from 'react-router-dom'
 
 import { ROUTE_CONSTANTS } from 'constants/routeConstants'
 import { About, Fetch, Home, NotFound } from 'pages'
 
-const Router: FC = () => (
-  <Routes>
-    <Route path='*' element={<NotFound />} />
-    <Route path={ROUTE_CONSTANTS.HOME} element={<Home />} />
-    <Route path={ROUTE_CONSTANTS.FETCH} element={<Fetch />} />
-    <Route path={ROUTE_CONSTANTS.ABOUT} element={<About />} />
-    <Route path={ROUTE_CONSTANTS.NOT_FOUND} element={<NotFound />} />
-  </Routes>
-)
+const routes: RouteObject[] = [
+  {
+    path: '*',
+    element: <NotFound />
+  },
+  {
+    path: ROUTE_CONSTANTS.HOME,
+    element: <Home />
+  },
+  {
+    path: ROUTE_CONSTANTS.FETCH,
+    element: <Fetch />
+  },
+  {
+    path: ROUTE_CONSTANTS.ABOUT,
+    element: <About />
+  },
+  {
+    path: ROUTE_CONSTANTS.NOT_FOUND,
+    element: <NotFound />
+  },
+  {
+    path: 'sw.js',
+    loader: async () => {
+      return await fetch('sw.js')
+    }
+  }
+]
 
-export default Router
+export { routes }

src/server/server.ts

@@ -46,17 +46,16 @@ const runServer = (hotReload?: () => RequestHandler[]): void => {
 }
 
 if (IS_DEV) {
-  ;(async () => {
+  (async () => {
     const { hotReload, devMiddlewareInstance } = await import(
       './middlewares/hotReload'
     )
     devMiddlewareInstance.waitUntilValid(() => {
       runServer(hotReload)
     })
   })().then(
-    () => {},
     () => {}
-  )
+  ).catch(er => console.log(er))
 } else {
   runServer()
 }

src/serviceWorker.ts

@@ -1,6 +1,6 @@
 const registerSW = async (): Promise<void> => {
   try {
-    const registration = await navigator.serviceWorker.register('/sw.js')
+    const registration = await navigator.serviceWorker.register('./sw.js')
     console.log(
       'ServiceWorker registration successful with scope: ',
       registration.scope
@@ -12,6 +12,12 @@ const registerSW = async (): Promise<void> => {
 
 export const startServiceWorker = (): void => {
   if ('serviceWorker' in navigator) {
-    window.addEventListener('load', () => registerSW)
+    window.addEventListener('load', () => {
+      (async () => {
+        await registerSW()
+      })().then(
+        () => {}
+      ).catch(er => console.log(er))
+    })
   }
 }

webpack/client.config.ts

@@ -65,7 +65,10 @@ const plugins: WebpackPluginInstance[] = [
       ]),
   new CopyPlugin({
     patterns: [
-      { from: `${SRC_DIR}/i18n/translations`, to: 'lang' }
+      { from: `${SRC_DIR}/i18n/translations`, to: 'lang' },
+      ...(process.env.NO_SSR === 'true'
+        ? [{ from: `${SRC_DIR}/sw.js`, to: 'sw.js' }]
+        : [])
     ]
   })
 ]