Merge pull request #47 from BinaryStudioAcademy/task/OV-43-add-pwa

OV-43: Add PWA

.gitignore

@@ -11,3 +11,6 @@ build
 .DS_Store
 .env
 .idea
+
+# PWA
+dev-dist/

frontend/package.json

@@ -20,13 +20,16 @@
     "devDependencies": {
         "@types/react": "18.3.3",
         "@types/react-dom": "18.3.0",
+        "@vite-pwa/assets-generator": "0.2.4",
         "@vitejs/plugin-react": "4.3.1",
         "autoprefixer": "10.4.20",
         "eslint-plugin-jsx-a11y": "6.9.0",
         "eslint-plugin-react": "7.35.0",
         "eslint-plugin-react-hooks": "4.6.2",
         "postcss": "8.4.41",
-        "vite": "5.4.0"
+        "vite": "5.4.0",
+        "vite-plugin-pwa": "0.20.1",
+        "workbox-core": "7.1.0"
     },
     "dependencies": {
         "@chakra-ui/icons": "2.1.1",

frontend/pwa-assets.config.ts

@@ -0,0 +1,12 @@
+import {
+    defineConfig,
+    minimal2023Preset as preset,
+} from '@vite-pwa/assets-generator/config';
+
+export default defineConfig({
+    headLinkOptions: {
+        preset: '2023',
+    },
+    preset,
+    images: ['public/vite.svg'],
+});

frontend/vite.config.ts

@@ -2,6 +2,7 @@ import { fileURLToPath } from 'node:url';
 
 import reactPlugin from '@vitejs/plugin-react';
 import { type ConfigEnv, defineConfig, loadEnv } from 'vite';
+import { VitePWA } from 'vite-plugin-pwa';
 
 const config = ({ mode }: ConfigEnv): ReturnType<typeof defineConfig> => {
     const {
@@ -14,7 +15,40 @@ const config = ({ mode }: ConfigEnv): ReturnType<typeof defineConfig> => {
         build: {
             outDir: 'build',
         },
-        plugins: [reactPlugin()],
+        plugins: [
+            reactPlugin(),
+            VitePWA({
+                registerType: 'autoUpdate',
+                injectRegister: false,
+
+                pwaAssets: {
+                    disabled: false,
+                    config: true,
+                },
+
+                manifest: {
+                    name: 'OutreachVids',
+                    short_name: 'OV',
+                    description:
+                        'Create personalized sales videos using generated video content and AI-generated avatars.',
+                    theme_color: '#eb5500',
+                    background_color: '#0a0049',
+                },
+
+                workbox: {
+                    globPatterns: ['**/*.{js,css,html,svg,png,ico}'],
+                    cleanupOutdatedCaches: true,
+                    clientsClaim: true,
+                },
+
+                devOptions: {
+                    enabled: true,
+                    navigateFallback: 'index.html',
+                    suppressWarnings: true,
+                    type: 'module',
+                },
+            }),
+        ],
         server: {
             port: Number(VITE_APP_DEVELOPMENT_PORT),
             proxy: {