From 320b9b130354e383919bdcaa53ecaa3fa1d4bae3 Mon Sep 17 00:00:00 2001 From: Stop&Go Date: Wed, 19 Apr 2023 19:00:22 +0300 Subject: [PATCH] SW fix + Promises unification --- package.json | 2 +- src/App.tsx | 6 ++++-- src/assets/index.html | 3 ++- src/i18n/i18nApi.ts | 2 +- src/index.tsx | 6 ++---- src/router/Router.tsx | 42 ++++++++++++++++++++++++++++------------ src/server/server.ts | 5 ++--- src/serviceWorker.ts | 10 ++++++++-- webpack/client.config.ts | 5 ++++- 9 files changed, 54 insertions(+), 27 deletions(-) diff --git a/package.json b/package.json index 40da94d..4436c22 100644 --- a/package.json +++ b/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", diff --git a/src/App.tsx b/src/App.tsx index 1340449..7355d56 100644 --- a/src/App.tsx +++ b/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 => { - + {content} ) diff --git a/src/assets/index.html b/src/assets/index.html index 0ab90da..81a57e3 100644 --- a/src/assets/index.html +++ b/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'; " /> diff --git a/src/i18n/i18nApi.ts b/src/i18n/i18nApi.ts index 59d415e..155b3aa 100644 --- a/src/i18n/i18nApi.ts +++ b/src/i18n/i18nApi.ts @@ -12,6 +12,6 @@ export async function fetchTranslations ( .then( (data) => resolve(data), () => {} - ) + ).catch(er => console.log(er)) }) } diff --git a/src/index.tsx b/src/index.tsx index b02817e..3125ffe 100644 --- a/src/index.tsx +++ b/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)) } diff --git a/src/router/Router.tsx b/src/router/Router.tsx index 83e284b..97ed8f9 100644 --- a/src/router/Router.tsx +++ b/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 = () => ( - - } /> - } /> - } /> - } /> - } /> - -) +const routes: RouteObject[] = [ + { + path: '*', + element: + }, + { + path: ROUTE_CONSTANTS.HOME, + element: + }, + { + path: ROUTE_CONSTANTS.FETCH, + element: + }, + { + path: ROUTE_CONSTANTS.ABOUT, + element: + }, + { + path: ROUTE_CONSTANTS.NOT_FOUND, + element: + }, + { + path: 'sw.js', + loader: async () => { + return await fetch('sw.js') + } + } +] -export default Router +export { routes } diff --git a/src/server/server.ts b/src/server/server.ts index db47e12..7e0b2ab 100644 --- a/src/server/server.ts +++ b/src/server/server.ts @@ -46,7 +46,7 @@ const runServer = (hotReload?: () => RequestHandler[]): void => { } if (IS_DEV) { - ;(async () => { + (async () => { const { hotReload, devMiddlewareInstance } = await import( './middlewares/hotReload' ) @@ -54,9 +54,8 @@ if (IS_DEV) { runServer(hotReload) }) })().then( - () => {}, () => {} - ) + ).catch(er => console.log(er)) } else { runServer() } diff --git a/src/serviceWorker.ts b/src/serviceWorker.ts index e73dcc0..72fb3ff 100644 --- a/src/serviceWorker.ts +++ b/src/serviceWorker.ts @@ -1,6 +1,6 @@ const registerSW = async (): Promise => { 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 => { export const startServiceWorker = (): void => { if ('serviceWorker' in navigator) { - window.addEventListener('load', () => registerSW) + window.addEventListener('load', () => { + (async () => { + await registerSW() + })().then( + () => {} + ).catch(er => console.log(er)) + }) } } diff --git a/webpack/client.config.ts b/webpack/client.config.ts index 8dfed71..55beb2a 100644 --- a/webpack/client.config.ts +++ b/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' }] + : []) ] }) ]