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' }]
+ : [])
  ]
  })
 ]