From 44ca432be8d1da63a952be94a9991f4e0edad724 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=B5=D0=BD=D0=B8=D1=81=20=D0=91=D1=83=D0=BB=D0=B3?= =?UTF-8?q?=D0=B0=D0=BA=D0=BE=D0=B2?= Date: Sun, 16 Jul 2023 21:10:39 +0300 Subject: [PATCH 1/5] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=20Service=20Worker?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/client/package.json | 5 +- packages/client/src/index.tsx | 17 ++++++ packages/client/src/utils/sw/sw.ts | 93 ++++++++++++++++++++++++++++++ packages/client/vite.config.ts | 2 + 4 files changed, 115 insertions(+), 2 deletions(-) create mode 100644 packages/client/src/utils/sw/sw.ts diff --git a/packages/client/package.json b/packages/client/package.json index 9057f78..064f6b1 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -19,7 +19,7 @@ "@phosphor-icons/react": "2.0.10", "@reduxjs/toolkit": "1.9.5", "axios": "1.4.0", - "classnames": "^2.3.2", + "classnames": "2.3.2", "clsx": "1.2.1", "dotenv": "16.0.2", "react": "18.2.0", @@ -60,7 +60,8 @@ "stylelint-config-standard-scss": "9.0.0", "ts-jest": "28.0.8", "typescript": "5.1.3", - "vite": "3.0.7" + "vite": "3.0.7", + "vite-plugin-pwa": "0.16.4" }, "license": "MIT" } diff --git a/packages/client/src/index.tsx b/packages/client/src/index.tsx index 251abe0..a4dace1 100644 --- a/packages/client/src/index.tsx +++ b/packages/client/src/index.tsx @@ -3,4 +3,21 @@ import './styles/index.scss'; import App from './App'; import ReactDOM from 'react-dom/client'; +const startServiceWorker = () => { + if ('serviceWorker' in navigator) { + window.addEventListener('load', () => { + navigator.serviceWorker + .register('/src/utils/sw/sw.ts') + .then((registration) => { + console.log('ServiceWorker registration successful with scope: ', registration.scope); + }) + .catch((error: string) => { + console.log('ServiceWorker registration failed: ', error); + }); + }); + } +}; + +startServiceWorker(); + ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(); diff --git a/packages/client/src/utils/sw/sw.ts b/packages/client/src/utils/sw/sw.ts new file mode 100644 index 0000000..dbd7d05 --- /dev/null +++ b/packages/client/src/utils/sw/sw.ts @@ -0,0 +1,93 @@ +/// + +const sw = self as unknown as ServiceWorkerGlobalScope & typeof globalThis; + +const cacheName = 'app-cache-v1'; + +const assetUrls = [ + '/', + '/index.html', + '/src/index.tsx', + '/src/styles/index.scss', + '/src/styles/images/casper.png', + '/src/styles/images/add_msg.png', + '/src/styles/images/auth.png', + '/src/styles/images/error.png', + '/src/styles/images/forum-left-side.svg', + '/src/styles/images/forum.svg', + '/src/styles/images/fullscreen-close.png', + '/src/styles/images/fullscreen-open.png', + '/src/styles/images/fullscreen.png', + '/src/styles/images/Hipe.svg', + '/src/styles/images/leader.svg', + '/src/styles/images/leaders.svg', + '/src/styles/images/leaderVector.png', + '/src/styles/images/like.png', + '/src/styles/images/profile.svg', + '/src/styles/images/progress-bg-pic.svg', + '/src/styles/images/progress-pic.svg', + '/src/styles/images/progress.svg', + '/src/styles/images/start.svg', +]; + +sw.addEventListener('install', (event) => { + console.log('install', event); + + event.waitUntil(addResourcesToCache(assetUrls)); +}); + +sw.addEventListener('activate', async (event) => { + try { + const cacheNames = await caches.keys(); + + await Promise.all(cacheNames.filter((name) => name !== cacheName).map((name) => caches.delete(name))); + } catch (error) { + console.log(error); + } +}); + +sw.addEventListener('fetch', (event) => { + const { request } = event; + + const url = new URL(request.url); + + if (url.origin === location.origin) { + event.respondWith(cacheFirst(request)); + } else { + // @ts-expect-error - response might be undefined + event.respondWith(networkFirst(request)); + } +}); + +async function addResourcesToCache(resources: string[]) { + try { + const cache = await caches.open(cacheName); + await cache.addAll(resources); + } catch (error) { + console.log(error); + } +} + +async function cacheFirst(request: Request) { + const cached = await caches.match(request); + + return cached ?? (await fetch(request)); +} + +async function networkFirst(request: Request) { + const cache = await caches.open(cacheName); + + try { + const response = await fetch(request); + + await cache.put(request, response.clone()); + + return response; + } catch (error) { + console.log(error); + + const cached = await caches.match(request); + + return cached; + } +} diff --git a/packages/client/vite.config.ts b/packages/client/vite.config.ts index bcfc171..477f4d8 100644 --- a/packages/client/vite.config.ts +++ b/packages/client/vite.config.ts @@ -2,6 +2,7 @@ import { defineConfig } from 'vite'; import dotenv from 'dotenv'; import react from '@vitejs/plugin-react'; import viteTsconfigPaths from 'vite-tsconfig-paths'; +import { VitePWA } from 'vite-plugin-pwa'; dotenv.config(); // https://vitejs.dev/config/ @@ -18,5 +19,6 @@ export default defineConfig({ jsxRuntime: 'classic', // Add this line }), viteTsconfigPaths(), + VitePWA({ registerType: 'autoUpdate' }), ], }); From 8f02cc5dd02bc76a558937e8406cb0ea8a374b80 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=B5=D0=BD=D0=B8=D1=81=20=D0=91=D1=83=D0=BB=D0=B3?= =?UTF-8?q?=D0=B0=D0=BA=D0=BE=D0=B2?= Date: Sun, 16 Jul 2023 21:35:31 +0300 Subject: [PATCH 2/5] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D1=8B=20=D1=88=D1=80=D0=B8=D1=84=D1=82=D1=8B=20=D0=B2=20?= =?UTF-8?q?=D0=BA=D1=8D=D1=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/client/src/utils/sw/sw.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/client/src/utils/sw/sw.ts b/packages/client/src/utils/sw/sw.ts index dbd7d05..8379824 100644 --- a/packages/client/src/utils/sw/sw.ts +++ b/packages/client/src/utils/sw/sw.ts @@ -28,6 +28,16 @@ const assetUrls = [ '/src/styles/images/progress-pic.svg', '/src/styles/images/progress.svg', '/src/styles/images/start.svg', + '/src/styles/fonts/HeliosExt-Bold.ttf', + '/src/styles/fonts/HeliosExt.ttf', + '/src/styles/fonts/Roboto-Bold.eot', + '/src/styles/fonts/Roboto-Bold.ttf', + '/src/styles/fonts/Roboto-Bold.woff', + '/src/styles/fonts/Roboto-Bold.woff2', + '/src/styles/fonts/Roboto-Regular.eot', + '/src/styles/fonts/Roboto-Regular.ttf', + '/src/styles/fonts/Roboto-Regular.woff', + '/src/styles/fonts/Roboto-Regular.woff2', ]; sw.addEventListener('install', (event) => { From eafb69148deb1743d47232678777ec41d9c16099 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=B5=D0=BD=D0=B8=D1=81=20=D0=91=D1=83=D0=BB=D0=B3?= =?UTF-8?q?=D0=B0=D0=BA=D0=BE=D0=B2?= Date: Sun, 16 Jul 2023 22:03:46 +0300 Subject: [PATCH 3/5] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=20=D0=BA=D1=8D=D1=88=20=D0=B4=D0=BB=D1=8F=20=D0=B4=D0=B8?= =?UTF-8?q?=D0=BD=D0=B0=D0=BC=D0=B8=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/client/src/utils/sw/sw.ts | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/client/src/utils/sw/sw.ts b/packages/client/src/utils/sw/sw.ts index 8379824..5535855 100644 --- a/packages/client/src/utils/sw/sw.ts +++ b/packages/client/src/utils/sw/sw.ts @@ -2,7 +2,8 @@ const sw = self as unknown as ServiceWorkerGlobalScope & typeof globalThis; -const cacheName = 'app-cache-v1'; +const staticCacheName = 'static-cache-v1'; +const dynamicCacheName = 'dynamic-cache-v1'; const assetUrls = [ '/', @@ -50,7 +51,12 @@ sw.addEventListener('activate', async (event) => { try { const cacheNames = await caches.keys(); - await Promise.all(cacheNames.filter((name) => name !== cacheName).map((name) => caches.delete(name))); + await Promise.all( + cacheNames + .filter((name) => name !== staticCacheName) + .filter((name) => name !== dynamicCacheName) + .map((name) => caches.delete(name)) + ); } catch (error) { console.log(error); } @@ -71,7 +77,7 @@ sw.addEventListener('fetch', (event) => { async function addResourcesToCache(resources: string[]) { try { - const cache = await caches.open(cacheName); + const cache = await caches.open(staticCacheName); await cache.addAll(resources); } catch (error) { console.log(error); @@ -85,7 +91,7 @@ async function cacheFirst(request: Request) { } async function networkFirst(request: Request) { - const cache = await caches.open(cacheName); + const cache = await caches.open(dynamicCacheName); try { const response = await fetch(request); From d6c7b3996b54c171733712069f02f0a8759ed2be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=B5=D0=BD=D0=B8=D1=81=20=D0=91=D1=83=D0=BB=D0=B3?= =?UTF-8?q?=D0=B0=D0=BA=D0=BE=D0=B2?= Date: Mon, 17 Jul 2023 01:25:42 +0300 Subject: [PATCH 4/5] =?UTF-8?q?=D1=83=D0=B4=D0=B0=D0=BB=D0=B5=D0=BD=20?= =?UTF-8?q?=D0=BF=D0=B0=D0=BA=D0=B5=D1=82=20classnames?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/client/package.json | 1 - .../components/CreateForm/CreateForm.tsx | 34 +++++++----------- .../forum/components/comments/Comments.tsx | 8 ++--- .../components/fullscreen/FullScreen.tsx | 35 +++++++++++-------- 4 files changed, 36 insertions(+), 42 deletions(-) diff --git a/packages/client/package.json b/packages/client/package.json index 064f6b1..c821864 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -19,7 +19,6 @@ "@phosphor-icons/react": "2.0.10", "@reduxjs/toolkit": "1.9.5", "axios": "1.4.0", - "classnames": "2.3.2", "clsx": "1.2.1", "dotenv": "16.0.2", "react": "18.2.0", diff --git a/packages/client/src/fuature/forum/components/CreateForm/CreateForm.tsx b/packages/client/src/fuature/forum/components/CreateForm/CreateForm.tsx index 34a3645..28b5d24 100644 --- a/packages/client/src/fuature/forum/components/CreateForm/CreateForm.tsx +++ b/packages/client/src/fuature/forum/components/CreateForm/CreateForm.tsx @@ -4,38 +4,28 @@ import { Button } from '@components/design-system'; import { BodyNormal } from '@components/design-system/Fonts'; export const ForumCreateForm: React.FC = () => { - - const [topic, setTopic] = useState(""); + const [topic, setTopic] = useState(''); const [description, setDesc] = useState(''); const createTopic = (e: React.ChangeEvent) => { e.preventDefault(); - setTopic(""); + setTopic(''); createDescription(e); - } + }; const createDescription = (e: React.ChangeEvent) => { e.preventDefault(); - setDesc(""); - } + setDesc(''); + }; return ( -
-
+ +
- setTopic(e.target.value) } - /> + setTopic(e.target.value)} /> - - +
+ Оставить комментарий + + +
); -} +}; diff --git a/packages/client/src/fuature/forum/components/topics/TopicElements/TopicElements.tsx b/packages/client/src/fuature/forum/components/topics/TopicElements/TopicElements.tsx index 82065f6..2d73aec 100644 --- a/packages/client/src/fuature/forum/components/topics/TopicElements/TopicElements.tsx +++ b/packages/client/src/fuature/forum/components/topics/TopicElements/TopicElements.tsx @@ -1,11 +1,11 @@ import React from 'react'; -import { TopicsItem } from '../TopicItem' +import { TopicsItem } from '../TopicItem'; export const TopicElements = () => { const topicsData = [ - { id:1, title: 'Какие игры сейчас популярны', desc: 'Dota, CS, CS:GO', timestamp: '10 янв 2023' }, - { id:2, title: 'Го играть', desc: 'Я бы сыграл в денди', timestamp: '30 июня 2023' }, - { id:3, title: 'Я доделал форум)', desc: 'Почти в дед лайн =)', timestamp: '01 июля 2023' }, + { id: '1', title: 'Какие игры сейчас популярны', desc: 'Dota, CS, CS:GO', timestamp: '10 янв 2023' }, + { id: '2', title: 'Го играть', desc: 'Я бы сыграл в денди', timestamp: '30 июня 2023' }, + { id: '3', title: 'Я доделал форум)', desc: 'Почти в дед лайн =)', timestamp: '01 июля 2023' }, ]; - return topicsData.map( element => ) + return topicsData.map((element) => ); }; diff --git a/packages/client/src/index.tsx b/packages/client/src/index.tsx index a4dace1..b32cc4f 100644 --- a/packages/client/src/index.tsx +++ b/packages/client/src/index.tsx @@ -2,22 +2,8 @@ import './styles/index.scss'; import App from './App'; import ReactDOM from 'react-dom/client'; +import { startServiceWorker } from '@utils/sw/startServiceWorker'; -const startServiceWorker = () => { - if ('serviceWorker' in navigator) { - window.addEventListener('load', () => { - navigator.serviceWorker - .register('/src/utils/sw/sw.ts') - .then((registration) => { - console.log('ServiceWorker registration successful with scope: ', registration.scope); - }) - .catch((error: string) => { - console.log('ServiceWorker registration failed: ', error); - }); - }); - } -}; +ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(); startServiceWorker(); - -ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(); diff --git a/packages/client/src/utils/sw/startServiceWorker.ts b/packages/client/src/utils/sw/startServiceWorker.ts new file mode 100644 index 0000000..61fe3d8 --- /dev/null +++ b/packages/client/src/utils/sw/startServiceWorker.ts @@ -0,0 +1,15 @@ +export function startServiceWorker() { + if ('serviceWorker' in navigator) { + window.addEventListener('load', async () => { + const sw = '/src/utils/sw/sw.ts'; + + try { + const registration = await navigator.serviceWorker.register(sw); + + console.log('ServiceWorker registration successful with scope: ', registration.scope); + } catch (error) { + console.log('ServiceWorker registration failed: ', error); + } + }); + } +} diff --git a/packages/client/src/utils/sw/sw.ts b/packages/client/src/utils/sw/sw.ts index 5535855..40cf706 100644 --- a/packages/client/src/utils/sw/sw.ts +++ b/packages/client/src/utils/sw/sw.ts @@ -42,8 +42,6 @@ const assetUrls = [ ]; sw.addEventListener('install', (event) => { - console.log('install', event); - event.waitUntil(addResourcesToCache(assetUrls)); }); @@ -69,10 +67,11 @@ sw.addEventListener('fetch', (event) => { if (url.origin === location.origin) { event.respondWith(cacheFirst(request)); - } else { - // @ts-expect-error - response might be undefined - event.respondWith(networkFirst(request)); + return; } + + // @ts-expect-error - response might be undefined + event.respondWith(networkFirst(request)); }); async function addResourcesToCache(resources: string[]) { diff --git a/packages/client/vite.config.ts b/packages/client/vite.config.ts index 477f4d8..a534cd9 100644 --- a/packages/client/vite.config.ts +++ b/packages/client/vite.config.ts @@ -18,7 +18,18 @@ export default defineConfig({ react({ jsxRuntime: 'classic', // Add this line }), - viteTsconfigPaths(), VitePWA({ registerType: 'autoUpdate' }), + viteTsconfigPaths(), ], + build: { + rollupOptions: { + input: { + app: './index.html', + 'service-worker': './src/utils/sw/sw.ts', + }, + output: { + entryFileNames: (asset) => (asset.name === 'service-worker' ? '[name].js' : 'assets/[name].[hash].js'), + }, + }, + }, });